Comments (8)
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.
from dlemstra.
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.
from 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.
from 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.
from dlemstra.
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;
}
from dlemstra.
Updated the file to use the base64 encoded version of the font that you provided. Thanks for your help.
from dlemstra.
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!)
from dlemstra.
Thanks again 👍 Fallback font has been added.
from dlemstra.
Related Issues (1)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dlemstra.