Can't get webfont to work [Solved]

MikaYuoadasMikaYuoadas
edited January 2020 in Style Development [?]

Hello,

I'm trying to change the arabic font for various website (let's take wikipedia here for example) to Noto Naskh Arabic.

The link above suggests using @import url(//fonts.googleapis.com/earlyaccess/notonaskharabic.css); in your css but as @import aren't allowed in userstyles I've copied the content from the imported css into the style.

So here's my userstyle:

@font-face {
    font-family: 'Noto Naskh Arabic';
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Regular.eot);
    src: url(//fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Regular.eot?#iefix) format('embedded-opentype'),
         url(//fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Regular.woff2) format('woff2'),
         url(//fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Regular.woff) format('woff'),
         url(//fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Noto Naskh Arabic';
    font-style: normal;
    font-weight: 700;
    src: url(//fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Bold.eot);
    src: url(//fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Bold.eot?#iefix) format('embedded-opentype'),
         url(//fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Bold.woff2) format('woff2'),
         url(//fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Bold.woff) format('woff'),
         url(//fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Bold.ttf) format('truetype');
}

* {
    font-family: 'Noto Naskh Arabic', sans-serif !important;
}

But It doesn't seems to work at all!

I've search through the forum but haven't found any way to make this work.
Has anyone any idea why?

Comments

  • anagrammaranagrammar
    [?]
    Absolute vs relative URLs
  • MikaYuoadasMikaYuoadas
    edited January 2020 [?]

    These are not relative URLs, but protocol relative URLs.

    But for the sake of exhaustiveness I've already tried specifying "https://" as the protocol:

    @font-face {
    font-family: 'Noto Naskh Arabic';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Regular.eot);
    src: url(https://fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Regular.eot?#iefix) format('embedded-opentype'),
         url(https://fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Regular.woff2) format('woff2'),
         url(https://fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Regular.woff) format('woff'),
         url(https://fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Noto Naskh Arabic';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Bold.eot);
    src: url(https://fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Bold.eot?#iefix) format('embedded-opentype'),
         url(https://fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Bold.woff2) format('woff2'),
         url(https://fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Bold.woff) format('woff'),
         url(https://fonts.gstatic.com/ea/notonaskharabic/v4/NotoNaskhArabic-Bold.ttf) format('truetype');
}

* {
    font-family: 'Noto Naskh Arabic', sans-serif !important;
}

    But I didn't get more success doing so. :(

  • anagrammaranagrammar
    edited January 2020 [?]
    My fault. Was shooting for an informative way to tell you to try it with the protocol.

    Unfortunately, IME, fonts either work right off the bat, or they're a total nightmare. I remember trying to hook up a Roboto font-face back in the day, and couldn't get it working no matter what I tried.

    Finally copied off of someone else's homework, and the only way it seemed to work was with all types of unicode ranges specified. Every time I attempted to simplify it, it broke.

    Needless to say, I'm not gonna offer you much in the way of helpful advice. Here is that monstrosity of a cheat sheet I was referring to. Maybe you need to hook up something equally stupid. LMK if it's helpful at all, for future reference. I wish you luck. =)
  • anagrammaranagrammar
    [?]
    Updated link.
  • MikaYuoadasMikaYuoadas
    [?]

    Unfortunately I didn't work either for me. :'(

  • MikaYuoadasMikaYuoadas
    [?]

    Damn, I found the issue, It was with my firefox setup...
    I had browser.display.use_document_fonts set to 0 in about:config.
    Setting it to 1 allow the first userstyle to properly load the webfont.

    I don't remember changing this setting but it's obviously a PEBKAC on my part.

    Thanks a lot and sorry for the noise. :)

Sign In or Register to comment.