[Resolved] Difference in font display between GP and ‘manual’ import of Google font.

Home Forums Support [Resolved] Difference in font display between GP and ‘manual’ import of Google font.

Home Forums Support Difference in font display between GP and ‘manual’ import of Google font.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1671432
    Daniel

    I’m having trouble figuring out why a particular font displays differently when using GP’s typography feature than when I import from Google outside the GP framework.

    All CSS settings being equal as far as I can tell, size, weight, etc. the font displays somewhat thinner using GP (it looks better) than if I import it from Google in a hand-coded document.

    Actually, now that I look at the original in the Google fonts interface, the example matches the shorter squatter looking version I’m getting as opposed to the somewhat leaner looking version that GP displays.

    Is GeneratePress doing something to the display that I am not able to track down?

    #1671454
    Elvin
    Staff
    Customer Support

    Hi there,

    I’m not sure I see what you mean.

    GP’s Typography on customizer simply requests font import(@font-face) CSS from Google servers. Here’s an actual example of a requested link – https://fonts.googleapis.com/css?family=Didact+Gothic:regular – found here: https://share.getcloudapp.com/llu9gmo8

    Which isn’t exactly different with the recommended way to import a google font (hosted locally)
    https://docs.generatepress.com/article/adding-local-fonts/#using-font-face

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

    #1671538
    Daniel

    Thanks for your reply Elvin.

    I don’t think the issue is with the import. The correct font is being displayed. It just looks different on a site using GP than it does on say a hand coded page.

    So I’m wondering if there is something about GPs default CSS settings that might be causing the same font to render differently in those scenarios.

    I don’t know if it would matter but I’m trying to target “Bree Serif”, a face that does not include any variants.

    #1671539
    Daniel

    I wonder if the answer might have something to do with this:

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    #1671600
    Elvin
    Staff
    Customer Support

    Ah yes that may be it. That’s included within the main.css/main.min.css but it’s not always effective (only for mac, doesn’t work on windows or android).
    https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

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

    #1672745
    Daniel

    Finally got a chance to check. Those aliasing/font-smoothing rules were exactly the reason for the discrepancies in what I was seeing.

    #1672987
    Elvin
    Staff
    Customer Support

    Nice one. Glad you found it. 😀

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

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