How to use Google Fonts on your website?

Frequently Asked Questions about WYSIWYG Web Builder
Locked
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

How to use Google Fonts on your website?

Post by Pablo »

1) Visit the Google Fonts website: http://www.google.com/fonts/

2) Find the font you want to use and add it to a collection (Click 'Add to collection'). Take note of the font name, you will need it in step 6.

3) To be able to use the font on your computer you will have to download and install it so it will be available in WYSIWYG Web Builder (and other Windows software).
Click the “Download your Collection” link at the top of the Google Fonts website and you’ll get a zip file containing all the requested font(s) in TTF format.

4) Unzip the collection and and drag the TTF files to your Windows fonts folder.
(In Windows 8: Control Panel\Appearance and Personalization\Fonts)
The font(s) will now be available to all your Windows applications.

5) To see the font in WYSIWYG Web Builder, make sure the option 'Display web safe fonts only' is disabled.
Menu->Tools->Options->Miscellaneous

6) The last step is to add a reference to the font in your page so it will also work on computers that do not have the font installed.
a) Open Page HTML (Menu->Page->Page HTML)
b) Copy this code between the head tags:

Code: Select all

<link href='http://fonts.googleapis.com/css?family=TheFontName' rel='stylesheet' type='text/css'>
c) Replace 'TheFontName' with the name of the font (see step 2).
Locked