How to Use Google Fonts
You can make all sorts of changes to your Webgarden website, even edit the typography. You can change the color, size, and spacing of the letters, as well as the font. If you’re not satisfied with the basic fonts that Webgarden offers, you can choose from the hundreds of options available on Google Fonts. Today we’ll show you how to use Google Fonts on your website.
Go to and choose the font you like. Then click on the Quick-Use button, which is the center button to the left of the blue Add to Collection.
Google Fonts 1 edited.png
Step 1 is Choose the styles you want. Only select the styles you actually intend to use. The more styles you select, the longer it will take the website to load. Ordinarily only Normal 400, Bold 700, and their combinations with italics are necessary. After you’ve made your choices scroll down to the next step.
Google Fonts 2 edited.png
Step 2 is Choose the character sets you want. You can check more boxes if you would like to use diacritics (Latin Extended) or a different alphabet (for example, Cyrillic). In our example we’ve only selected what we need for English.
Google Fonts 3 edited.png
In step 3, called Add this code to your website, select the tab @import and copy the text you see displayed.
Google Fonts 4 edited.png
Then in Webgarden administration go to Design → CSS Editing. Do not delete any existing text. Paste the Google font code on the first line and save.
Google Fonts 6 edited.png
In step 4 we replace the existing font with the new one. Find the name of the new font written in single quotation marks, as shown in the picture below.
Google Fonts 5 edited.png
Then in CSS Editing find the section called Body, where in the row Font-Family you will see which font is being used now. Only the first font listed needs to be replaced. In the example below, the font is Arial.
Google Fonts 7 edited.png
Delete Arial and replace it with the name of the new font in single quotation marks (‘Playfair Display’). Now go through the entire document and anywhere you see Arial replace it with ‘Playfair Display’. This changes the font.
Google Fonts 8 edited.png
Save the changes. Now when you open your website you’ll see the new font. If there are any problems with the font you’ve inserted, we are happy to help you at the helpdesk.
03/24/2015 03:31:43
Or visit this link or this one