1

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.

Greg
  • 1,382
  • 3
  • 22
  • 45

2 Answers2

1

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.)

myf
  • 9,874
  • 2
  • 37
  • 49
  • Thanks. Yes I'm aware of the extra HEAD tags. The website is made in Drupal and didn't know back then Drupal already has a template for that, so it's double now. I should change it – Greg Nov 08 '15 at 14:25
1

Greg, i had the same issue. I end up ditching Fontastic and use https://glyphter.com/ instead.

Glyphter creates your own font set by uploading each character at a time.

It worked for me and perhaps you can try this too and see if it works.

BigRedDog
  • 928
  • 1
  • 7
  • 15
  • Thanks, I didn't know this one before. Will definitely check it out – Greg May 12 '16 at 08:37
  • 1
    Hi Greg, I actually went to your site and saw that your fonts are not working. I like Glyphter bc you don't need to load up all the glphs you won't use. You only create those you want, then it creates the font files for you. Helps to keep things optimize and load fast :D – BigRedDog May 14 '16 at 03:34
  • Yeah, I'll definitely change to Glyphter now haha – Greg May 14 '16 at 16:34