CODEWITHSUNDEEP
cssfontsfont-facefont-familytext-styling
Revircs
Revircs

Reputation: 1352

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.

Upvotes: 0

Views: 133

Answers (2)

عبدالرحمان
عبدالرحمان

Reputation: 485

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/"

Upvotes: 1

maťo
maťo

Reputation: 1312

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

Upvotes: 1

Related Questions