Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Font layout shfit

Home Forums Support Font layout shfit

  • This topic has 10 replies, 4 voices, and was last updated 1 week ago by vast.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1541415
    vast

    Hi there,

    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.

    #1541733
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know ๐Ÿ™‚

    #1541750
    vast

    Hi Leo,

    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?

    #1542110
    David
    Staff
    Customer Support

    Hi there,

    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:

    https://web.dev/preload-optional-fonts/

    #1542740
    vast

    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?

    #1542977
    David
    Staff
    Customer 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:

    https://useratio.com/the-anatomy-of-a-thousand-typefaces/app/

    #1542999
    vast

    Thanks David. That’s a great starting point. Is there a list of similar tools/sites that the GeneratePress team uses?

    #1543038
    Elvin
    Customer Support

    Hi,

    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?"

    #1543068
    vast

    Thanks for the tip Elvin.

    #1544972
    Elvin
    Customer Support

    Thanks for the tip Elvin.

    No problem. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1545017
    vast

    David, Elvin, thanks for the input. We’ll close this thread for now.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.