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

Report · Jan 25, 2017

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 @Blissful_help0D4E-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;}

@Blissful_help0D4E-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!

Report · Jan 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

Report · Jan 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 & Moderator

Report · Jan 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.

Report · Jan 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.

Report · Jan 30, 2017

A) it's not that you "need" to use a Google font, they've just taken care of a lot of the minutia for developers already. Offering the fonts in the correct formats for the most cross-browser/platform/device compatibility as well as covering licensing for web use (not all fonts are licensed equally).

B) To avoid having to rewrite links across your entire site, use server side includes for any content in your pages that will be identical. Most of my pages are made up of 3-5 include files. Only the information unique to the page is actually on it, the rest is written in by the server when the viewer requests the page...

PHP Tutorial - Include File

SSI: The Include Command

When it's time to update, I make the change to the include file and upload it. Every page is automatically changed because the server builds them on the fly with the new include info.

C) Sure, you can choose additional versions from Google when you select the font. Don't go too crazy with it thought, they get pretty big when you include multiple versions.

Report · Jan 30, 2017

A) If you go the self-hosted route, you need fonts in various file types to support all the different browsers. Also read your font licenses very carefully. Some fonts are licensed for print / image use only; not for web. See link below for details.

Custom Web Fonts - http://alt-web.com/

B) You're probably not doing it right. See link above.

C) Too many font options slows page load.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

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

1 Correct answer