Question 1784 in Wordpress Question posted in
The official Wordpress documentation can be found here.

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?

Tags:

3

Answers


  1. 0

    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";
}
    Login or Signup to reply.
  2. 0

    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)

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search