Trevor Trevor - 10 months ago 61
CSS Question

Why doesn't downloaded font work on website?

I downloaded 2 fonts from 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 Source

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');


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


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