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?

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.

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.