Fonts - Hosting on Github

I'd seen the note about hosting fonts on github to use for our WA worlds in the WA codex. But hadn't been able to figure it out. Sunrunner4kr was kind enough to share quick notes on how to do this and gave permission to share. So I'm typing up specific directions here to organize the steps before I post it in the WA Codex.   This was particularly important to me. The open font 'Noto' I needed to use for the Japanese characters for Liminal Chronicles was a huge amount of code--1K+ lines. YIKES! (Any Chinese, Japanese, or Korean font is really big.) It made the little CSS editor in WA so slow! Getting this setup really helped make the WA CSS editor usable again for me.  
What you'll need:
A legally obtained font file
A github account
A link from https://raw.githack.com/
A bit of CSS
 

Our example:

You can see the Japanese symbols for my character's name highlighted in blue.
   

Steps

- Sign up for a github account   - Create a repository (Basically a folder for your stuff. See link for more info.) And upload your font files. (It won't hurt to upload any license files for proof you have the right to use the font.)   Here's how to create a repository.   If you want a folder in that repository, here's how to do that.   - Go to the github page for your file. It should look like this:

  - Open a text file. Past this CSS code into it:
@font-face{
font-family: YOUR FONT NAME;
font-style: normal;
font-weight: 400;
src: url(YOUR RAW.GITHACK URL) ;
}
You can change the options in the code above for say bold if you like. For more information on the @font-face options see this W3 Schools page.   - Copy the URL at the top of the github page and paste it into the https://raw.githack.com/ page.

This allows the file to be retrieved as the proper type, in our case a font file, instead of a plain text file.   - Copy the url under 'Use this URL in production' from raw.githack.com.   - Paste it into the text file with the font-face CSS code, replacing 'YOUR RAW.GITHACK URL'. Also replace the 'YOUR FONT NAME' with a name that makes sense to you, usually the name of the font. (Times, Helvetica, Noto, etc.)   - Copy the code into your world's CSS.

Now you're ready to use your font!  

Using your new Font

To use your new font, it's now a simple matter of setting the "font-family" property of any element to the name of the new font. This should match the "font-family" property in the bit of code you just pasted in.  
.user-css h2 {
  font-family: Cinzel, serif;
}
     

Sunrunner4kr's Notes

FYI 86% of modern browsers support WOFF so that's your safest option. If you want to cover everything, then you need a few different types for the different browsers: WOFF, OTF/TTF   And you should have a web safe font as a fall back in case the user's browser doesn't render the font you supplied.   WOFF is compressed for the web, which is why it's better.   Bear in mind every time you call a font over CDN(GitHub) it takes time. So the more fonts you call, the slower the web page will render.

For Guild Members


CSS modification is for guild members (Journeyman and above). If you're not subscribed at that level and wish to do so, you can on the membership page.


(Journeyman icon property of World Anvil.)

 

CSS Reference


If you'd like to learn more about CSS, check out FreeCodeCamp and w3schools' CSS Reference.
 
The WA Codex is a good place to start learning about how to play in WA.
 
WA's discord #guild-css-help channel is also great. I hang out there just to learn from what people ask about.



Cover image: Hacks and Help Cover by krzysztof-m

Comments

Please Login in order to comment!
Powered by World Anvil