I am trying to install a custom local font but it doesn't look like it's working.


@font-face {
  font-family: "TTNorms";
  src: url("./fonts/TTNorms.eot");
  src: url("./fonts/TTNorms.eot?#iefix") format("embedded-opentype"),
    url("./fonts/TTNorms.woff2") format("woff2"),
    url("./fonts/TTNorms.woff") format("woff"),
    url("./fonts/TTNorms.ttf") format("truetype"),
    url("./fonts/TTNorms.svg#TTNorms-Regular") format("svg");
  font-weight: normal;
  font-style: normal;

My fonts folder:

├── TTNorms-Regular.eot
├── TTNorms-Regular.svg
├── TTNorms-Regular.ttf
├── TTNorms-Regular.woff
├── TTNorms-Regular.woff2

However, when I try to set any element's font-family: "TTNorms" it doesn't work. What am I doing wrong?

  • 1
    Your filenames are wrong. :) For example in your CSS you're asking for "TTNorms.eot" but in your fonts folder the file is actually called "TTNorms-Regular.eot". – WebElaine Dec 7 '18 at 22:24
  • omg... I'm an idiot. It works after changing them!!!!! – Edmund Dec 7 '18 at 22:34

It's probably how you're referencing the fonts from the css. Assuming "style.css" and "fonts" directories are on the same level, your code should work. Are you using a bundler (Webpack or Gulp)? Either could resolve your issue quickly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.