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
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
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/
LatoOffline
Wow, that's slick Matt.
Thanks for the feature!
Offline
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
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.
Offline
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
Using standard CSS syntax, so:
"Font Name", fontName
Offline
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
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/3 test site
Offline
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
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/3 test site
Offline
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
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.
Offline
I'm glad it's not just me. I was beginning to think I had a corrupt installation.
Offline
Pages: 1