I am experiencing relatively slow load times. One of the errors that comes up is my font. I use the Montserrat font. Is there a way that I can only select the font variants I use, instead of the whole Montserrat package?
Thanks in advance!
Are you using a Google fonts link directly, or Shopify's font_face filter to load your font? Google fonts allows for precise configuration of what font weights and styles you load, you can even specify the exact glyphs you want to load the font for. Font_face on the other hand loads the bare mininum of files by default, and you can add more font weights and styles.
Thank you for your response!
I am just using the font library and selector that is build into the shopify theme editor. So that would mean, it already loads only the minimum files?
It depends on the how the code is set up. As I understand it, the font face loads the bare mininum, but you can load more variants of a font. So if the code is set up to load every possible variant of a font, then that would be quite a bit.
As I understand, from my research , most browsers(not IE, IE sucks ) will not download a font file just becuase it's in a font-face declaration, instead browsers will wait till they see that font applied later in the css. So if you see alot of fonts being loaded, your page is probably using them, and should keep that in mind if removing variants.
Are you using a page speed measurement tool that's giving the suggestion about your fonts? If so what does the message say?
I used Google Pagespeed insights, and i told me 'remove sources that block render' with the following link to it: https://cdn.shopify.com/s/files/1/0359/1913/4858/t/2/assets/theme.scss.css?v=9496925224601754335. I assumed the problem was that it loaded way too much versions of the font, but I am not so sure anymore. I don't know if you need it, but my website url is www.moteevatedapparel.com. Maybe that will give you some extra information.
Really appreciate your help!
That is not an issue with your font, but your theme's style sheet being render blocking.
You can set up sophisticated methods for creating critical css and making css non render blocking, or you can go with a more straight forward approach of creating critical css for each template using a critical css generator you can find online and using conditional logic.
I give an example of how I do that in this thread, if it helps.