0

I have downloaded the font and added it to the Atom text editor but it doesn't seem to work...

<style type="text/css">
  @font-face {
    font-family: "avocado";
    src: url("AvocadoCreamy.ttf");
    src: url("AvocadoCreamy.otf");
  }

  h1 {
    color: hsl(93, 100%, 51%);
    text-align: center;
    font-family: "avocado";
  }
</style>
asker
  • 7
  • 5
  • 2
    Are the font files in the same folder as the css file? Have you tried setting a `font-weight: normal;` . Do this font files contain all font-weights, or is it just one font variant? – rank May 27 '20 at 17:43

2 Answers2

0

In your case, while using the @font-face tag, maybe the address to the URL provided is wrong or incomplete. Try the full address if the font file is locally downloaded.

The font file can be directly written to URL if it exists in the same directory as the CSS file.

Also, I would recommend the use of @import tag to import fonts in CSS. 

@import url('/*YOUR URL TO FONT HERE*/');
Elysian Storm
  • 788
  • 6
  • 18
0

Assuming you've copied the font file into your root folder (where your index.html file usually is). Instead of a '.ttf' or '.otf', '.woff' or '.woff2' work best for web fonts so consider using that if available. Also make sure the name used i 'src' is exactly the same as the file name in your root folder. see https://css-tricks.com/snippets/css/using-font-face/ also How to include a font .ttf using CSS?

@font-face {
font-family: "avocado";
src: url("AvocadoCreamy.ttf") format("truetype");
font-style: normal;
font-weight: 400;

}

Themba
  • 186
  • 1
  • 4