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 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.
Google Fonts Step 1
  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.
Google Fonts Step 2
 
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!
5 May, 2021 18:07

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? ... If we value the freedom of mind and soul, if we're partisans of liberty, then it's our plain duty to escape, and to take as many people with us as we can!" —J.R.R. Tolkien
5 May, 2021 18:37

Here: Base Font Color

Check out my world World Behind the Veil!
20 Jun, 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.

7 Jul, 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.


The wisest person I know once called me a glorious pinnacle of human mediocrity. I feel this is more or less accurate.   (Ignore what my username says. I am far from grand, let alone a master).
18 Jul, 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!
8 Mar, 2022 17:34

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.

8 Mar, 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!
27 Mar, 2022 03:36

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,"
27 Mar, 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!
28 Mar, 2022 15:03

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,"
Grandmaster Tirjasdyn
Michelle Norton
28 Jul, 2022 01:39

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?

7 Aug, 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!