search

google / fonts

Font files available from Google Fonts, and a public issue tracker for all things Google Fonts
https://fonts.google.com
18.24k stars 2.62k forks source link

Demos not working, variable fonts not working, all is confusing #4536

Closed ygoe closed 2 years ago

ygoe commented 2 years ago

Describe the bug I found the Material Icons through a series of web searches and ended up with these links:

I don't understand the difference between the last two. The description sounds similar (both have icon fonts that I can host myself) but they seem to have different sources or options. This is the confusing part.

Then, the codepen samples for the Symbols don't reproduce. They do show icons in some cases, but where the explanation suggests that there should be a configuration difference, none is visible. All samples with the same icons in two rows show exactly the same style. I'm not sure if this is a Firefox issue or this page is just plain outdated, broken and unmaintained. The page also jumps up and down on its own when reading near the end.

Then, I tried to download the fonts and use them. I do see icons, that's the good thing. But the results from the Google Fonts CSS file are irritating. They contain different woff2 URLs for the same @font-face settings. How is that supposed to work? In Chrome, I even get only a single file not two as in Firefox. All font-face-blocks have a comment /* fallback */ above them. There is no not-fallback. I believe that this thing is broken, too. I can't explain it better because I understand too little of variable fonts. I'd expect to get a single woff2 file that contains all the axes in it and I could use them with CSS properties. But that doesn't work with any of the files provided.

To summarise: I need a clear explanation of the difference between Icons and Symbols, I need a way to download the variable font (maybe limited to certain axis/value ranges), and I need a comprehensible description of how this should be used with HTML and CSS in real browsers. None of that exists. And none of what I understood works, except for the basic icons in a single style with the 60 MB ZIP download.

My background is from Font Awesome and similar projects. I understand that this font uses ligatures instead of CSS classes for codepoints. I like this because it saves a ton of CSS. But the rest of the described style config seems non-existent to me.

ygoe commented 2 years ago

PS: One of the pages links here: https://github.com/google/material-design-icons

This repo only contains the Regular style as font file. Where do the other styles come from? Weight from 100 to 700, outline and filled? The master branch even contains styles such as "outline", "round", "sharp" and "twotone". That's a whole different thing! The file sizes are around 40 kB, while the files from Google Fonts API all have around 200 kB. I'm even more confused than when I wrote the issue. It's clearly a mess!

I did get some font files from the Google Fonts API but it's a laborous procedure. The URLs are:

Then the file URL referenced from the delivered CSS can be downloaded directly and saved under a recognisable file name. These files can be used with @font-face in the usual way. No variable fonts. But at least usable icons in different styles. There's just no official download for them, you have to "hack" your way through the API. And those files are pretty big (200 kB each). I can't determine how many glyphs/icons they contain.

And no icon search anywhere around, just a full listing on https://fonts.google.com/icons which I have to scroll to the end to load and then use my browser's find function to look for the right names.

RosaWagner commented 2 years ago

You may have an answer there: https://github.com/google/material-design-icons

ygoe commented 2 years ago

@RosaWagner Yes, they updated that repo and their website days after I found the symbols. Usually such things happen at the same time but here all explanations were late, and missing. It's clearer now.