README Font not Loading?

[SethFalco]

On Firefox, the bottom gets cropped off, and in all user-agent it behaves as if the "Hack" typeface isn't available.

I think it's because of GitHub's Content Security Policy:
default-src 'none'; style-src 'unsafe-inline'; sandbox

• style-src is set to unsafe-inline, would disallow loading external styles.
• default-src is set to none, since font-src hasn't been set explicitly, it's implicitly set to none which would disallow @font-face.

Linux / Firefox

Linux / Chromium

Windows / Chrome

[dlemstra]

Thanks for reporting this. I wonder if this is due to setting on your machine. It works on my Windows machine(s) (desktop and laptop). I should probably add a fallback font.

[SethFalco]

It's possible. Though I tested on Linux, and the Windows example was tested by a friend on their device. I just made my partner test this on her Windows machine using Chrome, and it also looks as above.

I assume this may be because you have the Hack font installed locally, so it can be found even if loading the external resource fails?

Or if that's not the case, then I'm not sure what's wrong, but regardless what you suggested with the fallback (monospace) would be good anyway.

[dlemstra]

That is indeed why it works on my machine :) The font is indeed installed on my machine. Will need to figure out if I can load an external font and otherwise I will switch to another font.

[dlemstra]

I have moved part the external css to the file. Still works on my machine. Does it now also work on yours? Will add a fallback font in another commit.

edit: And of course I was testing with the .svg file instead of the .html file. Looks like loading fonts from an external source is not possible.

[SethFalco]

I've found a way to load an external font if you're really into it.

Now that you've moved to a @font-face, you can download and base64 encode the font to make that the src instead.

@font-face {
  font-family: 'test';
  src: url('data:application/font-woff2;charset=utf-8;base64,...') format('woff2');
  font-weight: 400;
  font-style: normal;
}

[dlemstra]

Updated the file to use the base64 encoded version of the font that you provided. Thanks for your help.

[SethFalco]

I'll close the issue then. It looks good everywhere except when served from raw.githubusercontent.com.

Probably still worth adding fallback fonts, namely monospace:

• This will make it look presentable on raw.githubusercontent.com, which blocks your font.
• If GitHub makes their CSP stricter, at least it can still be monospaced.
• It'll still look presentable to users that block downloadable fonts. (Still applies to base64 encoded fonts!)

[dlemstra]

Thanks again 👍 Fallback font has been added.