Chrome Not Picking Up @Font-Face Otf

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

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 class="logo">

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.

Font Face is not working except on Chrome

Try having to format as opentype. Your using an Open Type font so you need to specify which format to use.

@font-face{
    font-family: 'Lufga';
    src: url("../styles/Lufga-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}

Font-Face is not working with Chrome

Just a little syntax change. This will work for you:

@font-face {
    font-family: 'headline';
    src: url('../fonts/headline.eot');
    src: url('../fonts/headline.eot?#iefix') format('embedded-opentype'),
         url('../fonts/headline.woff') format('woff'),
         url('../fonts/headline.ttf') format('truetype'),
         url('../fonts/headline.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face not working on Chrome or Safari

Try it without the single quotes:

 @font-face{
    font-family: playtime;
    src: url('../fonts/font-1.otf') format('opentype');
    }
    p.playtime-font {
    font-family: playtime;
    font-size: 3em;
}

If this doesn't work, is your console saying anything?

---

Related Topics