0

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?

user1283776
  • 19,640
  • 49
  • 136
  • 276
  • 1
    Possible duplicate of [What is the status of TTF support in Internet Explorer?](http://stackoverflow.com/questions/17694143/what-is-the-status-of-ttf-support-in-internet-explorer) – Vucko Jul 07 '16 at 12:16

1 Answers1

2

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.

mch
  • 1,259
  • 15
  • 23