0

I downloaded a free font and have the .ttf file in a folder on my local server. However, I can't seem to be able to get the font to actually work. This is the code that I found online for applying an external font:

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

    .header {
  font-family: simplifica;
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

To clarify, I did change the file name because I read somewhere that capital letters can cause unexpected problems for browsers like IE. The original file name was "SIMPLIFICA Typeface.tff".

Also, I am using Brackets text editor and it's "live preview" function.

Revircs
  • 1,312
  • 3
  • 12
  • 23
  • I just read that the 'truetype' format is for Safari/Android/iOS from this source: https://css-tricks.com/snippets/css/using-font-face/. However, the font is still not displayed when I access my site from a mobile device. – Revircs Aug 01 '18 at 15:08
  • Putting quotes around each simplifica does not seem to work either. – Revircs Aug 01 '18 at 15:09
  • Moving the font file into the same folder as the stylesheet and changing the src to "src:url('simplifica.ttf')" seems to have done the trick. Is there something I'm inputting incorrectly in order to keep this font file in a separate folder? – Revircs Aug 01 '18 at 15:12

2 Answers2

1

Try to Import other font formats like woff and eot and try this code

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

if the font folder is the same place as the css folder who contain the css file replace "fonts/" with "../fonts/"

1

If you haven't other formats, try convert this font with https://www.fontsquirrel.com/tools/webfont-generator

maťo
  • 1,225
  • 8
  • 16