Linux - Installed icon font, doesn't render

Question

I installed the icon font https://materialdesignicons.com on my Antergos installation, but it doesn't seem to render. Running fc-list shows it on the list of installed fonts. I can even use gucharmap and see the glyphs. But trying to display them to copy shows nothing or strange caracters, as seen here: What could be wrong?

Answer 1

I read your question again: There seems to be a misconception of how font icons work.

So, how do they not work? Using copy/paste and nothing but.

How do they work? It’s a special font that doesn’t have regular character glyphs. So when you type A, you may actually get a Microsoft Access icon or whatever.

Let’s take for example Font Awesome. It’s made for use on the web and comes with CSS styles. For example, when you use the Amazon icon, the following CSS class is used:

.fa-amazon::before {
    content: "\f270";
}

So it’s using the character at code point 0xF270. When you try to view this character in another font, you’ll most likely see nothing or a placeholder:



According to unicode-table.com this code point is located in the so-called Private Use Area. There are no standardized characters there.

Only when the font used to display this character is Font Awesome will you see the Amazon icon.

All this also applies to the font you have. The “text to copy” field does not use the icon font to display the character, so you will never see the selected icon there. Instead, you will see what appears to be “garbage text”.

Here’s the CSS class for the Ethernet icon:

.mdi-ethernet:before {
  content: "\F200";
}

How to use the font elsewhere? You’d open LibreOffice Writer or whatever, and paste the “garbage text” there. Now you need to select the pasted text and change its font to the icon font, which should appear in the font selection like any other font. Only then will you see the desired icon.

Answer 2

The problem was the font Adobe Blank that was installed on my system (don't know why). From Adobe itself:

Adobe Blank is a special-purpose OpenType font that is intended to render all Unicode code points using non-spacing and non-marking glyphs. [...] it serves the following two purposes:

• Invoking this font, as a temporary measure, prevents OS- or application-level font-fallback from kicking in before the intended font can be rendered.
• Related to the above, using the font allows one to detect when a web font is actually loaded, which is arguably a hack to overcome a limitation in CSS.

Disabled this font and everything is working perfectly. Maybe it's not the best solution, but it is the best solution I have for now.