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.

Google Fonts

Credit: Damion Otter and LieutenantDebug
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.

Find a Font

You can use the filters and search field at the top of the page to help narrow down your search to find the right font. After selecting one, you'll see all the available styles for that 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 style to select it. This will open a sidebar on the right called "Selected Families. Click on the "@import" option and 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'; # Make sure to remove the single quotes!
    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;
}

Contents

• Google Fonts
  • Find a Font
  • Get the Link
  • Paste that link into a new tab
  • Copy the "LATIN" version
  • Security Filter
  • Add Font to World Anvil
  • Use the Font
• GitHack
  • The Example
  • Setting Up Github
  • Setting up GitHack
  • Use the Font

Common Fonts

If you want to make use a common font, you do not need to use Google Fonts or Githack.
Instead, you can use the name of your desired font in the property "font-family".
Check out a list of common fonts here.

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.

— Simon Edge

Finding Fonts

Google Fonts
Open Font Library
Font Squirrel

@font-face Doumentation

Mozilla

Licences

When choosing a font it is important to consider the licence on the font you want to use. Make sure you are allowed to use the font in the way you wish to use it.

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'; # Make sure to remove the (red) single quotes!
    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 MalevolentAura
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

• 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

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

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.

1. Sign up for a github account
2. 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!
3. Go to the Github page for your file. It should look like this:
   
4. 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

1. 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.
   
2. Copy the URL under 'Use this URL in production' from GitHack
3. 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.
4. Ensure you don't have any illegal characters such as quotes in your CSS code.
5. 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;
}