font-family not being applied on mobile devices

mobile css font not working
google fonts not loading on mobile
font-face not working on ios
impact font not working on mobile
font-face not working android
google fonts not working on iphone
squarespace custom font not working
comic sans font not showing on mobile

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:

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

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

font-family not being applied on mobile devices, Most likely caused by not having the right font format for mobile devices, try using a service like� I have tried manually enforcing the font-family with CSS and tried adding the Impact font externally with font-face as well, but it just changes in a mobile device. I have also done a plugin conflict test which didn’t help and debug log didn’t provide any related information.

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.

Font not working on mobile devices., In mobile device, the headings are in Arial, and the burger menu is in the font- family with CSS and tried adding the Impact font externally with� The font-family property defines the font that is applied to the selected element. The font that is selected is not a single font face, but a “family”, and thus may be dependent on other typographic property values to select the correct face within the family. body { font-family: Arial, Helvetica, sans-serif; }

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.

Custom font not working on mobile phones - Support, Hi - i have been through the full forum and have not been able to find a fix code to Global CSS: @font-face { font-family: 'WildSpirit'; src: url('h… but then the same two fonts dont work on IE 10 either, so still not a mobile related problem, its a browser problem. (Have added screenshots from IE) – Yasser Shaikh Feb 22 '13 at 13:41 Firefox and IE (and native droid) don't support those fonts for some reason, I believe that's OP's question.

@font-face problem on mobile, Also the 'font' css files path is correct, and it works on desktop You used “@ import” to point to them, without their names like this in your CSS: using the ' font-family: fontname;' (the name you assigned) and NOT the name� In IE9 it renders in Arial. Is there a change in the interpretation or application of the body tag or the font-family attribute (pretty basic stuff), or is it unexpected behavior (I mean, other than to me.) Thanks, I'm aware of the issues discussed in the link you posted, I couldn't see anything there that I thought applied to this question.

Font family change doesn't apperar in mobile view, Hello, I want to change the font family just for a paragraph and did it like this: # bodytext It changes the font family on desktop PCs, but not on mobile. Looks like the Comic sans font is not available in any smartphone (?) The following email clients provide the best support of Web Fonts: Apple mail, iOS devices, Outlook 2000 and 2011, Thunderbird, Lotus Notes 8 and 8.5 and Android 2.3./4.2+. Why Google Web Fonts? There are several services that provide web fonts for email, but we find Google Web Fonts to be the least complicated and they also come for free .

Custom fonts not working on mobile devices, However when I load it on my android I do in fact see the font is not it's only being applied to screens that are larger than a certain width. Not all programs can use TrueType, OpenType, and PostScript Type 1 fonts, especially older or DOS-based programs. Some programs use proprietary font formats. Check the documentation for the software to be sure it supports the type of font you are trying to use.

Comments
  • can you add some codes?
  • I think this will help Font face not embedding on mobile safari iphone-ipad
  • Usually you need 5 file extensions: .ogg, .woff, .wof2, .eot, .ttf; use the link from @jezE answer ;)
  • What about the system fonts not loading, how did you solve that?