Changing Google Fonts
Support info for fonts provided by Google
Support for templates that already have Google fonts. Google fonts are used in many Allwebco templates. You may want to change the default font face that is setup in the template. If your template does not already include Google Fonts (see the top line in your style.css), and you want to add them, see instead Google Fonts Overview.
Changing the template font face
In Allwebco templates the "@import" code is used for Google fonts. This will be the first line(s) in your css file (style.css, coolstyle.css, mobi-style.css, etc). Do all three steps below to either add a new font, or replace an existing one.
Note: In the steps below you can either replace the Google font, or add as a new font.
Make backups of your .css files before you start.
Step 1.) Get import code
Go to the Google Fonts website. Search for the font you want to use. Click the "Quick-use" icon, click on the styles you want (bold, italic) and select the "@import" tab at the bottom to get the code to use in your .css file. Select and copy the code.
Find the following code, or similar, at the top of your .css file. Paste your new font @import either over this line, replacing it, or just below this line if you are adding this as a new font.
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);
In the above example we are importing the "Droid Sans" font in two weights, 400 and 700. It is best not to import too many fonts to maintain your page loading speed. You may see 2 lines if the template is using 2 different font faces.
Step 2.) Edit with the new font
Once you've added the new font @import line, you'll need to edit the face style code in other areas of your .css file(s). The Google font may be used in multiple places in your css files (menu, style, media-queries .css). You'll want to replace all instances if you are replacing fonts.
Example near the top of the style .css file:
body, div, table { color: #000000; font: 16px "Droid Sans", sans-serif; font-weight: 400; }
Replace "Droid Sans" in the above with your new font name (use a space instead of the + that Google uses in the @import code).
If You Added a New Font:
Search for "Droid Sans" (or whatever the original Google font used is) in all your css files. Replace areas you desire with your new font name. You can optionally only change the title or subtitle class, or sidebar classes with your new font.
If You Replaced a Font:
Search for "Droid Sans" in all css files. You can use search and replace, for example search Droid Sans and replace with Open Sans. Replace all instances of the font you are replacing. There may be more than 20 styles that us the Google font.
Step 3.) Test
Open one of your HTML pages and see if the new font is working.
Related Topics:
Google Fonts Overview
Adding New Font Styles