Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The rendering is bad when trackers are blocked #2

Open
ogregoire opened this issue Mar 22, 2024 · 5 comments
Open

The rendering is bad when trackers are blocked #2

ogregoire opened this issue Mar 22, 2024 · 5 comments

Comments

@ogregoire
Copy link

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
Copy link

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

@ogregoire
Copy link
Author

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
Copy link
Owner

wintermute-cell commented Mar 25, 2024

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
Copy link
Owner

wintermute-cell commented Mar 25, 2024

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
Copy link

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants