RapidWeaver FAQ - Custom fonts on the web







Share/Bookmark


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.


Once you added the code to your page go to "Format", "HTML" choose "Code". It may look more complicated than it is.



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

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
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