@Font-Face Not Working on Mobile

@Font-face not working on mobile

You need to add all src needed to @font-face like this example:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Source: https://css-tricks.com/snippets/css/using-font-face/

Hope it helps,
cheers.

(If you need to convert the font you gonna need this font-generator )

Why are my custom fonts not working on mobile devices?

Your fonts aren't loaded at all(also in desktop view), as the path to your font directory isn't correct.

https://robynloudang.github.io/Portfolio/fonts/MontserratAlternates-Regular.woff2

works!

https://robynloudang.github.io/Portfolio/styles/fonts/MontserratAlternates-Regular.woff2

nope!404

You will also see a debug message in dev tools.

Just move your "fonts" folder in your "styles" folder or edit your @font-face declaration:

    @font-face {
        font-family: 'Montserrat Alternates';
        src: url('../fonts/MontserratAlternates-Regular.woff2') format('woff2'),
            url('../fonts/MontserratAlternates-Regular.woff') format('woff'),
            url('../fonts/MontserratAlternates-Regular.ttf') format('truetype'),
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

@font-face not working

Double period (..) means you go up one folder and then look for the folder behind the slash.
For example:

If your index.html is in the folder html/files and the fonts are in html/fonts, the .. is fine (because you have to go back one folder to go to /fonts). Is your index.html in html and your fonts in html/fonts, then you should use only one period.

Another problem could be that your browser might not support .eot font-files.

Without seeing more of your code (and maybe a link to a live version of your website), I can't really help you further.

Edit: Forget the .eot part, I missed the .ttf file in your css.

Try the following:

@font-face { 
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf); 
}

Mobile Firefox and Chrome not recognizing @font-face

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.

Some font weights won't load on mobile with different @font-face loads

If this is directly copied from your source code, you’re mixing single and double quotes. That’s probably interfering with the other CSS. Try:

@font-face {
  font-family: 'Glober';
  src: url('/includes/fonts/globerbold.otf') format('opentype');
  font-weight: 700;
}

/* Etc. */

You’ll notice I’ve also changed the format from embedded-opentype, which was for the old EOT format used by old versions of Internet Explorer to opentype.

The browser will (usually helpfully) only load the styles that are actually used, so your other HTML & CSS will be a factor. If only one style is applied, that might be the reason why the others aren’t showing up as being loaded in your developer tools.

If you purchase or already have a package with a web font license for Glober, they should include WOFF and WOFF2 files as well, which will be a better choice than the OpenType font. Most likely, that will also come with a sample CSS file you can use or modify.

@font-face {
  font-family: 'Glober';
  src: url('/includes/fonts/globerbold.woff2') format('woff2'), 
       url('/includes/fonts/globerbold.woff') format('woff');
  font-weight: 700;
}

Hope that’s helpful!