CODEWITHSUNDEEP
htmlcssgoogle-chromegoogle-chrome-extension
mcody
mcody

Reputation: 81

How to use .tff font in a Chrome extension?

I'm new to CSS, and not sure why this isn't working. I downloaded a .tff font from the web and put it in my css folder right next to popup.css. This is not a content script extension if that makes a difference (this font is used in the popup, and settings pages), and I'm loading my extension by "load unpacked" on chrome extensions.

popup.css

@font-face{
 font-family:'digital-7';
 src: url("./digital-7.ttf");
}

.digit {
  font: digital-7;
  color: blue;
  display: inline-block;
  font-weight: 'bold';
  font-size: 32px;
}

The element in question in one of my React component files: 

<div className="digit">{this.state.seconds}</div>

I've tried adding type="text/css" to the div, and also tried committing the url() as I'm not sure why I would need that, but those didn't work either. Does this have something to do with the manifest file? I don't even get any errors that I can see.

Upvotes: 3

Views: 1580

Answers (1)

mcody
mcody

Reputation: 81

The problem was a simple mistake that I needed to use font-family: digital-7 instead of just font: digital-7.

Upvotes: 1

Related Questions