CODEWITHSUNDEEP
csssass
user1283776
user1283776

Reputation: 21784

@font-face is not working on IE 11. @import is not working well in Chrome. Why?

I'm trying to get Titillium-Wen, a Google Font, to work on all broswers. I prefer to self-host the font files.

The following code works well on Edge, Safari and Chrome, but not on IE 11. Text is displayed in a backup font as if IE 11 can not find the font:

@font-face {
  font-family: 'Titillium Web';
  src: url('/fonts/titillium/TitilliumWeb-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Titillium Web';
  src: url('/fonts/titillium/TitilliumWeb-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Titillium Web';
  src: url('/fonts/titillium/TitilliumWeb-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Titillium Web';
  src: url('/fonts/titillium/TitilliumWeb-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

The code below works on IE 11 but does not provide bold and italic fonts in Chrome. And anyway, I prefer to host the fonts myself:

@import url(https://fonts.googleapis.com/css?family=Titillium+Web);

Can I get the @font-face code to work on IE 11?

Upvotes: 0

Views: 1114

Answers (1)

mch
mch

Reputation: 1279

Try to use different font formats, as not all browsers support TTF.

@font-face{
    font-family:'My Font';
    src:url('../fonts/myfont.woff2') format('woff2'),
        url('../fonts/myfont.woff') format('woff'),
        url('../fonts/myfont.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

There are web services that will convert the font to different file formats for you. As far as I am concerned, using WOFF2, WOFF and TT covers all the browser versions I need to support.

Upvotes: 2

Related Questions