@font face doesn't work

HTML-CSS
1

hello

i can’t understand why my @font-face rule doesn’t work?

this is the @font-face, notice that it is a valid src because if you go to this link it will automatically start to download the font

@font-face {
   font-family: 'rr';
   src: url(http://stereoblood.com/fonts/Righteous/righteous-regular-webfont.woff);
}

h1,h2,h3,h4{
        
    font-family: rr;
    margin-top: 0px;
    

}

this one is working. notice it looks exactly the same as the first one:

@font-face {
  font-family: mm;
  
  src: url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff);
}

h1,h2,h3,h4{
        
    font-family: mm;
    margin-top: 0px;
    

}
2

actually not sure what ‘@’ is referring to? is font-face a class name? couldn’t find it

3

Why don’t you try importing the font from google fonts instead?

Add this to the top of your CSS

@import url('https://fonts.googleapis.com/css?family=Righteous');


// apply to elements like this
font-family: 'Righteous', cursive;
4

Can you test it using the full name (so 'Righteous') and specifying the format (so src: url(http://stereoblood.com/fonts/Righteous/righteous-regular-webfont.woff) format(woff);). I don’t think it should make a difference given the other one is fine, but just to try to debug closest to standard.

If possible, can you look in the console as well, particularly in the network tab to check if the font is actually being pulled in? I think possibly what @LisaLoop says is a good idea, it may be to do with where it’s coming from rather than any issue with the syntax

Also, @klamgade, that’s how you specify custom fonts in CSS.

5

hey Lisa

I want to try that way for the practice. I know how to do it with the @ import rule
thanks!

6

Hey Dan

I tried with the full name Righteous and it didn’t work. later on today ill check the log maybe there is something there

thanks

7

Hold on, where are you trying to do this? You can’t just hotlink fonts from websites, browser security will kick in and stop you doing that. If it isn’t in the same place as your site is (ie you own it, it is local to the site), or if the provider hasn’t explicitly allowed cross-domain requests, it will get blocked by the browser. The Google one will work because it’s Google, it allows cross-domain requests.

For example:

Screenshot%20from%202018-11-07%2014-37-42
Screenshot%20from%202018-11-07%2014-37-42786×27 2.83 KB

Codepen needs resources to be served over HTTPS, not HTTP, so that was never going to work, but it seems the site is available under HTTPS, so if I change the URL, I get an even more explicit message:

Screenshot%20from%202018-11-07%2014-41-09
Screenshot%20from%202018-11-07%2014-41-091095×51 6.28 KB

In comparison, for Google (note I needed to change http to https for this to work on Codepen):

The fixes available are:

  1. Use a font service like Google fonts that is designed for this.
  2. Download the font, put it in the same place as your web page, and use @font-face.
  3. Download the font and upload it somewhere that you have access to, then use @font-face.
1 Like
8

Yes Dan that was it!

i put the font in my domain folder but called it on a test page i made locally on my computer.

I actually use now an chrome extension that allow the cross domain request then it worked but yes, i need to test it on my website when it is live

thanks!

1 Like