Fonts
Changing the font of your article text or headings is a popular way to more radically change your world's look and feel. There are two methods by which you can import fonts for use in your CSS. The first is to use Google Fonts, which is generally more straightforward, but can be limited in selection. The second, using your own fonts uploaded to GitHub allows for unlimited font potential—so long as you own the font yourself.
Importing Fonts is a bit more complicated than it normally would be doing CSS on your own. As we are not allowed to use apostrophes ( ' ) or quotation marks ( " ) we had to make some adjustments. Step-by-step instructions can be found below. For this example, we will be using Cinzel, which is used in all the headings on the site’s default theme. You can use any font found on Google Fonts.
With this option you are not limited to just the fonts found on Google Font. in return it is a bit more involved to set up and requires some extra steps. Make sure to follow them closely! This option is particularly useful for Asian fonts, that tend to have large CSS font-face sets. (Some can be more than 1000 lines of code.) Using the Google Fonts option may make the little CSS editor in WA slow. Hosting your font on GitHub, can help with that
You can see the Japanese symbols for the character's name highlighted in blue.
Google Fonts
Credit: Damion Otter and LieutenantDebugImporting Fonts is a bit more complicated than it normally would be doing CSS on your own. As we are not allowed to use apostrophes ( ' ) or quotation marks ( " ) we had to make some adjustments. Step-by-step instructions can be found below. For this example, we will be using Cinzel, which is used in all the headings on the site’s default theme. You can use any font found on Google Fonts.
Find a Font
You can use the filters and search field on the right side of the page to help narrow down your search to find the right font.IMPORTANT: Using this method, any fonts with the word "script" in their name do not work on World Anvil. The word "script" is added to the font URL, which will get stripped out by the security filter. This of course applies to all the other words stripped, but they are unlikely to appear in the name of a font.

Get the Link
Hit the + button next to a font to add it to your "cart". Then click on the floating box in the bottom right that says "1 Family Selected" to expand it. Copy the URL as seen in the screenshot below.
Paste that link into a new tab

Copy the "LATIN" version
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; src: local('Cinzel Regular'), local('Cinzel-Regular'), url(https://fonts.gstatic.com/s/cinzel/v7/zOdksD_UUTk1LJF9z4tURA.woff2) format('woff2') ; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; }
Security Filter
REMOVE: Both the local references, the format reference (at the END of the src line) and the rest of the quotes ", ' from the CSS snippet. Otherwise the security filter will break your CSS.
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; src: local('Cinzel Regular'), local('Cinzel-Regular'), url(https://fonts.gstatic.com/s/cinzel/v7/zOdksD_UUTk1LJF9z4tURA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; }The end result should look like this:
font-face {
font-family: Cinzel;
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/cinzel/v7/zOdksD_UUTk1LJF9z4tURA.woff2
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
Add Font to World Anvil
Paste this result into the CSS field in the top right corner of the presentation view.
Use the 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. Make sure to set a backup font family after the coma to ensure anyone can read your articles if there is a technical problem. Font Family CSS - Click to Expand.user-css h2 { font-family: Cinzel, serif; }
GitHack
Credit: Amy Winters-Voss and Simon Edge adopted from MalevolentAuraWith this option you are not limited to just the fonts found on Google Font. in return it is a bit more involved to set up and requires some extra steps. Make sure to follow them closely! This option is particularly useful for Asian fonts, that tend to have large CSS font-face sets. (Some can be more than 1000 lines of code.) Using the Google Fonts option may make the little CSS editor in WA slow. Hosting your font on GitHub, can help with that
- What you'll need
- A legally obtained font file
- A github account
- A link from https://raw.githack.com/
- A bit of CSS
The Example

Setting Up Github
GitHub is a popular code repository platform and used by many open-source projects. It is owned by Microsoft but can be used for free.- Sign up for a github account
- Create a repository and upload your font files. This is basically a folder for your files hosted online. Remember to add the license file you have!
- Go to the Github page for your file. It should look like this:
- Open a text file. Paste this CSS code into it:
font-face CSS - Click to Expand
You can change the default options for how the font is used with these properties. For more information on the font-face options see the link in the sidebar.
@font-face { font-family: YOUR FONT NAME; font-style: normal; font-weight: 400; src: url(YOUR RAW.GITHACK URL) ; }
Setting up GitHack
- Copy the URL at the top of the GitHub page and paste it into the GitHack page. This service ensures that the file is loaded the way the browser needs it.
- Copy the URL under 'Use this URL in production' from GitHack
- 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, but you'll have to remember it when you want to use it.
- Ensure you don't have any illegal characters such as quotes in your CSS code.
- Copy the code into your world's CSS

Use the 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. Make sure to set a backup font family after the coma to ensure anyone can read your articles if there is a technical problem. Font Family CSS - Click to Expand.user-css h2 { font-family: Cinzel, serif; }
Content
CSS Guides
About 86% of modern browsers support WOFF so that's your safest option [for font file format]. If you want to cover everything, then you need a few different types for the different browsers: WOFF and OTF/TTF. And you should always have a web safe font as a fall back in case the user's browser doesn't render the font you supplied. The reason WOFF is better than the other formats is, its compression specifically for web based use! 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.
Open Font Library
Font Squirrel
Comments