Allow importing external stylesheets

bert

While Kagi allows you to customize CSS, it does not let you import arbitrary external stylesheets. Safari’s error message is Refused to load <URL> because it does not appear in the style-src directive of the Content Security Policy. This means customizing the fonts, e.g., by using ones from Google Fonts, is not possible. It'd be great if this restriction could be lifted.

Celsiusss

Not sure if actually a bug, but many custom CSS sheets loads external fonts from Google.

This is typically done by having a @include in the CSS like so:

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap')

This will load a CSS file from https://fonts.googleapis.com, which defines the necessary font-faces. They might look like this:

@font-face {
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redhatdisplay/v19/8vIS7wUr0m80wwYf0QCXZzYzUoTg-A6jTY8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

A font will be loaded from https://fonts.gstatic.com.

The CSP from kagi allows stylesheets from https://*.googleapis.com to be loaded, meaning the stylesheet containing the font-faces will be loaded. But fonts from https://fonts.gstatic.com are denied, so the font will fail to load.

JS Console showing the CSP error:

The font files from https://fonts.gstatic.com should be allowed to load, to allow custom fonts in user defined CSS.

The CSP should include https://fonts.gstatic.com in font-src.

silvenga

I would propose adding https://fonts.bunny.net/ instead of Google Fonts though (Bunny proxies Google Fonts, breaking Google tracking signals).

(although, adding any external party might be a little iffy from a CSP perspective)

Celsiusss

The reason I made this as a bug report in the first place, is because the top suggested user theme on this page tries to load a font, which does not work.