• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 469
  • Last Modified:

@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!
0
mel200
Asked:
mel200
  • 4
  • 3
1 Solution
 
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
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now