0

I want to use "Antonio font" which is not available in google fonts. I received a .ttf file and used it as specified below, is it enough or do I need additional files (woff,woff2,etc.)?

@font-face {
  font-family: Antonio;
  src: url(../../../../public/assets/fonts/Antonio-Regular.ttf) format('truetype');
}

  .obj{
    font-family: Antonio, serif;
}
ddy250
  • 281
  • 2
  • 5
  • 16
  • No. In fact, don't use `ttf` at all. See [Are eot, ttf, and svg still necessary in the font-face declaration?](https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration) – Mike 'Pomax' Kamermans Oct 26 '18 at 18:30

1 Answers1

0

Unfortunately a .ttf file won't suffice for all modern browsers, however many newer broswers are moving towards .woff files so for best practice you could do something like the below code, as this would be much more beneficial:

@font-face {
    font-family: Antonio;
    src: url('antonio.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    url('antonio.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
CodeBoyCode
  • 2,227
  • 12
  • 29