Using Google Fonts

Help and support info for fonts provided by Google

Sticky Note Google Fonts
Google offers free CSS3 style fonts. You can use these fonts in any website or template. In most cases these fonts will render better and be more readable in web browsers that support CSS3. Google Fonts are included in some newer responsive template designs. They are easy to add.

See Also…

Source Sans Pro Example
Varela Round Example

You can view the source code to see how we added Google fonts to this page for the above text, however, our example is NOT using the code in the same way as outlined below. You can add Google fonts globally using the info in the sections below and save considerable editing time.


Selecting a Google Font Face
See the Google Fonts website. You can search for the font you need, click the "Quick-use" icon and select the "@import" tab for code to use in your .css files.


Templates with Google Fonts
If your template already has Google fonts (see the top line in your style.css), you can change to other font faces. See Changing Google Fonts.


Adding the Google Fonts to Your Website
In our templates we use the "@import" code to add the fonts globally to all pages in the external template main .css and menu files.

The @import code line will be the first lines in your css file (style.css, coolstyle.css, mobi-style.css, etc). They can be used in any of the .css files and should always be the first line in these files. The following is an example:

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);
@import url(http://fonts.googleapis.com/css?family=Varela+Round);

In the above example we are importing 2 Google Fonts and for "Source Sans Pro" we are importing 2 font weights, 400 and 600. It is best not to import too many fonts to maintain your page loading speed. In this example we are using the font "Source Sans Pro" for the body text and "Varela Round" for the page titles.

Later in the .css file we "call" the fonts using something like the following:

body, div, table { color: #000000; font: 16px "Source Sans Pro", sans-serif; font-weight: 400; }

.title { color: #000000; font: 21px "Varela Round", arial, sans-serif; font-weight: normal; }


Using the above code, all text inside the body, any div or table area will use the "Source Sans Pro" font (unless it's overwritten by another class). Text that uses the class "title" will display the "Varela Round" font as in this example code used in the HTML page:

<span class="title">Sample Title</span><br>

Or as a heading tag for better SEO:

<h1 class="title">Sample Heading Title</h1>


Different ways to add Google fonts
In our 2 examples above we have shown you how to add Google fonts by either adding the code directly to an HTML page (view this page source to see the example), or by adding the code to your .css file (section just above this one). There are other ways to add these fonts. Search at Google for "Google font support" to find more info.


Adding Google Fonts to a template that does not include them
You can use the above examples to add Google Fonts to your global css files. Be sure you add the "@import" as the very first line of your css file. If you have multiple css files like a separate "menu.css" file you should add the @import to the top of the first css file "called" in your html page <head> section (usually this will be the "style.css").

You don't need to add the "@import" code to each .css file. The .css files can use common import rules across multiple css files, but be sure to add the font "call" to the first css file listed in your HTML page head section.



Related Topics:
Changing Google Fonts
Adding New Font Styles