'How to specify return type format for google fonts?

I am trying to load fonts from google fonts with the following snippet

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i" rel="stylesheet">

It loads following css

/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: local('Montserrat Italic'), local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v10/-iqwlckIhsmvkx0N6rwPmv8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: local('Montserrat Italic'), local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v10/-iqwlckIhsmvkx0N6rwPmj0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

The problem is it returns woff2 font format. Is there any way to load woff or ttf formats instead of woff2? Because the woff2 is not rendering properly in older browsers.

cssgoogle-fonts


Solution 1:[1]

Google Fonts will do browser sniffing and attempt to serve up only the relevant font formats.

This means that the loaded CSS will be different depending on the browser that loads it.

They do support older browsers. In particular:

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+

Solution 2:[2]

As google doesn't help us to directly download fonts, I didn't find a way to do this, but you can check this github repo to help you :

https://github.com/google/fonts/

Solution 3:[3]

As pointed out above, google pre-determines which file types are needed and only serves those. They do so primarily via the requestor's User-Agent header.

Luckily, this header can be emulated in the dev tools so in case you need the .ttf resources, you can use a Blackberry or other similar, older device to obtain the actual font URLs:

enter image description here

Solution 4:[4]

If you are resigned to controlling specifically what format is to be used, one approach is to simply use your own stylesheet with the src changed out and/or sourcing the style declarations from the desired target.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Singularity-
Solution 3 Joe - Elasticsearch Handbook
Solution 4 Kevin Reilly

Related Questions