CSS - What is font squirrel webfont generator used for

Question

I thought that the font squirrel webfont generator was used to make a font compatible for all the browsers. But I tried the classic

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

and it works for all the latest versions of the browsers Google Chrome , Mozilla Firefox , Opera , Microsoft Edge and even Internet Explorer ... Is it used for older versions of the above? Thanks

Answer 1

The reason webfont generators continue to generate old fonts is because they follow the principle of "If it's not broken, why remove it?".

For example, EOT is is a font format that still occasionally shows up in font generators, despite being completely unnecessary in modern day. It supports Internet Explorer 6+.... and if you REALLY need to support a browser that's 20 years old, Font Squirrel can help with that.

...But in the modern day, you only need WOFF and WOFF2. The other font flavors are obsolete and unnecessary because all modern browsers can use .woff , and most can use .woff2 .

You can see compatibility here:

WOFF: https://caniuse.com/woff

WOFF2: https://caniuse.com/woff2

EOT: https://caniuse.com/eot

TTF/OTF: https://caniuse.com/ttf

Answer 2

As you said, the solution provided by Font Squirrel works great for all modern browsers.

However, if you need to target older versions I would recommend https://onlinefontconverter.com that generate a more complete @font-face css, also more font extensions are provided.

I use the following css when I need @font-face:

@font-face{
  font-family:"Rage Italic";
  src:url("../fonts/RageItalic.eot");
  src:local("RageItalic"), local("RageItalic"), url("../fonts/RageItalic.woff") format("woff"), url("../fonts/RageItalic.ttf") format("truetype"), url("../fonts/RageItalic.svg#RageItalic") format("svg"); 
  font-weight: normal;
  font-style: normal;
}