asciidoctor / asciidoctor-browser-extension

:white_circle: An extension for web browsers that converts AsciiDoc files to HTML using Asciidoctor.js.
https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia
MIT License
220 stars 50 forks source link

CSS refers to font not necessarily available on the system #651

Open odrotbohm opened 1 year ago

odrotbohm commented 1 year ago

The asciidoctor.css of the default theme uses

body { …, font-family:"Noto Serif","DejaVu Serif",serif; }

which renders in Times New Roman on systems that don't have Noto installed. Does it make sense to bundle up the fonts used in the themes?

mojavelinux commented 1 year ago

Good observation. The default stylesheet is written with the assumption that those fonts will be loaded as web fonts. (See https://github.com/asciidoctor/asciidoctor-browser-extension/blob/main/app/css/themes/asciidoctor.css). And that's precisely what Asciidoctor's HTML converter does. As I understand it, however, a browser extension cannot load fonts directly from the web (or it can but we don't want it to?). If that's the case, then they should probably be bundled so that they can be loaded locally...at least by the default stylesheet.

ggrossetie commented 1 year ago

a browser extension cannot load fonts directly from the web (or it can but we don't want it to?

CSP policies, Google Chrome won't load Google Fonts because it's unsafe 🥲 My hope was that it will eventually be added in a allow-list but I guess we will need to bundle fonts.

We might want to use https://www.npmjs.com/package/@fontsource/noto-serif to make it easier to manage.