search

wintermute-cell / magick.css

magically playful, yet simple styling. all in one file.
https://css.winterveil.net
MIT License
934 stars 14 forks source link

The rendering is bad when trackers are blocked #2

Open ogregoire opened 6 months ago

ogregoire commented 6 months ago

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 commented 6 months ago

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

ogregoire commented 6 months ago

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.

IMG_6627

wintermute-cell commented 6 months ago

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 commented 6 months ago

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

xiamuguizhi commented 1 week ago

@wintermute-cell This is a great tool because Google Fonts cannot be used normally in China. Besides self-hosting or using a reverse proxy, the only solution is to replace them with system fonts that are available on Windows, macOS, and Linux!