Chrome extension won't let me use a custom font


#1

I'm working on a browser extension for Firefox and Chrome, and one of the bunch of things it does right now is change the font on certain parts of a site. On Firefox, all I had to do was:

@import url('https://fonts.googleapis.com/css?family=FontName:300,700');

then

.some-thingy p {
  font-family: 'FontName', sans-serif;
}

But on Chrome, it doesn't seem to be working, and the font stays the default. Does anyone happen to know how to fix or work around this?

Thanks!

(and also, how do I add a tag to this topic if the tag hasn't been created yet? Like browser-extension or something - it won't let me do it)


#2

Never mind, I was able to figure it out myself just after asking this. Instead of using @import, I had to go to the URL I was trying to import, then copy the CSS there and paste it into my stylesheet. So instead of this:

@import url('https://fonts.googleapis.com/css?family=FontName:300,700');

And no change in the webpage, I now have this:

@font-face {
  font-family: 'FontName';
  font-style: normal;
  font-weight: 300;
  src: local('FontName Light'), local('FontName-Light'), url(https://fonts.gstatic.com/some-url.woff2) format('woff2');
}

@font-face {
  font-family: 'FontName';
  font-style: normal;
  font-weight: 700;
  src: local('FontName Bold'), local('FontName-Bold'), url(https://fonts.gstatic.com/some-url.woff2) format('woff2');
}

And a better looking webpage :)


Although, I'd still like to know why I can't add custom tags to my topic. Is that for moderators only or something?


#3

This is our tagging plugin:

If our instance has the default settings:

min_trust_to_create_tag:
    default: 3