question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Why are the woof2 file sizes different from Google Fonts?

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8

github_iconTop GitHub Comments

1reaction
nextgenthemescommented, Jun 28, 2020

@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.

0reactions
nextgenthemescommented, Mar 5, 2021

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

File size – Fonts Knowledge
This is a core advantage of variable fonts: If we're using multiple weights and styles (i.e., more than the “usual” Regular, Italic, Bold,...
Read more >
Reducing the file size of Google Fonts for your website
Unfortunately, we can't compress woff or woff2 files down any further, as they both have built-in compression. But what if there are characters ......
Read more >
optimizing WOFF2 from google CDN by limiting glyphs, still ...
Am I just naive to think custom fonts should be low file size? Or is there a way to get this compressed more?...
Read more >
Reduce web font size
Since WOFF and WOFF 2.0 cover all bases for modern and legacy browsers still in use, use of EOT and TTF are no...
Read more >
How to Download and Optimize Google Fonts
Output the subsetted font files in woff2 format. Note that you may need to use a different character set; this depends on what...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found