6

I have a problem with the font-family property in my css. I have a title that I want to style using a particular font. I am using @fontface. On my desktop it works fine, but on iPhone and iPad I get some standard font (I think it might be times but I am not sure). I did some research and tried different formats otf ttf etc... but still wasn't working. Finally, fed up, I've tried just changing fonts on my css to other system fonts and the phone is still not recognising them. Basically it's stuck with one font. Here is a couple of examples of fonts on the desktop:

enter image description here

The three first images are different font-families I have applied on the desktop version. There is a system font, a google font and a custom font using @fontface. All work.

The fourth image is what shows both on iPhone and iPad for each one of the fonts. Always the same one. What on earth is happening? Any suggestions appreciated.

My code for the custom font is:

@font-face {font-family: QuaestorSans;
          src:  url("fonts/QuaestorSans-Rg.otf") format("opentype"),
                url("fonts/QuaestorSans.ttf") format("opentype");
}


.title{
  font-family: QuaestorSans;
  font-size: 2em;
  letter-spacing: 1.4px;
}

the html

alice soyer sky on earth

There is a little animation that fades the letters in, but I wouldn't have thought that would interfere with the font-family (and only on mobile devices?).

If you want the check out the web site it's alicesoyer.com

there is only one rule for the font-family, but if you test the site on desktop and on mobile (i am testing on iPhone and iPad for now) you will see different families. Thanks

Paul
  • 1,277
  • 5
  • 28
  • 56

3 Answers3

3

Most likely caused by not having the right font format for mobile devices, try using a service like https://www.fontsquirrel.com/tools/webfont-generator to generate the correct code for the fonts you're using

Jez Emery
  • 676
  • 4
  • 18
  • hi, i know it has been a while since you have answered this question but im stuck on the same thing. I have converted my tff file to eot,woff,woff2,svg and still the font doesnt get loaded on my iphone but works on my laptop. – kd12345 Oct 02 '22 at 08:26
  • @kd12345 are the fonts correctly defined in your css? Are you loading them locally, or via a cdn? – Jez Emery Oct 03 '22 at 09:08
  • i have tried both locally and via firebase storage and it seems to be working but the fonts look different in safari than on chrome (i am using Futura) – kd12345 Oct 03 '22 at 10:11
1

Try all this formats(just example font-family)..

@font-face {
font-family: 'LatoRegular';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
     url('../fonts/LatoRegular.woff2') format('woff2'),
     url('../fonts/LatoRegular.woff') format('woff'),
     url('../fonts/LatoRegular.ttf') format('truetype'),
     url('../fonts/LatoRegular.svg#LatoRegular') format('svg');

}
use all those formats it should work because some browsers need different formats.

Venu Madhav
  • 413
  • 1
  • 5
  • 14
1

I'd like to add for the answer of @Venu Madhav and @JezEmery beside fontsquirel you can also try Transfonter

and for the code if you are using multiple fonts on your web enclose every font in

@font-face {
  //font number 1 here
}
@font-face {
 // font number 2 here and so on
}

because I did try

@font-face {
font-family: 'LatoRegular';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
     url('../fonts/LatoRegular.woff2') format('woff2'),
     url('../fonts/LatoRegular.woff') format('woff'),
     url('../fonts/LatoRegular.ttf') format('truetype'),
     url('../fonts/LatoRegular.svg#LatoRegular') format('svg');

font-family: 'font 2';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
     url('../fonts/LatoRegular.woff2') format('woff2'),
     url('../fonts/LatoRegular.woff') format('woff'),
     url('../fonts/LatoRegular.ttf') format('truetype'),
     url('../fonts/LatoRegular.svg#LatoRegular') format('svg');

font-family: 'font 3';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
     url('../fonts/LatoRegular.woff2') format('woff2'),
     url('../fonts/LatoRegular.woff') format('woff'),
     url('../fonts/LatoRegular.ttf') format('truetype'),
     url('../fonts/LatoRegular.svg#LatoRegular') format('svg');

/* ----- so on */
}

to save lines of codes, yes it still worked on desktop but it failed in mobile.

ailia
  • 629
  • 6
  • 9