CODEWITHSUNDEEP
svgfontastic
Greg
Greg

Reputation: 1402

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.

Upvotes: 1

Views: 2042

Answers (2)

BigRedDog
BigRedDog

Reputation: 928

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.

Upvotes: 1

myf
myf

Reputation: 11293

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

Upvotes: 1

Related Questions