The rendering is bad when trackers are blocked

[ogregoire]

Apparently there are some fonts that are hosted on tracking websites and thus, when blocking the trackers, your showcase website https://css.winterveil.net/, renders really badly.

[amatiasq]

Could you provide a screenshot and a capture of the networks tab to see the blocked resources?

[ogregoire]

This report follows my opening of your page on Firefox Focus on iPhone (my default browser on iPhone, to maximize privacy). That browser has no developer tools.

What is blocked is very likely fonts.gstatic.com or fonts.googleapis.com. I could reproduce the issue when using NoScript on desktop Firefox and explicitly blocking fonts.gstatic.com.

Here's a screenshot of my screen (not the developer screen) on iPhone to show the rendered page.

[wintermute-cell]

hey, thanks for the report!

Generally, I'm with you on this @ogregoire. I don't like using google fonts either.
I'm still not sure how I want to handle this here, so this issue will stay up until I've made concrete decision. This is my current stance:

For my sites, I'll replace Google Fonts in magick.css with self-hosted ones. Yet, for the css file in this project, I'll default to Google Fonts for ease of use. This decision supports non-technical users for whom self-hosting fonts could hinder usability. Keeping magick.css user-friendly with minimal setup is a priority.

One thing I will do as soon as possible is improving fallback typography. In cases like yours, where the browser selects an ill-fitting system font, readability suffers. I'll have to find suitable, widely available local fonts as primary fallbacks. This way magic.css could provide a positive experience even when the original typography is blocked.

[wintermute-cell]

NOTE: For anyone in need of a quick and simple way of translating the google font import to locally hosted method, there is a great open source tool to convert a google font link to base64 encoded font-face definitions: https://github.com/amio/embedded-google-fonts