How do I install a custom local font?

admin管理员组

文章数量:1130349

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

style.css:

@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:

fonts
├── 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?

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

style.css:

@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:

fonts
├── 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?

• fonts

Share Improve this question asked Dec 7, 2018 at 22:09 bigpotatobigpotato 33522 gold badges66 silver badges1717 bronze badges 2

• 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 Commented Dec 7, 2018 at 22:24
• omg... I'm an idiot. It works after changing them!!!!! – bigpotato Commented Dec 7, 2018 at 22:34

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

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

style.css:

@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:

fonts
├── 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?

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

style.css:

@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:

fonts
├── 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?

• fonts

Share Improve this question asked Dec 7, 2018 at 22:09 bigpotatobigpotato 33522 gold badges66 silver badges1717 bronze badges 2

• 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 Commented Dec 7, 2018 at 22:24
• omg... I'm an idiot. It works after changing them!!!!! – bigpotato Commented Dec 7, 2018 at 22:34

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： How do I install a custom local font