- This topic has 10 replies, 4 voices, and was last updated 1 week ago by vast.
November 22, 2020 at 11:50 am #1541415vast
Does the GP team have a list of fonts that result in layout shifts?
It seems when using fonts such as Pacifico in the header/site title for example (at any size), the navigation shifts when the font loads.November 22, 2020 at 8:28 pm #1541733LeoStaffCustomer SupportNovember 22, 2020 at 8:47 pm #1541750vast
The site is for internal use so it’ll be a real challenge in making it externally accessible. Is there a site you can test with?November 23, 2020 at 4:26 am #1542110DavidStaffCustomer Support
the variables affecting font ‘size’ are many, such as their base width, kerning and x-height. These will vary from one font family to another.
Although they’re fonts that have similar anatomies, the issue you will have is selecting a font that matches the fallback font that the browser is using, which will vary from device to device.
So unfortunately there is no simple list.
Aside of using the System Stack fonts, the only way to avoid the shift is by preloading the font. See here for more info:November 23, 2020 at 9:48 am #1542740vast
Thanks David. The fonts are already preloaded and although it reduces the shift, it still occurs on devices that are reliant on slow connections.
Do you have any suggestions on sources that may suggest matching fonts that are closest to system fonts?November 23, 2020 at 12:19 pm #1542977DavidStaffCustomer Support
I cannot find a resource for the System Stack fonts, which is a pity, as there is this great app that provides them for the main Google Fonts:November 23, 2020 at 12:33 pm #1542999vast
Thanks David. That’s a great starting point. Is there a list of similar tools/sites that the GeneratePress team uses?November 23, 2020 at 1:04 pm #1543038Elvin Customer Support
Thanks David. That’s a great starting point. Is there a list of similar tools/sites that the GeneratePress team uses?
My 2 cents:
While I don’t exactly use any tool for this, when I need similar fonts for fallback, I usually get a clean screenshot image of a sample of the typeface and then scour font finder sites for any match.
I then make a shortlist of candidate fonts which I measure in Adobe Illustrator. When picking, I measure the length from cap height to the descender of the typeface.
But then again, this is pretty tedious and is coming from a Graphics Designer perspective. But this helps A LOT in sites of companies with very meticulous Branding Guideline.
David’s link works great though. It should be good enough of a basis if you only need to address the layout shift.
A wise man once said:
"Have you cleared your cache?"November 23, 2020 at 1:42 pm #1543068vast
Thanks for the tip Elvin.November 24, 2020 at 11:36 am #1544972Elvin Customer Support
Thanks for the tip Elvin.
No problem. 🙂
A wise man once said:
"Have you cleared your cache?"November 24, 2020 at 12:19 pm #1545017vast
David, Elvin, thanks for the input. We’ll close this thread for now.
- You must be logged in to reply to this topic.