Topic: Custom fonts not showing up on iOS, working fine on desktop

Tagged: x

Author

Posts

October 26, 2016 at 4:20 pm #1232124

pointblankcreative

Participant

Hi there,

I know this is a common problem, but I went though the database and still couldn’t find a fix.

I added the following to my global css customizer:


@font-face {
	    font-family: "gotham-bold";
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Bold.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Bold.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Bold.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; }

@font-face {
	    font-family: "gotham-book";
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Book.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Book.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Book.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; }

@font-face {
	    font-family: "jubilat-bold";
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Jubilat-Bold.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Jubilat-Bold.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Jubilat-Bold.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; }

@font-face {
	    font-family: "gibson-bold";
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-bold-webfont.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-bold-webfont.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-bold-webfont.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; }

@font-face {
	    font-family: “gibson-regular”;
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-regular-webfont.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-regular-webfont.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-regular-webfont.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; }

@font-face {
	    font-family: “gibson-light”;
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-light-webfont.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-light-webfont.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-light-webfont.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; }

@font-face {
	    font-family: "gibson-semibold";
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-semibold-webfont.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-semibold-webfont.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-semibold-webfont.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; }

And while all the fonts show up fine on Safari and Chrome, it doesn’t work on iOS (10.1). I’ve cleared cache and opened it on different phones, but still no luck.

My site: http://hsaraid.pointblankstaging.com/home/

Thanks!

October 26, 2016 at 10:07 pm #1232549

Rue Nel

Moderator

Hello There,

Thanks for writing in! I have checked your site and it turns out that you have inserted an invalid quotes which invalidates the whole css block. Please see this screenshot: http://prntscr.com/czg6jh

Please have you css code updated and use this instead:

@font-face {
	    font-family: "gotham-bold";
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Bold.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Bold.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Bold.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	    font-family: "gotham-book";
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Book.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Book.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Book.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	    font-family: "jubilat-bold";
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Jubilat-Bold.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Jubilat-Bold.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Jubilat-Bold.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	    font-family: "gibson-bold";
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-bold-webfont.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-bold-webfont.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-bold-webfont.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	    font-family: "gibson-regular";
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-regular-webfont.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-regular-webfont.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-regular-webfont.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	    font-family: "gibson-light";
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-light-webfont.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-light-webfont.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-light-webfont.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	    font-family: "gibson-semibold";
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-semibold-webfont.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-semibold-webfont.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-semibold-webfont.ttf') format('truetype'),
	    font-weight: normal;
	    font-style: normal; 
}

Hope this helps. Kindly let us know.

October 28, 2016 at 12:08 pm #1234991

pointblankcreative

Participant

Hi there, thanks for catching that. I made the change, but it still doesn’t show up on iOS.

October 28, 2016 at 10:05 pm #1235532

Rue Nel

Moderator

Hello Again,

A closer look with your code seems to me that it is invalid. The correct @font-face format should be like this:

@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 */
}

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

So I think the correct code is this;

@font-face {
	    font-family: "gotham-bold";
	    src: url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Bold.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Bold.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Bold.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	    font-family: "gotham-book";
	    src: url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Book.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Book.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Gotham-Book.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	    font-family: "jubilat-bold";
	    src: url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Jubilat-Bold.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Jubilat-Bold.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/Jubilat-Bold.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	    font-family: "gibson-bold";
	    src: url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-bold-webfont.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-bold-webfont.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-bold-webfont.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	    font-family: "gibson-regular";
	    src: url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-regular-webfont.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-regular-webfont.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-regular-webfont.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	    font-family: "gibson-light";
	    src: url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-light-webfont.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-light-webfont.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-light-webfont.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	    font-family: "gibson-semibold";
	    src: url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-semibold-webfont.woff') format('woff'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-semibold-webfont.woff2') format('woff2'),
	         url('http://hsaraid.pointblankstaging.com/wp-content/themes/x/fonts/gibson-semibold-webfont.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal; 
}

Hope this helps.

October 31, 2016 at 5:07 pm #1238417

pointblankcreative

Participant

Amazing! That did it, much appreciated!

October 31, 2016 at 10:07 pm #1238667

Prasant Rai

Moderator

You are most welcome. 🙂

Author

Posts