Hi, Just moved a client site to live and have a de...
# suitecommerce
j
Hi, Just moved a client site to live and have a design/font issue. The SVG version of the web font I was using no longer works on IOS mobile devices on live, although there was no issues no sandbox. Read somewhere that the mime type on the server is set incorrectly - anyone have similar issues?
s
What MIME type is it being set to on the server?
j
Hi Steve - phrased that question poorly - should say: it could be that the MIME type on the server is set incorrectly. I'm getting the developer on the project to double check now.
s
Alright, well SVG web fonts are a really odd choice nowadays. Most of the time we (and the general web dev community) recommend WOFF or WOFF2. I would suggest using a more modern file format.
j
Yeah Steve, also using woff and woff2 (SVG was fallback). When I look again - it could be the WOFF versions (I suspected the SVG files as when I first set up on SB the IOS fonts failed until I added the SVGs). What is weird is that the fonts are still working on SB - we are using the same set of fonts and the same @fontface calls. Also when I checked their integrity they all look good.
s
OK, and when you declare the font-face rules, you're specifying the correct font file types?
j
I thinks so Steve - I usually use Font squirrel to convert my file types - and it FontFace code is normally fairly reliable
Copy code
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../web-fonts/OnestRegular.eot');
    src: url('../web-fonts/OnestRegular.eot') format('embedded-opentype'),
         url('../web-fonts/OnestRegular.woff2') format('woff2'),
         url('../web-fonts/OnestRegular.woff') format('woff'),
         url('../web-fonts/OnestRegular.ttf') format('truetype'),
         url('../web-fonts/OnestRegular.svg#OnestRegular') format('svg');
}
s
OK, well, this looks fine. Without more information about what exactly is going wrong, it's hard to help. Personally, I would ditch the redundancy you're including with EOT and SVG fonts. EOT is only for pre-Edge Internet Explorer and SVG is just pointless
j
Fixed Steve. I re-downloaded the fonts and ran them back through the convertor and worked when re-uploaded SCA Live
🙃 1
s
C'est la vie
Glad it works