Why are the woof2 file sizes different from Google Fonts?

[7Ds7]

Hello and first of all thanks for your efforts on this great service.

I have a question though, why are the fonts file size different from Google Fonts.

Example, given the Open Sans Font from the following url https://fonts.googleapis.com/css2?family=Open+Sans&display=swap

And the latin flavour https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2

The file size is of ~9Kb

As opposed if we download the font from google-fonts-helper with the same flavour

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

The file size for the same flavour and format open-sans-v17-latin-regular.woff2 is ~14Kb

I wonder why that happens? Should't the fonts be the same?

Best regards

[nextgenthemes]

@7Ds7 I created a download tool in PHP that works on the server and as a CLI script. It supports display=swap. See nextgenthemes.com/google-webfont-downloader/

It downloads the exact files (woff2 only) that Google serves in its modern display=swap CSS files. There will be no file size difference.

[7Ds7]

@nextgenthemes Funny enough i did exactly the same thing to use as a personal tool when i saw no activity on this issue a couple of months back also using php and quite a bit of regexes on the original css file, been using it ever since and so far working flawlessly :) https://labs.binaryunit.com/localgfonts/

Although I have only been using it for modern formats only (woof2) it can also work for other formats, as long as you override the user agent checkbox it should give you the files that Gfonts provides that user agent with.

[nextgenthemes]

@7Ds7 Interesting. Shame that all the searches still show up this unmaintained tool. There is this basic ask to ship the .css since 2016 #14 ... not sure how much sense it made back then to reinvent the wheel and create a 3rd party UI but it for sure does not make sense now.

It's called woff2 not woof2 btw ;) I do not think people should care about anything else. Browser support is 94.93% https://caniuse.com/#search=woff2. Those few cases of hopelessly outdated or super rare browsers probably have other things to deal with, no need to make them download some "big" font files.

[7Ds7]

@7Ds7 Interesting. Shame that all the searches still show up this unmaintained tool. There is this basic ask to ship the .css since 2016 #14 ... not sure how much sense it made back then to reinvent the wheel and create a 3rd party UI but it for sure does not make sense now.

Indeed, it is a pity because this tool is really nice. I still have not understood why the font size is different though, maybe the font repo which this tool uses is based on a old version. That is part of the reason that i decided to scrape the original css provided by google and download the fonts from there instead of relying on https://github.com/google/fonts repository

It's called woff2 not woof2 btw ;) I do not think people should care about anything else. Browser support is 94.93% https://caniuse.com/#search=woff2. Those few cases of hopelessly outdated or super rare browsers probably have other things to deal with, no need to make them download some "big" font files.

Yes woff that is what i meant, eternal typo :D and the "super rare browsers" are of course IE and safari <= El Captain

[7Ds7]

One year after i came across this post provided some enlightenment regarding the file size.

It turns out that google fonts serves hinted fonts for Windows based systems and this fonts are a bit bigger, google-webfonts-helper seems to be serving this flavor instead which makes sense as it is the most "complete" font.

[nextgenthemes]

@7Ds7 Can you be more specific?

made the decision to only support WOFF2, and also use the MacOS versions without hinting since they were half the size.

I not read the entire post just this. I said in my own comment that the file size will not differ in the display=swap css files google served even back then in modern browsers. But I honestly do not know how I would back my own claim up because I do not recall actually testing or researching this. You say "a bit bigger". They said "half the size". Seems like you talk about different things here.

Will they serve different .woff2 files based on user agent? If so how much bigger are the file and is it bad to serve those "hinted" files to Linux/Mac/Mobile users?

I am collecting all the woff files at https://github.com/nextgenthemes/open-webfonts/ and I use a user agent that is Windows I think. Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

The Google people link to an NPM project now (not this anymore) that can be used to serve the fonts locally, but I have not looked up how they do it.

[7Ds7]

@nextgenthemes Maybe you should read the complete post to have a better insight, but in the end is your decision on which flavour you are serving your users if you choose to self host the font. I think display=swap has nothing to do with the binary font file and file size differs from each font. I decided to just add options in all the available flavours and let the user decide

Will they serve different .woff2 files based on user agent?

Yes

If so how much bigger are the file and is it bad to serve those "hinted" files to Linux/Mac/Mobile users?

Downside of serving those files to non Windows users is payload size

I am using Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36 Edg/88.0.705.74 as a user agent for hinted fonts

The Google people link to an NPM project now (not this anymore) that can be used to serve the fonts locally, but I have not looked up how they do it.

What google people? what npm project?

[nextgenthemes]

@7Ds7 What I meant is https://github.com/fontsource/fontsource that is the only project that is linked in the readme off the official google/fonts repo. They do not link to this anymore. I do not sure if the way this extracts the fonts give you the latest versions, but it does not give you the modern display=swap CSS that lets the browser pick the right file. Back then it was not like that. With this project you have to choose what fonts to serve beforehand, and it gives you a combined font with characters the user may never need of you to choose more characters sets. Some fonts are now split up in like ~100 different files so it would very well be that they serve completely different fonts since display=swap appeared in their css.

I just tested it, and they indeed serve completely different files that are slightly smaller when using a mac user agent. But if there is no downside other than the little big bigger size I guess fontsource will also just use the windows fonts as well. Never looked closely at it.

All the other formats are also totally irrelevant nowadays and the few users who run on such outdated browsers that can not use woff2 should probably not be served any fonts anyway. So this project should really die. Gotten way too much attention for the fact that is not maintained and outdated. I am glad it's no longer linked in the google/fonts repo.