I used http://fontello.com/ when I needed few icons
Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts
21–30 of 156 posts
Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts
#22Earlier quoted context omitted.
That is what I did for the shields.io logo: https://raw.githubusercontent.com/badges/shields/master/logo... Unfortunately it is still a bit big. Simply converting it to SVG would probably be smaller. I'd welcome a simple tool that does that!
Yeah, it seems like a tool like that wouldn't be hard to build... hmm... :)
Inkscape can convert fonts inside an SVG to paths.
Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts
#23There are some really valid points in here and I dislike the idea of using the whole font when only a few icons are required. But, isn't subsetting going to result in users now caching your subset instead of a cached copy of everything? I would think that does more harm than everyone grabbing a fully cached copy once from a cdn.
It's one of those things that works "in a perfect world", but in the real world it just doesn't work out that well. For starters, leveraging caching via a common CDN pretty much requires everyone to be using a single version from a single CDN. If you can't agree on that, then every time a new version comes out the web is split and the caching doesn't work, and every time someone decides to use another CDN (or someone…
These things highlight how the current system of font distribution is really suboptimal. Even CDN hits are metered, and the idea that I need to either load or cache a bunch of data to render text is dumb.
My employer manages like $20k devices. I betcha we spend 5 figures annually on this crap.
Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts
#24There are some really valid points in here and I dislike the idea of using the whole font when only a few icons are required. But, isn't subsetting going to result in users now caching your subset instead of a cached copy of everything? I would think that does more harm than everyone grabbing a fully cached copy once from a cdn.
> But, isn't subsetting going to result in users now caching your subset instead of a cached copy of everything?
Disk is cheap. Particularly disks that you don't pay for like your users' disks.
Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts
#25Unfortunately I think a lot of the points in this article are lost if you assume that the CDN's serving up the TTF for FontAwesome are using GZIP compression.
I was curious and checked out FA's CDN https://use.fontawesome.com/releases/v4.7.0/fonts/FontAwesom... and the rest of the fonts as https://use.fontawesome.com/releases/v4.7.0/fonts/fontawesom... (not sure why they name the OTF differently) otf 110KB eot 102KB svg 157KB ttf 102KB woff 96.1KB woff2 75.8KB All appear to be using gzip in headers
On my machine, the otf version uses much less bandwidth. From 52.4 kb to 16.4.
Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts
#26If you're only using a small subset of FontAwesome (as I suspect many people do), I'd imagine at some point it'd make a lot of sense to use data-uri's to effectively embed them directly in an existing request, which would be faster than a CDN? I saw a talk by someone from Smashing Magazine where they basically did this for a subset of their WebFonts (downloading the entire font asynchronously afterward), then they ca…
That is what I did for the shields.io logo: https://raw.githubusercontent.com/badges/shields/master/logo... Unfortunately it is still a bit big. Simply converting it to SVG would probably be smaller. I'd welcome a simple tool that does that!
I've been converting each font awesome image I need to SVG by hand. It's actually really easy.
1. Open fontawesome-webfont.svg in a text editor.
2. Find the glyph you want to use.
3. Copy it into a new file.
4. Add boilerplate[1] to new file.
5. Change the tag to a tag.
6. Add the attribute `transform="scale(0.1,-0.1) translate(0,-1536)"`
7. Open the file in Chrome and see your SVG.
[1] boilerplate:
{glyph goes here}
Starting with the following glyph:
We end with:
Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts
#27What's the argument against icon fonts? Using actual SVGs?
Icon fonts can flash on page refresh. GitHub's approach of embedding individual SVG icons eliminates this: https://github.com/blog/2112-delivering-octicons-with-svg
Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts
#28Is the 2000TB/day number reasonable, or just clickbait?
It's all based on coming up with two numbers that when multiplied say that this resource is downloaded 73 billion times a day. That's 20 times / day for every internet user (even those using it on a 2G connection once a year). Given a reasonable caching period of 1 month, that'd mean the average user visits 600 different sites a month. That seems like much more than one would expect.
Or to look at it another way, global IP traffic is apparently estimated at 72000 PB/month. That's 2400PB/day. This font alone would then be accounting for 0.3% of all internet traffic, or 1% of all non-video traffic. Again, that's a very high number.
But at least it doesn't appear to be a totally impossible number either, just an awfully implausible one.
Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts
#29Earlier quoted context omitted.
It's one of those things that works "in a perfect world", but in the real world it just doesn't work out that well. For starters, leveraging caching via a common CDN pretty much requires everyone to be using a single version from a single CDN. If you can't agree on that, then every time a new version comes out the web is split and the caching doesn't work, and every time someone decides to use another CDN (or someone…
These things highlight how the current system of font distribution is really suboptimal. Even CDN hits are metered, and the idea that I need to either load or cache a bunch of data to render text is dumb. My employer manages like $20k devices. I betcha we spend 5 figures annually on this crap.
It's a deceptively hard problem to solve.
installing a ton of fonts up front takes a pretty significant amount of space, installing a subset for their language/preference or letting the user manage it makes it VERY easy to fingerprint users based on what fonts they download, and doing any kind of cross-origin long-term caching is a security nightmare as it lets you begin to map out where a user has been just based on what they download.
Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts
#30I've been using https://icomoon.io/app/ for years now to pick only the fonts I like and it can also generate icon fonts from svg so that I can merge different icon sets and pick the only icons I will use in my projects.