Simple approach

In YJSG we have used very simple approach for implementing Google fonts .
This option will let you use all 600+ available font families in Google fonts library.

example:

Usage

Go to your template manager, tab name Style and activate following parameters:

• Use Element Tags font override set to Yes
• Element tag override type select Google font
• Google Font-Family leave as default or use this as example Mouse+Memoirs|cursive|normal
• In Affected Selectors textarea add the selectors that should use Google font-family defined above

Google font param explained

Google font param has 3 attributes that you can use and each of them needs to be separated by |:

example:

Mouse+Memoirs|cursive|normal

First attribute is the actual font name taken directly from Google font stylesheet link, family= ( including + ):

example:

http://fonts.googleapis.com/css?family=Mouse+Memoirs

Second attribute is general font-family like:

• sans
• sans-serif
• cursive
• fantasy
• monospace

Second attribute can be combined:

example:

Mouse+Memoirs|'Helvetica',arial|normal
Mouse+Memoirs|Helvetica,arial|normal

Third attribute is font-weight which you can define as:

• bold
• normal
• 500
• 700

example:

Mouse+Memoirs|cursive|normal
Mouse+Memoirs|cursive|bold
Mouse+Memoirs|cursive|700

Multiple fonts

For stylesheet with multiple fonts, use double equal sign between font names. Note that additional font will be included in Google stylesheet but you would need to add affected selectors for additional font inside one of the template CSS files.

example:

Rock+Salt==Open+Sans:400,500

in custom.css add :

h2.my_class{
font-family:Open Sans,sans-serif;
font-weight:300;
}