WordPress font does not works on Mobile

Question

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?

Answer 1

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)

Answer 2

Try to use the @import function.

/* Import the font with the source url */

@import url("fonts.com/font/example");

/* Set the font for the website body */

body {
  font-family: "example";
}

Answer 3

Not all browsers support all fonts. It may be this font is not supported by the browser you're testing on.

You can check https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet for tips on testing whether or not your fonts are loading.