CSS use custom font (ttf) from folder

Question

I am testing html localy with notepad++ (not created a site yet) and I am trying to use a custom downloaded font. So, I have downloaded a ttf font and placed it under a folder that also contains the html file. Then I use

<html>
<head>
<style> 
@font-face {
  font-family: myFirstFont;
  src: url('C:\Users\Jon\Desktop\zz\clights.ttf')  format('truetype');
}

div {
    font-family: myFirstFont;
}
</style>
</head>
<body>

<div>Test123</div>

</body>
</html>

But that doesn't seem to work. I have viewed many answers but they all refer to adding a font to the contents of your site but I am testing html localy... How can I use a custom font this way? Ty

If the font directory is in the same directory as the html file you can just use url('zz\clights.ttf') — JensV
– JensV, Commented Mar 2, 2017 at 17:11
If the font file is in same folder as your html file is, then you do not need to write entire path in url. Just write the file name. — Rajan Patil
– Rajan Patil, Commented Mar 2, 2017 at 17:18
Maybe you find an answer here: stackoverflow.com/questions/10795708/… — Stefan F.
– Stefan F., Commented Mar 2, 2017 at 17:20
Tried all the combinations even without the full path but still no font appears ;/ — darkchampionz
– darkchampionz, Commented Mar 2, 2017 at 17:30

bamabacho · Accepted Answer · 2017-03-02 17:24:00Z

5

You don't need the entire filepath. Since its in the same folder, simply use url('zz/fontname.ttf)

Or if the ttf file is in the same directory as the index.html file, then drop the 'zz'

answered Mar 2, 2017 at 17:24

bamabacho

3213 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS use custom font (ttf) from folder

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related