Solved

@font-face Best Use Or Web safe fonts

Posted on 2011-09-27
7
434 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

708 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now