Loading a custom font that will work on all devices

[Shane]

Shane

January 1, 2014 at 5:51 pm

It seems that on iOS devices my custom font won’t load – here’s my code:
*Login to see link pass: nx

@font-face{
font-family: 'lunchbox';
src: url('lunchbox-webfont.eot');
src: url('lunchbox-webfont.eot?#iefix') format('embedded-opentype'),
url('lunchbox-webfont.woff') format('woff'),
url('lunchbox-webfont.ttf') format('truetype'),
url('lunchbox-webfont.svg#lunchbox-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
/* Better Font Rendering =========== */

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

This code is placed inside:
childtheme/styles.css

All fonts and icons load fine on a desktop…
All your Iconmoon font icons load fine on the iPhone and I’m using what appears to me as identical convention as you are loading yours

Maybe We need to load these before Google Fonts and or in lieu of Google fonts?
Maybe loading a custom font inside Redux would be a desirable function so we can pick what font is used where?