Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
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='https://fonts.googleapis.com/css?family=Lato:400,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='https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,300' rel='stylesheet' type='text/css'>
Prepend Font-family w/
LatoOffline
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
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Pages: 1