Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2016-05-09 22:14:40

mblanchette1
Member
From: Bedford, NH
Registered: 2012-10-15
Posts: 110
Website

Google fonts

Is there any info on the new @import option under the Typography tab in Backlight Standard Page template? I use Google fonts and tried to include one to no avail. I verified that my CSS is linked and working, so it seems as if the font is never loaded.

I entered statement in Typography: @import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC);
And then added this code to my CSS file to change the font of menu items:

   li.menu-item a {
      font-family: 'Alegreya Sans SC', sans-serif;
   }

I can change other attributes of the menu items (such as size) but the font never changes. Am I missing a step?

My test site is here: http://www.mabtesting.dreamhosters.com

Last edited by mblanchette1 (2016-05-10 00:20:47)

Offline

#2 2016-05-10 00:45:04

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,604
Website

Re: Google fonts

It's a two-step process, and does not require custom CSS.

1. Get the @import statement from Google Web Fonts, and paste it into the designated field in the Typography control group.

2. In any area where you a) want to use the font, and b) have access to font-family options, you will see an input field labeled "Prepend Font-family w/". Just put the name of the font in there.

Example:

Lately, I use the Lato font. So I do this:

Google Fonts @import Statement (optional)
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,400italic,300,300italic);

Prepend Font-family w/
Lato

Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#3 2016-05-10 00:47:25

Pfredd
Member
Registered: 2014-04-16
Posts: 187

Re: Google fonts

Wow, that's slick Matt.

Thanks for the feature!

Offline

#4 2016-05-10 08:05:38

mblanchette1
Member
From: Bedford, NH
Registered: 2012-10-15
Posts: 110
Website

Re: Google fonts

Still having a lot of trouble with Google Fonts. Even if I enter the exact code in the example given above, I get no results. I also ran inspector and it reports three font errors every time a page loads (with no Google fonts in the picture). It complains about error 404 on the server, "Failed to load resource". The errors seem to be generated in trying to load the fontawesome fonts. Maybe that's why I'm not getting results.

And a related question: what do you use in the Font Family dropdown when specitying a Google Font? Do you pick the blank family in the middle of the drop-down? I've been playing with Google fonts for several hours and can get no predictable results.

Last edited by mblanchette1 (2016-05-10 08:08:24)

Offline

#5 2016-05-10 08:34:00

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,604
Website

Re: Google fonts

There's some weirdness going on with Font Awesome, with browsers sometimes throwing an error on the default Font Awesome CSS, even though we provide updated locations for those files further in the code. This didn't occur in our testing, but has shown up on some deployed sites. In the upcoming 1.0.1 update, I've reworked how Font Awesome inclusions are made, which should address those errors.

That said, I'm not sure why it would interfere with Google Fonts loading.

For font-family, just select your favorite fallback. You will probably never see it in use, as the idea behind Google Fonts is that they are always available, but it's good practice anyway. Whatever you write into "Prepend Font-family w/" will be added to the front of the font-family list, taking priority.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#6 2016-05-10 21:13:38

mblanchette1
Member
From: Bedford, NH
Registered: 2012-10-15
Posts: 110
Website

Re: Google fonts

One more question about Google Fonts. Many of the Google font names involve multiple words like "Alegreya SC Regular". How should we enter those family names under Prepend Font-family w/? In other contexts, I've seen the Google Font names enclosed in single quotes, double quotes, or with a + to fill in for the spaces. Or do we enter them as is with the spaces? I can't seem to get any of the scenarios to work.

Offline

#7 2016-05-11 01:45:27

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,604
Website

Re: Google fonts

Using standard CSS syntax, so:

"Font Name", fontName


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#8 2016-05-11 03:24:07

mblanchette1
Member
From: Bedford, NH
Registered: 2012-10-15
Posts: 110
Website

Re: Google fonts

Thanks. By the way, in looking at the code in Inspector, I can see that the Font Family is appropriately assigned (ex. Lato) but it seems that the Google Fonts are never loaded, so they always default to the next font family in line. On the surface, it looks like the @import statement is never processed. I've verified (several times) that I'm using a perfectly correct @import.

Last edited by mblanchette1 (2016-05-11 03:25:11)

Offline

#9 2016-05-11 04:40:46

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,733
Website

Re: Google fonts

Hmm. They're loading for me. But I'm also testing the update version. Wait and see how it works for you when Matt and Ben release 1.0.1


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#10 2016-05-12 01:30:40

mblanchette1
Member
From: Bedford, NH
Registered: 2012-10-15
Posts: 110
Website

Re: Google fonts

I tried it again after the update and still not able to load Google Fonts for some reason. I'm stumped as to why. Even using the exact syntax in Matt's post yields no result. Something weird is going on with my configuration. I've tried it on two different browsers for kicks and get the same results (or lack of). As a workaround, are we still able to link the fonts from phplugins and assign them in a custom CSS? In the past, we loaded the fonts in function ttg_head_end but that seems to have gone away in Backlight. Is there another function that would allow me to do the equivalent loads?

Offline

#11 2016-05-12 03:14:36

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,733
Website

Re: Google fonts

The latest update has two new hooks, ttg_head and ttg_scripts. They're detailed in the new phplugins files in the update.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#12 2016-05-12 07:15:56

mblanchette1
Member
From: Bedford, NH
Registered: 2012-10-15
Posts: 110
Website

Re: Google fonts

OK, here's the latest on the Google Fonts saga. I used the ttg_head hook (added to Backlight 1.01) in phplugins to explicity link the Google Fonts and that works fine as a fallback. Then I'm able to assign the family names in Backlight using Prepend Font Family w/. This seems to suggest that the @import statements are not being processed on my configuration for some reason.

Be aware that if you copy the Google Fonts "link" statement directly from their website, you need to replace all single quotes with double quotes, else phplugins returns a fatal error on load.

Last edited by mblanchette1 (2016-05-12 07:35:54)

Offline

#13 2016-05-12 08:29:41

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,604
Website

Re: Google fonts

This is a weird issue. I've not had any problems with the current implementation on my development server, but I tried using Google Fonts on my personal site last evening and encountered just this problem. I also found that using the <link> method via PHPlugins was successful. I will probably change our implementation to do that, rather than use the @import in CSS, in the next version.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#14 2016-05-12 09:09:23

mblanchette1
Member
From: Bedford, NH
Registered: 2012-10-15
Posts: 110
Website

Re: Google fonts

I'm glad it's not just me. I was beginning to think I had a corrupt installation.

Offline

Board footer

Powered by FluxBB