iWeb FAQ - Custom fonts on the web

iWebFAQ.org

 

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

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 

Share/Bookmark

Share/Bookmark


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!).



Chapter 1: iWeb

Chapter 2: Google Web Fonts (recommended)



Chapter 1: iWeb


If in iWeb you choose a font which is not web safe iWeb will turn the TextBox containing the custom-font text into an image and adds the text in an alt-tag (usually used to describe an image for search engines since they can't look at what is on the picture).


It works but I'm not a friend of this practice. I want text to be text on a page not an image. The solution is Google Web Fonts.



Chapter 2: Google Web Fonts (recommended)


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.

5. Note that this also works in HTML Snippets however if you want search engines to be able to read the text you have to use Alternative HTML. If you wonder why the reason is described here. For readability reasons I wouldn't recommend you to apply the custom font to the entire text on your website.




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


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -