@font-face not working on chrome but works on other browsers-CodePudding

I want one simple thing...my font to work on chrome.

@font-face{
    font-family: "Iosevka";
    src: url("http://www.some_url/iosevka-regular.woff2") format(woff2),
         url('http://www.some_url/iosevka-regular.otf') format(opentype),
         url('http://www.some_url/iosevka-regular.ttf') format(truetype);
         url('http://www.some_url/iosevka-regular.eot) format(embedded-opentype);
}

This works on safari and firefox but not chrome. I am not exactly sure why

I have looked at several posts saying I need to add more font support so I have ttf, woff2, eot, and otf but this still doesn't work.

Does anyone know what is going on?

CodePudding user response：

Simplest supported loading of a font on the web today. Only need one font file and it needs to be used.

Two CSS rules and a HTML tag.

Microsoft was the holdout for TTF although they were part of building the TTF. All systems have the license to use TTF and caniuse reports all browsers supporting it.

Note this does not mean you can use anybodies licenced font. It means you can use TTF to display the font.

OTF is open license so no license is required and supported by all systems including Microsoft edge.

Not sure of the status of Woff and SVG is not supported by Chrome.

@font-face {
  font-family: "Logo";
  src: url("/fonts/logo.ttf"); /* or url("/fonts/logo.otf") */
  }
.logo {
  font-family: Logo;
  font-size: 80px;
  font-weight: normal;
  }

<h1 >

Browsers don't download the font until they need to use the font. But the font can be downloaded with Javascript if one does not like the normal behavior.

CodePudding user response：

Use a font web generator like fontsquirrel.com/fontface/generator it will provide everything you need in order to resolve this issue.