It is frustrating to see all the posts about icon fonts closed before they have been properly answered, so before this gets flagged as duplicative, please note that what I am looking to solve is the use of a custom font for icons (Material Icons by Google) that is compatible with IE/Edge and does not use anything other than HTML/CSS (because, seriously, that’s all this should need as an MVP feature).
First off, as of this post, IE and Edge only fully support the WOFF font file format. Great news considering WOFF and WOFF2 are the smallest sized font file formats, yay! Bad news, you need to use the unicode to call the glyph.
On the other hand, TTF and OTF formats use strings of characters to call a substitute, singular glyph. As an example, if I span
arrow_forward with the TTF/OTF version of Material Icons, it will replace it with a
–>. If I wrote
arrow-forward instead, it’d do nothing.
This differs from how custom fonts (therefore, adding Material Icons or Font Awesome easily and quickly) are added to a Webflow project: in that, you upload the font files you want to use and then apply them in the Designer Style’s view. [As of this post, you cannot apply more than one font to a class without doing so by injecting a duplicative style line in the head or body. That’s quite a pitty.] With this method, you MUST use a glyph string (as noted above). Since this is not how WOFF works, your icons render fine on nearly every browser save for the cast-off children browsers, IE/Edge.
So, here I am, left with a serious problem for Internet Explore and Edge. How does one plug in, say,
\E5CD inline and have it call the appropriate glyph for the custom font you’re calling?
PS. I’d like to note that I’ve tried this with the EOT, OTF, TTF, WOFF, and WOFF2 formats for Material Icons, as well as using the actual Google stylesheet link itself to absolutely no success. I’ve used both a font-family list that goes something like this
font-family: 'Materialicons1 regular', 'Materialicons2 regular', 'Materialicons3 regular', 'Materialicons4 regular', sans-serif !important; with each numerical version being a file format I added to the Custom Fonts list, as well as calling the Google-hosted stylesheet.