Search code examples
svgfontastic

Fontastic.me not working on mobile


Fontastic.me is a website that let you upload svg files so you can use your icons as a font. I've used this site lots of times, but today I noticed the icons are not working on mobile anymore. They do work in the browsers on computer. I only noticed it today, it has always worked before.

You can use this link to test on mobile.


Solution

  • To me it seems like a bug in the Fontastic CSS generator: your page links CSS

    https://fontastic.s3.amazonaws.com/8pMGtiqubDqmpbD4ER7hE3/icons.css

    this contains last SVG fallback linked as

    https://cdn.myfontastic.com/8pMGtiqubDqmpbD4ER7hE3/fonts/1446830181.svg#1446830181

    the hash part of the URL must correspond with font ID in the SVG, but actual source contains <font id="cloud-font" horiz-adv-x="512"> instead.

    So replacing #14468301 with #cloud-font in CSS or replacing @id value in SVG should fix your problem.

    This applies only for case your mobile really resorts to SVG version. Only few browsers would do that (I think Android below 4.4, maybe old Safari, Blackberry, and maybe Opera Mobile).


    (Besides that, your HTML contains extra HEAD tag with icon CSS link in BODY, what is not valid. I donʼt think this will make any sane browser completely ignore the link, but cannot exclude such possibility. If you have served your page as real application/xhtml+xml, browser should show the error right away.)