Search code examples
cssfirefoxfontsgoogle-font-api

Google font not showing in firefox


for my website I'm using couple of google fonts:

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,300italic,400italic&subset=latin,latin-ext);

@font-face {
    font-family: 'Montserrat', sans-serif;
    font-family: 'Raleway', sans-serif;
}

The work well in Chrome and Safari, but in Firefox (I tried 47 and 47.0.1) the font "Montserrat" is not displaied.

It's very curious because I get no network error or no other error in the console and only one is not working, the other one is working fine.

Do you know any solutions? Thanks!


Solution

  • As you guys were pointing out the code I posted works on Firefox. The problem was that the font-family was override by another css (still don't know why this was happening only in Firefox...). I just created this class:

    .font-montserrat {
        font-family: 'Montserrat', sans-serif;
    }
    

    And just added:

    .font-montserrat {
        font-family: 'Montserrat', sans-serif !important;
    }
    

    Now the font is properly rendered in every browser!