Community @ The Turning Gate

Support community for TTG plugins and products.


The Turning Gate's Community has moved to a new home, at

This forum is now closed, and exists here as a read-only archive.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

#1 2016-05-10 08:25:51

From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,795

Using Google Fonts

With Backlight, using Google's web fonts on your site is easy.

First thing, head over to Google Fonts. Exploring what's on offer, it may be tempting to simply press the "Add to Collection" button, but click the font instead to view its available styles. You'll be able to add the individual styles to your collection, and bespoke styles are always nicer than letting the browser fake bold and italics.

In choosing font-weight, remember that 400 is considered normal, and 700 is considered bold. When choosing fonts for headlines, people often default to bold faces, but headlines needn't always be bold; they're large, and some fonts look quite nice when you go lighter.

Whatever style you choose for headlines, consider whether you ever expect to write headlines using italics. If you doubt so, then skip the italic face and save yourself the overhead.

Recently, I quite like Lato. I use Lato 400 for my main text, so I check out "Normal 400" and "Normal 400 Italic". For bold, I use the standard 700 weight, so I also check out "Bold 700" and "Bold 700 Italic". Finally, for headlines I'm going thin, so I check out "Light 300"; I don't plan on using italics in my headlines ever, so I leave the italic style behind.

All set with my choices, I go to Collection at the bottom of the screen and click "Use". Under section 3, there are some tabs, one of which is "Standard" -- that's the one we want. You'll get a line of code that looks like this:

<link href=',400italic,700,700italic,300' rel='stylesheet' type='text/css'>

Copy it.

Back in Backlight, under Designer => Templates, choose the Page Template you want to edit and click "Design". Then, at the top of the Typography control group, paste your code into "Google Fonts Statement (optional)".

Finally, wherever you see a field labeled "Prepend Font-family w/", you can write-in your font name to use it. For my example, our settings look like this:

Google Fonts Statement (optional)
<link href=',400italic,700,700italic,300' rel='stylesheet' type='text/css'>

Prepend Font-family w/


The Turning Gate,


#2 2020-05-12 06:37:20

rod barbee
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830

Re: Using Google Fonts

The Google Fonts site has changed a bit. To use Matt's instructions above, click on the "Return to Classic Site" link at the top of the page.
If you see a "Check out the new Google Fonts" link instead, you're on the classic site

Just a user with way too much time on his hands., Backlight 2/3 test site


Board footer

Powered by FluxBB