@font-face Best Use Or Web safe fonts

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!
mel200Asked:
Who is Participating?
 
maricksvilleCommented:
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
 
maricksvilleCommented:
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
 
mel200Author Commented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
maricksvilleCommented:
Just to clarify RE 'How are fonts supplied'. You should include them yourself or Google them to find fonts you want to use.
0
 
mel200Author Commented:
Thanks!
0
 
maricksvilleCommented:
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
 
mel200Author Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.