Tahmin Ahmed
Tahmin Ahmed

Reputation: 41

@font-face is not working. Am I missing something?

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

Upvotes: 1

Views: 343

Answers (2)

Zahra Mirzaei
Zahra Mirzaei

Reputation: 759

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.

Upvotes: 2

DYNAMICMORTAL
DYNAMICMORTAL

Reputation: 104

.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);
}

HTML

div {
  font-family: fonttemplate, fonttemplate2;
}
TTF can be useful to some older browsers. WOFF compresses the files and is supported by all modern browsers. enter image description here

Upvotes: 1

Related Questions