Fonts in the Homebrewery

The Homebrewery has a few different themes at this point, and each has it’s own set of fonts (or a shared set) which will likely be sufficient for many users but there may be some need to look elsewhere to achieve a particular theme. By the end of this post you should be comfortable importing your own fonts and applying them to different elements.

Table of Contents

• Default Fonts
• Changing Fonts
  • Google Fonts
  • Non-Google Fonts
• Applying Fonts

Default Fonts

The Homebrewery comes with a set of fonts by default which are geared towards matching the style of the D&D 5th Edition core rule books. These fonts will work for many people, even outside of brews specifically made for D&D. Below is a table of the fonts used in the PHB 5e Theme:

Font Family	Default Page Elements	Image
BookInsanityRemake	Base paragraph text, footnotes and page numbers.
MrEavesRemake	H1, H2, H3, and H4 headers.
MrEavesSmallCapsRemake	Note used or really available, explained below.
ScalySansRemake	Paragraph text inside notes, table text, base text in monster stat block.
ScalySansSmallCapsRemake	H5 headers
WalterTurncoat	Artist credit text (in Image snippet).
SolberaImitationRemake	Fancy Drop Case letter after H1 headers.
NodestoCapsCondensed	Used on Cover Pages, but no snippet available yet which uses this font.

Note that as of this writing, the Homebrewery repository is a little confusing in regards to Mr Eaves and Mr Eaves Small Caps. The repository hosts both font files, but only includes one them in its fonts.less file. Using MrEavesRemake in your brew’s CSS will actually pull the glyphs from Mr Eaves Small Caps Remake.woff2.

Changing Fonts

There are generally two ways to handle adding your own fonts into your brew: Using the collection at Google Fonts, or by hosting a font file yourself and linking to it. The second method has many more steps but will offer the most flexbility—however, my recommendation is to find a satisfactory font from Google’s collection and run with that.

Both methods are covered below. For transparency I will admit that I ripped good portions of the below text from the /r/homebrewery wiki pages on the topic, which I currently am the sole author of.

Google Fonts

If you want to add a different font than what is available by default in the Homebrewery, the simplest method to add fonts is via Google Fonts. All fonts used on the web need to be hosted somewhere in the same way images need to be hosted. Like how Imgur.com is a popular image hosting service, Google Fonts is a popular font hosting service. Fonts found on Google Fonts can be imported into just about any website without much effort.

However, Google Fonts does not give you the opportunity to upload just any font you like in the same way users can upload any image to Imgur. Google Fonts is a curated selection of fonts that typically do not have very restrictive licenses (meaning you can generally use the fonts without worrying about copyright issues, attribution, etc, though that is something you have to determine yourself). So if you cannot find a font that you want to use in Google Fonts selection, and you are ready to spend a good bit more time and effort setting it up, you will need to pursue other methods of uploading and hosting ‘web fonts’, which are discussed in the next section.

To bring fonts into the Hombrewery from Google Fonts, you will need to follow a few steps:

1. Find the font you want. You can make it easier my using the filters to narrow down to serif, sans-serif, display, etc, or by weight meaning the thickness of the lines. Filtered or not filtered you likely have a lot of scrolling to do. Open new tabs for candidates so you can easily keep track of which ones you like.
2. Once you have found a font you like in the big list of fonts, click on it to see the details of font. You will see lots of examples of the font in different sizes, styles, and weights assuming the font has those variations (some may no variations, and some may have 12+). For most fonts, you will want at least 4 variations: Regular, Italic, Bold and Bold Italic. If your chosen font doesn’t have these variations available, you can still bold and italicize your font but the glyphs/graphics will be generated by the system rather than the type designer. If you are looking for display fonts (fonts generally used for large graphic headers), you likely don’t need these variations. Be sure the font you are choosing has what you need.
3. Next, you need to add all of those variations to your selected families. Below you can see an example with the Gentium Book Plus font family—there are 4 variations which I have added to the sidebar on the right by clicking the + sign to the right of each variation (now showing as -). The Selected Family now has “Regular 400”, “Regular 400 Italic”, “Bold 700”, and “Bold 700 Italic”. The numbers refer to the weight of the font…smaller numbers (generally 100 being the smallest) are thinner, or lighter, glyphs.

