Solved

@font-face Best Use Or Web safe fonts

Posted on 2011-09-27
7
445 Views
Last Modified: 2012-05-12
Hi- I read this question, but the links are largely no longer valid.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_10020486.html?sfQueryTermInfo=1+10+30+face+font

I also read this:
http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css

and wanted to know of the fonts they list as safe really are.

The comments below included one that says:  "why bother with these when you’ve got @font-face? Those give us TRULY gorgeous type."

I would like to use monotype Corsiva as headers on a website without having to use @font-face, but I think it's intriguing.

SO! The question is 2-part:

1. Can I safely Use monotype corsiva, and if someone doesn't have it installed, will they still see the header?

2. Is anyone using @font-face successfully, and if so can you throw me an example?

Thanks!
0
Comment
Question by:mel200
  • 4
  • 3
7 Comments
 
LVL 2

Expert Comment

by:maricksville
ID: 36713762
From what I know of @font-face is it safe to use as you are providing the source of the font, and therefore it is not required to be installed on your viewers computer.

If a person is using an older browser that does not permit the includion of @font-face then your CSS will degrade back to the second font indicated in the font-family declaration. Naturally therefore it is important to have fallback 'web-safe' fonts to use in the event that @font-face does not render your included fonts.

Have a look at http://www.alistapart.com/articles/cssatten which I found to be a good example on this topic.
0
 

Author Comment

by:mel200
ID: 36713809
Thanks!

 So I could include a font page on my website that is not public but includes the fonts I want to use? But how are the fonts supplied? Or am I pointing to a font directory that includes the font files I'm pointing to?

0
 
LVL 2

Accepted Solution

by:
maricksville earned 500 total points
ID: 36713995
Thats correct.

You would simply create a directory that you want to place the source fonts in and then link to the fonts within that folder. Remember that the pathway must be relative to your CSS file.

IE: If you have a structure with two folders css/cssfile.css and fonts/fontfacefile.otf then your link would be:

@font-face { font-family: FontName; src: url('../fonts/fontfacefile.otf'); }

Have a look at http://sixrevisions.com/css/font-face-guide/ for some more info. You could also consider using Cufon which takes a different approach to presenting fonts.

You can source fonts from Google by searching for font-face fonts. An important aside is licencing. You must check that the font licence permits this type of use. Some fonts can be used for non-commercial applications but are restricted from use in mass media websites. Most fonts include a licence or you can Google them.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 2

Expert Comment

by:maricksville
ID: 36713998
Just to clarify RE 'How are fonts supplied'. You should include them yourself or Google them to find fonts you want to use.
0
 

Author Closing Comment

by:mel200
ID: 36714135
Thanks!
0
 
LVL 2

Expert Comment

by:maricksville
ID: 36714162
You can always test this yourself.

Make a simple webpage linked to a stylesheet and the fonts you want use and then see how the fonts appear in your browser. If you have alternate browsers installed (Crome, Safari, Firefox and Opea) you can also check how the font appears in these browsers.

Remember to include fallback fonts in the font-family declaration for users with older browsers.

Good luck.
0
 

Author Comment

by:mel200
ID: 36714340
Thanks- I plan to! I'm pretty excited about this. It seems to me it can help with SEO, where you don't have to use images for fancy fonts.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

791 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question