I have spent hours trying to get a Google font to work in my Sage + Bootstrap starter theme and read multiple posts on this forum(including one similarly titled from 2017 but I am still at a loss. Hoping someone can help me. I did the following to use Roboto in my theme: Downloaded different Robo…

Hey @James_Lanman , Where do you copy font files?

It is also recommended to add special prefetching for the Google fonts to improve performance: [image] Prefetch/preload resources sage Adding prefetch/preconnect to resources can sometimes significantly increase performance, see: https://developer.wordpress.org/reference/…

Hi Dan. I copied the font files into: Resources > Assets > Fonts [here] I wanted to post the error log but I’m only allowed a certain number of links as a new poster so all of the localhost links in the error log count against that. I expected ‘Yarn Build’ to at least create a fonts folder under …

Hey Strarsis. Thank you. Are you saying I shouldn’t go the ‘local link’ route to files I’m using and instead combine wp_resource_hints with a link to the google hosted version of these fonts? Is there a singular recommended way to do this? Sorry, I’m new to Sage but I feel like I’m going a little cr…

Locally hosted fonts can also improve performance of course. It depends. So you planned to host the Google font files yourself? This is easy as all browsers support WOFF/WOFF2 now.

I was planning on hosting them myself. But as someone who has learned web development the autodidact route I always have a sneaking suspicion that I’m not doing something “best practice” so like to get guidance from those who know more. I think a lot of folks out there have holes in the basics for s…

laravel-mix which Sage 10 uses and that generates a webpack configuration process URLs by default: https://laravel.com/docs/8.x/mix#url-processing However, in Sage 10 this is disabled because of performance reasons and because it isn’t used as often: roots/sage/blob/master/webpack.mix.js#L…

That’s good to know! Any idea why ‘yarn build’ still isn’t creating a ‘fonts’ folder? I just checked and looks like I’m on a 9.0.10 version of Sage and not version 10. Sorry about that. Could have sworn I updated. I’m assuming this is an issue with the version i’m using, right?

If you’re using Sage 9, it doesn’t use mix so the above code isn’t relevant to you. Sage 9 uses a webpack build process that will only compile assets that are used–i.e. they are referenced somewhere. From your description, you’ve only set up some font-face rules–you never actually reference those f…

Thanks alwaysblank and again, apologies for the version mixup. I am currently referencing font-family in my main.scss file like so: body { background: transparent; font-family: "Roboto", sans-serif; } and importing the whole of fonts.scss (which I created under ‘resources’ containing this: /…

Proper Way To Add Fonts To Sage 9 Theme

sage

strarsis November 1, 2021, 1:50pm 3

It is also recommended to add special prefetching for the Google fonts to improve performance: