Using Google Fonts

Prev | Next

Theme Designers can incorporate Google Fonts as part of their design easily by including the font names within the AdminForm definition file. (This feature requires minimum Web Store 3.1)

For example, if we have a theme called Seattle, we open /themes/seattle/models/seattleAdminForm.php file and see

class seattleAdminForm extends ThemeForm
{
	 /*
	 * Information keys that are used for display in Admin Panel
	 * and other functionality.
	 *
	 * These can all be accessed by Yii::app()->theme->info->keyname
	 *
	 * for example: echo Yii::app()->theme->info->version
	 */

	protected $name = "Seattle";
	protected $thumbnail = "seattle.png";
	protected $version = 3;
	protected $description = "Sample theme";
	protected $credit = "Designed by LightSpeed";
	protected $parent; //Used when a theme is a copy of another theme to control inheritance
	protected $bootstrap = null;
	protected $viewset = "cities";
	protected $cssfiles = "base,style";

And you can add a line there for Google Fonts. For example, to load the Tangerine font, use

protected $GoogleFonts = "Tangerine";

To load multiple fonts, separate them with the | character, such as

protected $GoogleFonts = "Tangerine|Inconsolata|Droid+Sans";

These are then available in your CSS. You don’t have to add any manual code to any of the theme files, it loads the fonts automatically.

To use the fonts in your CSS, simply use the name as you would any system font.

body { font-family: Tangerine; }

Previous | Next