[Suggestion] Navigation, buttons, and other links, should be font independent.

I block web fonts on my browser for security reasons.

In most cases that makes little difference in the pages I visit. In a few instances though, where font characters are used in links and buttons, it makes the page harder to navigate. So it would be great if UX was decoupled from the font used.

[azerupi]

We are using font-awesome for our icons, if the font is blocked I am not sure what we can do about it?

I don't want to throw out font-awesome over this issue, because to me it looks like an unusual situation. But if there is an easy fallback we can implement, that is something we would do.

[budziq]

Hmm probably we could settle on one of the following fallbacks:

• textual description
• unicode glyph
• svg

We could make this issue "help wanted" and post to TWIR ;)

[azerupi]

Hmm probably we could settle on one of the following fallbacks

Before we can we need to detect the absence of font-awesome though. I haven't looked into it, so I don't know if it is possible and easy.

We could make this issue "help wanted" and post to TWIR ;)

I would feel bad to post an issue to TWIR when it is not mentored. :)

[budziq]

I would feel bad to post an issue to TWIR when it is not mentored. :)

Right I tend to forget about such details. I somehow got locked on this TWIR idea to attract contributors. Hmmm, maybe just post a "run rystfmt and clippy over the source code" issue?

[ayushnix]

It looks like there hasn't been much interest in fixing this issue. I'd like to mention that I block web fonts as well and all the mdbook websites I visit look like this

The icon fonts are missing and there's no textual alternative to understand what the buttons are supposed to mean.

It looks like Font Awesome does provide SVG coden for its icons so maybe mdbook can start using them instead? It would go a long way in fixing mdbook documentation websites on my web browser.

[mgeier]

I ripped off the style of mdBook for my Sphinx theme https://insipid-sphinx-theme.readthedocs.io/, but I used SVG icons instead of the font.

I don't know if that helps, but at least you have a site for comparison, which should also work when blocking web fonts.

[WhyNotHugo]

I also block fonts as an accessibility reasons. A large portion of websites out there simply use fonts that are too hard for me to read, and disabling remote fonts substantially improves legibility on the web. I also noticed a huge improvement in performance after disabling remote fonts.

Sites generated using mdbook are one of the major problems I keep encountering, due to abusing a custom font to include navigation icons.

Abusing custom fonts to render images like this is a strong anti-pattern. Browsers have supported SVG files since 2012, perhaps that is the best solution in this case? I'm pretty sure that the current hack won't work in pre-2012 browsers anyway, so the supported browsers shouldn't really change.

There are aproximately 13 icons being injected via fonts right now. From what I can tell, most icons are under 1kB. Do the maintainers here think it's best to include separate SVG files, or inline the SVGs into the templates? I can create a patch for either approach.

[WhyNotHugo]

Gentle ping.

I'm happy to try and tackle this myself, but would appreciate some feedback on which approach sounds best.