Search code examples
cssfontsfont-facefont-familytext-styling

Having trouble applying an external font to CSS

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.

Solution

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