Archived topic
Difference in font display between GP and 'manual' import of Google font.
6 replies · Started by Daniel on February 24, 2021
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?
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
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.
I wonder if the answer might have something to do with this:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
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
Finally got a chance to check. Those aliasing/font-smoothing rules were exactly the reason for the discrepancies in what I was seeing.
Nice one. Glad you found it. :D
