Web Safe Fonts these days

Hello,

For

font-family: tier 1 font, tier 2 font, other

We're using verdana, georgia, for tier 2 fonts.

What are some really good tier 1 fonts that are accessable on most machines including mobile devices? This site's user's use a little nicer computers and mobile devices.

Our Site: TheWealthyMind(dot)com
LVL 7
weikelbobAsked:
Who is Participating?
 
James MurrellProduct SpecialistCommented:
this could be a useful read for you http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css..

fonts: very personal thing
0
 
Chris StanyonCommented:
I think the idea of web-safe fonts has moved on significantly since the concept was first introduced. The idea of web-safe fonts was to use a font that was almost certainly installed on every computer - Windows, Mac, Linux. Pretty limited!

There are now several different ways of using fonts in your website that don't need to be installed on the clients computer. Google Fonts and FontSquirrel are two that spring to mind.

To use a Google Font for example, you simply include a link to the font in the HEAD of your document, and then use it in your CSS as you normally would, including a fallback.

<link href='http://fonts.googleapis.com/css?family=Headland+One' rel='stylesheet' type='text/css'>

 body { font-family: 'Headland One', serif; }

Open in new window

It's supported in all modern browsers and frees you from the restrictions of old-school 'web-safe' fonts!

www.google.com/webfonts
http://www.fontsquirrel.com/
0
 
Loganathan NatarajanLAMP DeveloperCommented:
Really, I too thinking this morning about "Google Fonts" (why they give link etc.,)..
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
weikelbobAuthor Commented:
Wow fonts have come a long ways.

Will Google Fonts work on apple/droid/other mobile devices as well as at least 95% of all current web browsers?

If it's not 95%, what is the percentage that Google Fonts covers?

Thanks, this is quite an improvement.
0
 
Chris StanyonCommented:
Simple answer - yes! It will work on all modern browsers including those on mobile devices.

Think your design through and include a suitable backup for those older devices that won't support it, and don't start littering your design with 20 different fonts - each font take times to download so your site could become sluggish (not to mention ugly!)
0
 
weikelbobAuthor Commented:
ChrisStanyon,

Thank you.

>>include a suitable backup for those older devices<<

What's the best way to do that?

Also, how much slower will my website be with one font to download? My site has to be fast for SEO purposes.
0
 
Chris StanyonCommented:
Add a backup using the CSS font-family tags

body { font-family: 'Your Google Font', Verdana, san-serif; }

As for speed, it will depend on the fonts being used. If you visit the Google Fonts website, you'll see a link for each font saying Quick Use. Click on that and it will give you a chart showing speed.

Your site doesn't have to be fast for SEO purposes! Your site will likely contain much more information in your CSS, Images, Javascript and Content than a Google Font. Adding it is no different than adding any other resource to your site.

Test the speed of your site in whichever way you usually do
0
 
RobOwner (Aidellio)Commented:
Why not use your own fonts and show the site exactly the way you want?  As long as the copyright is ok with you doing so.

The browsers support the use of the CSS3 @font-face tag?

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

This site will help you achieve the right formats:

http://www.fontsquirrel.com/fontface/generator
0
 
David BruggeCommented:
Yes, as you said, browser font technology has come a long way. However to answer your original question, this listing might be helpful: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

It has a list of fonts that were included with different versions of operating systems on Windows and Mac up to Vista and OSX 10.4
0
 
weikelbobAuthor Commented:
Sorry for the delay, you guys really helped us out by the way. I love google 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.