Trevor Trevor - 25 days ago 11
CSS Question

Why doesn't downloaded font work on website?

I downloaded 2 fonts from dafont.com and coded

html-selector {
font-family: font-name;
}


The font name appears in the PHPStorm font-family list when I'm coding. But the fonts are not working when rendered in html/css.

Can anyone help?

Answer

It's not enough to download a font. You have to let your page (CSS file) know where to get the new font as indicated in your css font-family.

I'm assuming you downloaded font-name-Regular.ttf and stored it in the ./fonts/ folder.

In your css file (preferably at the top) use:

@font-face {
  font-family: 'font-name';
  src: url('./fonts/font-name-Regular.ttf');
}


NOTE:

Ensure you always have fall-back fonts, just incase the @font-face rule is not supported by the browser.

Example:

html-selector {
    font-family: font-name, Helvetica, Arial, sans-serif;
}
Comments