Search code examples
htmlcssmobilefontsfont-face

Mobile Firefox and Chrome not recognizing @font-face

I am using a particular font on my website. Firefox and Chrome recognize it on the PC (locally and server), but not on mobile (Firefox and Chrome). I am using @font-face in my CSS file.

I have the fonts uploaded on the server. I don't know what to try since it does work on the computer. Any help greatly appreciated.

Here is my HTML:

 <div class="welcome">WELCOME</div><div class="home">HOME</div>

Here is my CSS:

@font-face {
    font-family: 'typographicaregular';
    src: url('../fonts/typographica.regular-webfont.woff') format('woff2'),
         url('../fonts/typographica.regular-webfont.woff2') format('woff');
    font-weight: normal;
    font-style: normal;}

.welcome {
    width: 47%;
    padding: 0;
    margin: 0 auto;
    font-family: 'typographicaregular', sans-serif;
    font-size: .7em;
    letter-spacing: 26px;
    text-align: center;
    color: #004391;
}
.home {
    width: 85%;
    padding: 0;
    margin: -40px auto 0;
    font-family: 'typographicaregular', sans-serif;
    letter-spacing: 12px;
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
    color: #004391;
}

It should show the actual font on my Android phone and iPad, not a generic san-serif font.

Solution

  • This seems like a duplicate from: @font-face Not Working in Chrome for Android

    The problem may be related to your font-family declaration (I can't tell because you haven't posted that part). If, for example, you had this:

    font-family: fghjkjh, 'jump_startregular', sans-serif;

    ...Chrome for Android would simply pretend that fghjkjh is installed (but really use the default Android font) and ignore everything else. (Not sure if this is a bug or a feature.)

    In which case, the solution is to move 'jump_startregular' to the front - and possibly add a local source to the @font-face block instead, which probably causes problems with other older browsers.

    "Taken word for word from the link mention above"

    If this doesn't work, I suggest you use google fonts instead.