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

[xiamuguizhi]

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

[travisby]

If I wanted to go a similar route, is there an easy way to do that with the import 'magick.css' loading method (any JS magic I can run to modify an imported CSS file?), or would I need to download & keep a local copy that I modify?

Loving magick.css so far! Beautiful, but Google Fonts is one of the last things hurting lighthouse scores :)

[wintermute-cell]

Yea, google fonts are still a pain point for me.

For your use case @travisby, i think the easiest approach would be to simply override the font family like this, just make sure its loaded after magick.css:

    @font-face {
      font-family: 'Averia Serif Libre';
      font-style: normal;
      font-weight: 300;
      src: url('./your-font-file.woff2') format('woff2');
      font-display: swap;
    }

you could even swap in an entirely different font i think. Hope that helps!
Cleaner would of course just be a local copy, magick.css is just a single file after all :)

[xiamuguizhi]

@wintermute-cell
@travisby

https://chinese-font.netlify.app/en/ The Chinese Web Fonts Plan

This is an open-source, comprehensive, and all-scenario web font solution.

Let me know if you'd like further adjustments!

[travisby]

Yea, google fonts are still a pain point for me.

For your use case @travisby, i think the easiest approach would be to simply override the font family like this, just make sure its loaded after magick.css:

    @font-face {
      font-family: 'Averia Serif Libre';
      font-style: normal;
      font-weight: 300;
      src: url('./your-font-file.woff2') format('woff2');
      font-display: swap;
    }

you could even swap in an entirely different font i think. Hope that helps! Cleaner would of course just be a local copy, magick.css is just a single file after all :)

Thanks for the suggestion!

I started looking towards copying the fonts, and found that Cloudflare provides a mechanism for that! If you use the <link> version of Google Fonts rather than @import, CF should take care of it.

I ended up copying in magick.css directly as you suggested (although I'm disappointed I won't get updates from your awesome library!) and removing the @import and adding in <link> and Cloudflare is indeed optimizing it away.

I wrote a little in https://gitlab.com/travisby/travisby.dev/-/blob/main/src/assets/styles/README.md?ref_type=heads on how I made the change, if it's helpful to anyone else!