Using Google Fonts in Backlight -new way

Backlight 4, 5 & 6 Support
#21

I’ve been using Firefox and can’t see the font being applied. Just tried using Chrome, and it works there as well as in Edge and Opera. Not in Firefox or Brave though.

#22

Firefox is my default browser. Safari on the iPhone8 IOS16 does not display it.
I’ll have to check on the other machines that don’t have raleway installed locally.

#23

Firefox,Safari and Chrome do not display Raleway on Monterey 12.6.2 on my newly rebuilt iMac, and Firefox on the iPhone8 does not display raleway either.
I’ll check my Linux machines later.

#24

@Matthew
In Firefox’s web console under the Network tab, I’m seeing this error:

downloadable font: no supported format found (font-family: “Raleway” style:normal weight:400 stretch:100 src index:2) source: (end of source list)

#25

Hi Tom,

The path to your font file should be absolute and not relative.

    font-family: 'Raleway';
    font-style: normal;
    src: local('Raleway-VariableFont_wght'),
        url('/backlight/custom/webfonts/Raleway-VariableFont_wght.ttf') format('ttf');
}```
#26

Hi Daniel,
I’ve tried that but with no success. Should the full path be in there from html_public?
Thanks
TomO

#27

I see @font-face declaration doesn’t follow the fontspring bulletproof syntax on the src line.

#28

I’ve tried both the absolute url (/backlight/custom/webfonts/Raleway-VariableFont_wght.ttf) as well as the full url: https://…
Neither are working for me in Firefox.

Wondering if Firefox, Brave, and maybe some others, require .woff fonts?

#29

I’ve tried visiting the site in Linux Mint 20, Firefox, MacOS Monterey 12.6.2, Ventura 13.1, Windows 10 through Parallels all with the same result of fallback Tahoma. The only machine displaying Raleway is the Ventura laptop as the variable font was installed onm that machine.
I wondered about woff format myself.
The weird thing is that the Google API works but obviously I have no idea what they are squirting out and going forward I need to resolve the issue despite Brexit!
Thanks for the input. I’m sure we will get to the bottom of it.
TomO

#30

Hm. Maybe try converting the font files:

Assuming you have fonts in multiple formats, the CSS would look like this:

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  src: local('Raleway-VariableFont_wght'),
      url('../webfonts/Raleway-VariableFont_wght.ttf') format('truetype'),
      url('../webfonts/Raleway-VariableFont_wght.woff') format('woff');
}

Apparently, Google Fonts delivers the font in whatever appropriate format. Would be nice if they made those alternate formats easy to download, though.

There’s also these:

EDIT: Changed ttf to truetype in the code snippet, in light of fix below.

#31

For much more information, there’s also these pages on MDN:

And here’s a page that covers browser support for various font formats.

#32

On further testing, I’m now also having issues with Firefox and Safari, though all documentation indicates things should just work. I’ll try to spend more time on this this week.

#33

Ugh. Well, that just about made my bonkers. The fix is to use “truetype” instead of “ttf” for format. That’s my bad. I’ll update the article.

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  src: url('../webfonts/Raleway-VariableFont_wght.ttf') format('truetype');
}
2 Likes
#34

Many thanks @Matthew . That sorted all bar my Wordpress page. At the moment I cannot see where the difference is as the optional google fonts is cleared.
I just need to revisit weights in my templates now but that is a massive step forward.
Season’s greeting to you @Ben @rod_barbee Rod and @Daniel
TomO

2 Likes
#35

Now sorted thanks.
I had to convert ttf to woff for the WordPress page to display properly so two variable font files have been uploaded and css looks like this
@font-face {
font-family: ‘Raleway’;
font-style: normal;
src: local(‘Raleway-VariableFont_wght’),
url(’…/webfonts/Raleway-VariableFont_wght.ttf’) format(‘truetype’),
url(’…/webfonts/Raleway-VariableFont_wght.woff’) format(‘woff’);
}
.font-raleway {
font-family: Raleway, sans-serif;
}
I’ll see if I can convert to woff2 and upload a variable font for that format.
Many thanks for all the help as always.
TomO

#36

Strange the WordPress plugin would require that, where it’s fine elsewhere. May be the way they’re putting their code together …

For the utility font, I also updated the snippet to:

html .font-raleway {
  font-family: Raleway, sans-serif;
}

Better for taking specificity, especially in Kookaburra.

1 Like
#37

Thanks Matt.
I’ll update my css.
I now have ttf, woff and woff2 catererd for in the variable font. All seems to be OK after extensive testing this afternoon and adjusting weights.
Interestingly, when I selected 400 instead of the 700 for the title on the page template for the blog and saved it no change would take place. I had to set 100 then the change took place and I was able to step back up to 400 if that makes sense but there was no way I could descend to 400.
Anyway all done and I’m extremely grateful that I’m hosting the font locally with a low payload.
TomO

#38

Funny. That sounds like a browser caching thing, re: the font-weights.

#39

I only flushed Backlight template cache. Never thought about browser cache as all the other pages refreshed in the blink of an eye.
I did that on a newly re-built iMac (built on Friday with a fresh install of MacOS - Monterey) so had assumed there would be no baggage.

#40

It didn’t for me. I just had to change ttf to truetype for the format

1 Like