How to Minify the Google font CSS

Question

I have the following Google font CSS files:

Not Minified CSS Files:

https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i,700
https://fonts.googleapis.com/css?family=Raleway:400,400i,500,600,600i,700,800

How can I minify them?

Achieve

Answer 1

You can't, because those CSS files are served from google, not from your own domain (nor can they be according to google fonts ToS).

Really want to save your users' bandwidth/ms: use a single HTTP request:

https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i,700|Raleway:400,400i,500,600,600i,700,800

Really really want to save your users' bandwidth? Use less font variations.

If you try to serve the file yourself, there's no guarantee that google will keep the font files at the URLs specified in the CSS files you have downloaded:

https://fonts.gstatic.com/s/raleway/v11/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuAc.woff2

Doesn't look like a reliably stable URL to me.

Ayana

Answer 2

What I usually do is to copy only the fonts that I will use, say my website only needs latin characters, and font weight of 400 and 600 then I will copy something like this:

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v14/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

and after that, you can minify it with your other CSS.

Trunnel

Answer 3

11 2022

It's been 5yrs since this question was asked.
If anyone looking for a clearer solution then here it is.

Addressing OP question

fonts are relatively smaller files. since you did not specify the reason why you want to minify, I will assume it is for performance.

Google doesn't say anywhere about minification officially as of today. They are known for performance crushers and if they ask you to use the font from their API then there is good reason for it and you shouldn't stress about it.

Avoid Multiple requests

You can combine multiple fonts into one API request. Use the family= parameter. This will reduce the HTTP request.

https://fonts.googleapis.com/css2
?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,600&family=PT+Serif:wght@700
&family=Raleway:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap

Use Preconnect

If you are using fonts from the Google server then you can use preconnect which will cut off the Initial connection and SSL lookup time.

Before

After

Reduce the styles

Bold and ExtraBol has slight variation, if you are using that on a body text then you can keep only one style.

If you are using the style on an h1 then use text= parameter.

Have you heard about text= parameter?

you should consider specifying a text= value in your font request URL. This allows Google Fonts to return a font file that's optimized for your request. In some cases, this can reduce the size of the font file by up to 90%.

To use this feature, simply add text= to your API request. For example, if you're only using Inconsolata for the title of your blog, you can put the title itself as the value of text=. Here’s what the request would look like:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

Calling locally

If you are not changing the family often (why would anyone wants to do that), you can download the CSS from the original link and minify it manually.

Conclusion

There are a lot of benefits of using the font using googleapi. One of them is browser compatibility.

Read more
https://web.dev/reduce-webfont-size/#consider-a-variable-font https://developers.google.com/fonts/docs/css2#multiple_families https://developers.google.com/fonts/docs/css2#optimizing_your_font_requests

Schlueter

Answer 4

According to this online post here (https://discourse.roots.io/t/best-way-to-use-google-fonts/455/2) you cannot load the fonts minified directly from the good servers. However, you could minify the code yourself, either manually or a website such as https://cssminifier.com/.

Hope this answers your question.

Lachance

Answer 5

Obviously, you cannot minify the code being hosted by google. You can use CSS Minifier . Minify the CSS code and then use as a static css file. However, This font-file is not that big, I don't think you need it to be minified. Google says here, that its loading time is fast.

Ninepins

and then when google changes it's URL for raleway from https://fonts.gstatic.com/s/raleway/v11/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuAc.woff2 to https://fonts.gstatic.com/s/raleway/v11/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuYc.woff2, then your design breaks... – Ayana

Why not just serve it yourself as a static file and a CDN? – Raina