I have a project directory:

.
├──fonts/
│  └──Roboto-Regular.ttf
├──images/
│  ├──final_goal.png
│  └──logo.png
├──scripts/
│  └──script.js
├──sites/
├──styles/
│  ├──style.css
│  ├──style.css.map
│  └──style.scss
├──code.sh
├──index.html
└──watch.sh

My CSS file is referenced in the index.html file. I try to make a font-face for the Roboto-Regular font using the following CSS:

@font-face {
    font-family: GoogleRob;
    src:     url(/fonts/Roboto-Regular.ttf) format('truetype');
}

Which I later on reference with:

* {
    color: white;
    font-family: GoogleRob, monospace; /* here */
    font-size: small;
    padding: 0;
}

But it isn't working. Am I missing something in the syntax? I tried using different quote-marks and file-pathing conventions, but it does not work.

Please help

CodePudding user response：

Your style.css file is in styles folder, beside the fonts folder, but in url() you didn't correctly address it. you should write like this:

src: url('../fonts/Roboto-Regular.ttf') format("truetype");

With ../ you up one level from current folder( styles folder ), and then go into the fonts folder.

CodePudding user response：

.ttf font files don't work much on Google Chrome. Instead, always use woff and woff2. Generally, it is recommended, to use both .woff and .woff2. Use Woff2 as primary font, and Woff as fallback font, this ensures that the browser always uses the best font.

CSS Syntax

@font-face {
  font-family: myWoffFont;
  src: url(fonttemplate.woff2);
}
@font-face {
  font-family: myWoffFont2;
  src: url(fonttemplate2.woff);
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

HTML

div {
  font-family: fonttemplate, fonttemplate2;
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe> TTF can be useful to some older browsers. WOFF compresses the files and is supported by all modern browsers.