Search code examples
htmlcsswordpressfontscustom-font

WordPress font does not works on Mobile

I have added custom font on my website, it works on desktop, also if i open browser as mobile fonts works,but when i open it on mobile device ot tablet, font does not work.

@font-face {
    font-family: LTblackL;
    src:url(https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.eot);
    src:url(https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.ttf),
    url(https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.woff)format("woff"), 
    url(https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.woff2)format("woff2"), 
    url(https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.svg#filename)format("svg"),
    url(https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.otf)format("opentype");
}

this is how i do. Any idea what is wrong?

Solution

  • You need to wrap your font file urls in quotes, as they contain whitespace.

    Check the network tab in dev tools: the fonts are not loaded.
    Probably, you see a locally installed copy on your desktop device.

    Change your @font-face like so

    @font-face {
    font-family: LTblackL;
    src:url('https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.woff2')format("woff2"),
        url('https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.woff')format("woff"),
        url('https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.ttf') format("truetype");
    font-weight: 700;
}

    Besides, you can safely remove .eot and .svg.
    .eot was only supported by Internet Explorers, .svg is no longer supported by Firefox or Chromium.

    I also recommend to specify the font-weight otherwise different fonts might not be mapped correctly to elements that are bold by default (e.g <strong>, <h1>etc.)

    You should also change the order of URLS starting with the most compact modern format (.woff2). If a browser can't use it, it skips to the next format (e.g. woff)