Custom fonts on the web

How can I use custom fonts hence not web safe fonts on the web and keep them readable for search engines?

Browsing the World Wide Web you will find many web safe fonts such as Arial, Verdana, Helvetica, Times, ... but only few non-standard fonts. The reason is that these fonts are not available on all computers or if they are they don't look alike. Even Verdana and Times don't look alike on Mac and PC (and yes, Mac looks better!).

1) Go to Google Web Fonts and you will find a list of fonts. Choose the ones you like the most and get their name (bottom-left corner of each box written in bold)
2) Take the following code and type the name of the font

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=YourFontName">

if there's a space in the name of the font replace it with + like...

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Great+Vibes">

and if you want to have multiple fonts put | a between them (on Mac computers alt+7, may vary depending on the keyboard's settings but you may as well copy and paste from here)

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=YourFontName1|YourFontName2">

like in...

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here|Great+Vibes">

3) To apply the font I would recommend you to use a styling class (also see Basic HTML Codes knowledge base to better understand what that means and how to use it)

<style>
.myfont1 {
font-family: 'Great Vibes', serif;
font-size: 24px;
}
.myfont2 {
font-family: 'Just Me Again Down Here', serif;
font-size: 20px;
}
</style>

and put the text in a div or paragraph with the appropriate class

<div class="myfont1">I love this font. Ain't it totally gorgeous?</div>
<div class="myfont2">I love this font too.</div>

4) Putting everything together you get

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here|Great+Vibes">
<style>
.myfont1 {
font-family: 'Great Vibes', serif;
font-size: 24px;
}
.myfont2 {
font-family: 'Just Me Again Down Here', serif;
font-size: 20px;
}
</style>
<div class="myfont1">I love this font. Ain't it totally gorgeous?</div>
<div class="myfont2">I love this font too.</div>

which results in...

I love this font. Ain't it totally gorgeous?
I love this font too.

It may look more complicated than it is.

This FAQ is also discussed in my WPFAQ.org E-Book (sample)

© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com
Thank you for visiting and supporting my website,
- Cédric -

Now share it…

Share

Comments are closed.