Whenever Google makes something too easy to use for development I get a feeling they are moving on from it - in this case Material.
Because it's not a distinguishing factor anymore, so let's give it to the masses.
Icons – Google Fonts
71–80 of 190 posts
Re: Icons – Google Fonts
#72Regular 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/
I can't see how these would be bad for accessibility. The markup is a with a human readable word like "home" in it.
Re: Icons – Google Fonts
#73This will probably end up left unfinished like Google Fonts’ variable font support.
I don’t understand how they commission high-quality fonts from professional foundries, then turn around and neuter them in the Google Fonts UI – take a look at the family called Commissioner: https://fonts.google.com/specimen/Commissioner
Can you tell from this page that the font contains italics? Or that it has a semi-serif flared-terminal variant? These are additional axes that simply aren’t supported, so there’s no way to know they exist unless you visit the foundry’s GitHub page.
Re: Icons – Google Fonts
#74How do I download the png?
The PNG are all in several subfolders...
Re: Icons – Google Fonts
#75This will probably end up left unfinished like Google Fonts’ variable font support. I don’t understand how they commission high-quality fonts from professional foundries, then turn around and neuter them in the Google Fonts UI – take a look at the family called Commissioner: https://fonts.google.com/specimen/Commissioner Can you tell from this page that the font contains italics? Or that it has a semi-serif flared-te…
They are actively working on this.
I worked on Google Fonts, and you’d be incredibly surprised how few people run the entire service. If I recall correctly, ether ratio is something like one Google Fonts team member is responsible for the equivalent opt hundreds of millions of requests a day.
The main focus they had in the variable fonts roll out was making the internet faster. The process of choosing when to/not serve variable fonts behind the scenes was oriented around the font-weight axis, so they could reduce the number of requests, and hence speed up everything from Google searches to YouTube and every other website using Google Fonts.
Sadly the UX around displaying axes isn’t straight forward. Since the Google Fonts wants to setup a conservative interface, that doesn’t result in users requesting an entire variable axes with every request, especially when it’s not being used - there needed to be more work than just showing the font’s design space on a specimen page.
There is an incredible amount of behind the scenes effort from an incredibly talented team.
Huge props to each of them.
Re: Icons – Google Fonts
#76Re: Icons – Google Fonts
#77Earlier 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
1kb is a lot for a simple svg icon. That said, if you have a single page app already, you can render as many icons as you want, since you’ll only download them once anyway.
But if you want 5 icons, 5K of SVG beats 55K of WOFF.
Re: Icons – Google Fonts
#78Regular 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/
(2016)? How about not using an ancient article to make a claim about a fast changing space like web dev?
Re: Icons – Google Fonts
#79Interesting that they have icons for "nordic walking" and "electric rickshaw", but nothing for twitter or a tweet.
Re: Icons – Google Fonts
#80Earlier quoted context omitted.
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.
But how do you actually apply the styling? Just add a class to the tag which contains “color:red;” ?
Either fill: currentColor or fill: var(--iconColor, currentColor) should do the trick.
I prefer the 2nd one because it lets me change iconColor whenever I find it appropiate