?
Solved

@font-face Best Use Or Web safe fonts

Posted on 2011-09-27
7
Medium Priority
?
454 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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
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!

 
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

Certified OpenStack Administrator Course

We just refreshed our COA course based on the Newton exam.  With 14 labs, this course goes over the different OpenStack services that are part of the certification: Dashboard, Identity Service, Image Service, Networking, Compute, Object Storage, Block Storage, and Orchestration.

Question has a verified solution.

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

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.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

801 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