4. The last thing you need to on the Google Fonts page is to change the “<link>” button to the “@import” option under the “Use on the Web” section of the right sidebar. Copy everything inside the <style> tags, not including the tags themselves.
5. In the Homebrewery, open the Style Editor and paste that @import into your brew. If done correctly, you have now told the Homebrewery where to search for your font.
6. The last step is to actually use your font. Since that is the same as using a font from a non-google source, jump to the Applying Fonts section.

@import url('https://fonts.googleapis.com/css2?family=Gentium+Book+Plus:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Symbols+2&display=swap');

Non-Google Fonts

If you can’t find a satisfactory font to use on Google Fonts, and you are ready to do quite a bit more work, you can follow along here. There are a few things I should mention first, though. First, if you are going to use a font you downloaded from somewhere else, it is likely that the license of that font will have a prohibition against making it available where others can use it (a.k.a. redistributing the font), which the following steps will do. Take the time to read the license, which might also require you to investigate the true source of the font. Second, this process will require the use of a Github.com account (free), and you will be uploading the font there to use it in your brew.

Now let’s begin:

1. Find your desired font(s) and download it. It’s likely an .otf or .ttf file. You can install it on your computer if you want, but just be aware that even if you see the font working in the Homebrewery, it won’t work for others on their computers. You need to get that font hosted online first, and to do that you need to convert it to a web font.
2. Go to FontSquirrel.com’s Web Font Generator. Choose the Expert option which will show a lot of customization options. Fortunately, it is possible to save your settings and downloaded them as a .txt file to be used later—and I have uploaded my file here for your use:

3. Upload this config file and your font file to FontSquirrel. There won’t be any indicator that the config file has been uploaded, but the font will be shown. You can upload multiple fonts at once, too. The config file should automatically update all of the below settings. You will need to make one change, though: In the CSS section near the bottom, change your CSS Filename to match the font name if using only a single font, or a name for a group of fonts, for example Gentium-Book-Plus.css or Fantasy-Font-Group.css. Check the box in the Agreement section and click Download Your Kit. Unzip the resulting downloaded folder.
4. Next step is to use Github. You will need an account, and I’m going to assume you have one or can figure that part out. Create a Public repository to put your fonts in (or use an existing repo) and I suggest thinking about how you are going to organize fonts from the start. Upload your new .woff2 file and the .css file that has your font/group name from the FontSquirrel download to your repository. Your repository should look something like this:

5. Click into the .css file with your font/group name, and grab the URL from your address bar. Now to the next website…
6. Go to githack.com and paste in the Github URL you just copied to the first input field in the center of the screen. It will immediately generate two new URLs below. Grab the one on the left (if you are having troubles and going through these steps again, grab the one on the right) and copy it.
7. In the Homebrewery Style Editor, in the first line, add an @import rule using the URL you just copied from githack:

@import url('https://your-githack-url');

At this point you are ready to apply the fonts to different page elements, and the process is the same as if you used Google Fonts, so the steps are continued in the next section.

Applying Fonts

So you have the fonts available to your brew and now you just to need to apply them to the text. This just follows the normal rules for changing fonts, using the font-family css property. You will need to know the name of your font as it is listed in your .css file on Github. So keep that open as long as you need it. But otherwise, here is what your Style Editor might look like:

@import url('https://fonts.googleapis.com/css2?family=Gentium+Book+Plus:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Symbols+2&display=swap');

.page h2 {
  font-family: 'Gentium Book Plus';
  font-style: italic;
  font-weight: bold;
}

.page .monster h3 {
  font-family: 'Noto Sans Symbols 2';
}

Hopefully that covers the “how” of custom fonts. More could be written about how to choose fonts, where to find fonts, and all about licensing concerns but I’ll leave those to other posts (or other blogs entirely). If there are easier ways to accomplish custom fonts, or if I’m wrong entirely, or things change, let me know and I will try to make some quick updates. Until then, happy brewing.