This tutorial will show you how to add Google Web Fonts to your pages. We will use the Sample website from the quick tutorial to demonstrate the process. If you only use the font on a single page, add it to that page only. If all pages need that font, add it to the template page if you have one.
Go to the website http://www.google.com/fonts.
Select the font you like. We select the third one "Libre Baskerville" as example.
Click on the "Quick-use" button.
Choose the styles for this font.
Select the generated HTML code in the box "<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:700' rel='stylesheet' type='text/css'>". Right-click on it and select "Copy" from the context menu.
Open a page in Website Realizer that you want to add the font. Right-click on the page and select "Page HTML" from the context menu to open the HTML Properties Dialog.
Click on the tab 'Inside Head" and paste the HTML code from Google Web Fonts to the text box.
Press the OK button to save the HTML code.
Start the CSS Style Editor by selecting "Tools" -> "CSS Style Editor" from the main menu.
Click on the style "heading-1". We are going to change the font family from "Georgia, Times, Times New Roman, serif" to Google Web Font "Libre Baskerville, serif". As the new font family has not been defined yet, we are going to add it in the following step.
Click on the button at the end of the field "Font family. The following dialog will be opened.
Click on the "Add" button and the following dialog will be opened.
We are going to add the font "Libre Baskerville, serif" as shown on the page of Google Web Fonts:
Type "Libre Baskerville" to the text field as shown below. You cannot select them from the available fonts as it is not on your computer.
Then press this button to add the font.
Do the same to the font "serif".
Press the OK button to add them to the list. The new font family will be added to the bottom.
Select the newly added font family from the drop down menu as shown below:
Press the OK button to save the changes. You need to preview the results in the internal or external browsers. The heading will be changed from:
If you want to change the other styles to use this font, select them such as "heading-2". Then select the new font family from the drop down menu.