31–40 of 190 posts
I see they promote the ligature approach: face where the font is expected to ligate the characters 'f', 'a', 'c', 'e' into a single glyph. This can be problematic on the web, as it means that if a user doesn't get your webfont for any reason (download failed, browser settings that disable webfonts, accessibility options that override fonts for clarity, etc) the entire word will appear in a fallback font, often totall…
Earlier quoted context omitted.
That SVG does have to be inline though, which drastically increases your HTML page’s size. You cannot style an SVG loaded in an IMG element. Imagine rendering 50 rows with each 6 icons, 1kb each. There are 6 unique icons, so it’s only 6kb each loading them from the server, but inline you’ll have 300kb of SVG icons
You can use an "SVG sprite" with . No need to inline the SVG every time.
Earlier quoted context omitted.
SVGs can do the same thing.
That SVG does have to be inline though, which drastically increases your HTML page’s size. You cannot style an SVG loaded in an IMG element. Imagine rendering 50 rows with each 6 icons, 1kb each. There are 6 unique icons, so it’s only 6kb each loading them from the server, but inline you’ll have 300kb of SVG icons
Earlier quoted context omitted.
You can use an "SVG sprite" with . No need to inline the SVG every time.
Oh? I have to look that up
I have Google Fonts blocked in uBlock Origin now, and it's really helped pages load quicker and feel more snappy. I added these lines to uBlock: fonts.gstatic.com fonts.googleapis.com Occasionally some icons break on a few sites, but mostly it's plain sailing.
Regular reminder that icon fonts are bad for accessibility and are technically troublesome also in other ways: https://github.blog/2016-02-22-delivering-octicons-with-svg/
The provided usage example is bad for accessibility: the name of the icon, e.g. ”check_circle”, will be announced by screen readers. If there is other contextual information that explains the icon, the icon can be hidden from screen readers using aria-hidden=”true”. However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Also, never use Google’s…
Why? It's the screen reader's job to inform users of what's on their screens. It's not my job to give descriptions to things.
>The CDNs are used to track your users.
Do you have any evidence to support this claim?
Did anyone convert them to SVG yet?
Neat. I've got a wild idea. What if instead of trying to destroy the web [1], Google tried to become the very best company for web developers? You know, take a play from Microsoft's "Developers Developers Developers" playbook after it was handed off to Nadella. The hip Microsoft that built VSCode, bought Github, and has the #2 cloud. Maybe a first class web has "native apps" that work on desktop and Android and don't…
Earlier quoted context omitted.
Oh? I have to look that up
Took me a while to figure it all out, but it works surprisingly well. I have been using https://icomoon.io/ to generate the sprites. They also provide a JS polyfill to support IE.
