Fonts

Restructuring the Codex

We are currently moving articles around and changing the general structure of the Codex. Please come back later if you get lost!
 
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.
  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.
 
Google Fonts Step 3
 

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;
}
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.
 
@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;
}


Cover image: Photo by Kai Gradert

Comments

Please Login in order to comment!
May 5, 2021 18:07 by Lenna Richards

Is there a way to just change the color of the font within the already set theme?

"Fantasy is escapist, and that is its glory. If a soldier is imprisoned by the enemy, don't we consider it his duty to escape?" —J.R.R. Tolkien
May 5, 2021 18:37

Here: Base Font Color

Check out my world World Behind the Veil!
Jun 20, 2021 12:45

Themes use variable names for colours; if you overwrite the values, it'll change the colours anywhere they're used. Colour names vary by theme, but you can find them using your browser's dev tools (F12 on Firefox or Chrome), and the scope it applies to. EG, in the Worldember theme, font colours are defined like this: .user-css, .user-css-extended, .user-css-presentation, .user-css-map-sidebar, .page, .map-context-user, .user-css-map, .tooltipster-content { --ember-warning-l: #f2f292; --ember-warning: #dfba4f; --ember-warning-d: #d97a36; --ember-danger-l: #f45232; } If you're using Worldembner, you can just copy/paste that snippet into the custom CSS area and change the hex codes to whatever you want.

Jul 7, 2021 16:39

Is there a way to change the font color for headings, sub-heading, etc? I know you can change the font color of your prose/article content under World Settings->Styling->Basic, but what about the headings? For context, I'm using the "Eldritch Horror" preset, but want to change the neon green headings/titles.

Jul 18, 2021 08:48

There is currently no setting for this no. The way to go is to customize it via CSS. A separate setting for headings is planned I believe.

Check out my world World Behind the Veil!
Mar 8, 2022 17:34 by Stephen Knizek

I am admittedly uneducated in the ways of coding, but I do know that while I seem to have Times New Roman (or something appearing to be TNR) in the text of my planned first article, it seems that in view the Title at the top of the article seems to be in some form of Old English or Gothic font that I have trouble reading. I'm not saying that people won't be able to read the different font, just that it doesn't fit the aesthetic I think of with my article. Could you explain to a luddite how I can change the title's font to that of Times New Roman.

Mar 8, 2022 18:21

Hi, that is a question of adding a CSS rule for your titles. How exactly that rule looks like depends on your world and chosen theme. There are some fonts available by default so you do not have to actually add them. Check the other guides on CSS.   It would be a lot easier to help you on the Discord server instead.

Check out my world World Behind the Veil!
Mar 27, 2022 03:36 by Scott Stokes

I bought some D&D type fonts at GenCon in the 90s, is there a way I can use them in my articles?

Happiness is "the exercise of vital powers, along lines of excellence, in a life affording them scope,"
Mar 27, 2022 09:13

Yes, check the GitHack workflow in the guide above. You have to upload the files to GitHub and then can make it available. (there are other versions to do this you could google).

Check out my world World Behind the Veil!
Mar 28, 2022 15:03 by Scott Stokes

Thank you so much, with your help, I got it all setup.   Cheers,

Happiness is "the exercise of vital powers, along lines of excellence, in a life affording them scope,"
Jul 28, 2022 01:39 by Michelle Norton

I can seem to get this to work. The fonts don't load unless I open the css panel and hit enter or otherwise start editing. Is there something I'm missing?

Aug 7, 2022 15:06

This means they are broken by the security filter. Make sure you made all the adjustments detailed in this guide. In most cases people missed a ' or " in their code.

Check out my world World Behind the Veil!
Nov 12, 2022 23:36 by Billith Frostwolf

I might be missing something, but I've been trying for months to change the font using the steps in this guide several times and still the fonts are the same. I don't know what else to do

Nov 13, 2022 05:26

Hi!   It would be easier to help you troubleshoot on Discord with some screenshots of what you are doing. The most common issue is the quotes missed or that the font is not correctly used in the CSS to apply them to the page elements.

Check out my world World Behind the Veil!
Aug 31, 2023 06:22

Thank you, I finally got this to work. How do we know the name of the "elements" i.e., world-title, h2, etc.? I want to change quite a few.

Aug 31, 2023 17:43

Update: I found the Inspect function to open of the panel on the right. My problem now is that anything I change reverts back to the original format when I refresh my browser. I have a modified Wild Wild Steam theme. I am trying to change the background gradient for the world title, along with the h2 tile fonts. So far only Timelines has changes. When I inspect element on the Table of Contents and uncheck the box for font family, they change, but revert with a page refresh. I tried clicking the style CSS link and copying and pasting into my world css but that didn't work.

Aug 31, 2023 18:58

That usually means that the security filter removes some of the CSS you are adding. Check for the article below and then replace any CSS selectors that are removed by the filter.  

CSS on World Anvil
Generic article | Oct 30, 2023

Explains how CSS can be used on World Anvil and any special considerations.

Check out my world World Behind the Veil!
Aug 31, 2023 20:13

Thank you. It wasn't one of those, but some previous font code that was getting in the way. I deleted it, changed the font in the elements tab and copied all of it together and now my world title is perfect. I'm going to continue, I will chime in if I run into any road blocks.   Thanks again,   Ryan

Sep 15, 2024 19:27 by A. Xyvius Scales

I have used the GitHack process in the article and I have successfully changed the font of an element (ie. h4) using it. However, I would really like a way to just take a selection of text within the body of a paragraph and change the font of just that selection. Sort of like you can take just a small selection and make it bold, or underlined. Is there a way to accomplish this?

|Xyvius Scales