Skip to main content
Go7hic13
Go7hic13
Known Participant
January 26, 2017
Answered

I'm having trouble using media queries and web fonts on my iphone 6 plus

  • January 26, 2017
  • 2 replies
  • 558 views

I'm in the process of working off creating a website which is in responsive (RWD) design.  However, when I try to load a font with the following media query everything appears fine and the page (which at this point is only a one column grid) images and video shrink to fit the smaller screen of my iPhone 6Plus.

Unfortunately, the @11220649-face is not working on the iPhone (I haven't tried it on my tablet yet).

Here is my .css code for the smart phone media query..

@media screen and (max-width: 580px;){

ul li {float: none;}

@11220649-face {

  font-family: "Racer";

  url('../fonts/racer.woff#Racer') format('woff');

}

}

Like I said the responsive design of the site works fine on the desktop and the correct ("Racer") font appears however the iPhone is not displaying the "Racer" font and instead display a default font...  Which is not the desired effect.

Any ideas?

Thanks!

    This topic has been closed for replies.
    Correct answer pziecina

    The .woff font file format was not supported until iOS V10. If your iOS OS is not version 10 then it will not work.

    For iOS 9, use a ttf font -

    http://caniuse.com/#search=.ttf

    https://developer.mozilla.org/en/docs/Web/CSS/@font-face

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 26, 2017

    Use a Google Web Font.  Copy & paste this code into the <head> of your HTML document.

    <link href="https://fonts.googleapis.com/css?family=Racing+Sans+One" rel="stylesheet">

    Define your font in the CSS:

         .mobile {font-family: 'Racing Sans One', cursive; font-size: 18px}

    HTML:

         <h3 class="mobile">This is Racing Sans One</h3>

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Go7hic13
    Go7hic13Author
    Known Participant
    January 30, 2017

    Nancy...

    Many thanks for the assistance.  After reading your reply I checked a little further into the whole "Google/Adobe" Webfonts thing...  And I noticed it works for my mobile device as well as the desktop (cool beans!).  However, it brings me to three questions:

    A) Why do I need to use a google font to work properly on my mobile devices rather than installing a font of my choosing on the ftp server?

    B) I tried using the @import function in the .css file and it didn't work?!?!  However, when I added the <link> statements to the individual .html files everything worked fine.  Sort of defeats the purpose of a standardized .css file if I need to modify each .html file if a font change is included?

    C) Is there a way to have various versions (weights) of fonts of the same type in the same documents.  i.e. a 400, 700, Extra-Bold, etc..?

    If you have chance to respond to these questions I'd appreciate it if not I do appreciate you pointing me in the proper direction for mobile fonts.

    pziecina
    pziecina
    Legend
    January 30, 2017

    The problem with downloadable fonts is copyright.

    In order to have control over the fonts usage, it was agreed that the link should be used in order to allow downloading of the font to the users computer, once pert visit only, and not allow storing the font.

    This means that the css must be edited if the font is changed, that is why most users now place the font css at the top of the css file. As for different weights, it is best if you choose one or two as downloadable fonts can be high in bandwidth for mobile users due to the file size of many.

    pziecina
    pziecinaCorrect answer
    Legend
    January 26, 2017

    The .woff font file format was not supported until iOS V10. If your iOS OS is not version 10 then it will not work.

    For iOS 9, use a ttf font -

    http://caniuse.com/#search=.ttf

    https://developer.mozilla.org/en/docs/Web/CSS/@font-face

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices