Stardew Valley Font Editing Guide

Stardew Valley Font Editing Guide

Learn how to extend Stardew Valley’s font files for localisation support!

What you need

  • XNBNode (For extracting and packing ‘.xnb’ files)

  • Gimp or another image editor

  • Notepad++

Extracting the Fonts

First of all you have to extract the font files by using XNBNode. The fonts are located at ‘/Content/Fonts’ in the Stardew Valley folder. Extract them by using the following command:

xnb_node.cmd extract “STARDEWVALLEY_FONT_FOLDER” “OUTPUT_FOLDER”

Now go to your output folder, it should look like this:

For each font there is a PNG-file containing all the glyphs and a YAML file containing information about glyph placement, cropping and kerning. First of all, let’s start with the graphical editing of the fonts.

67ec824904.png
67ec824904.png

Adding graphical glyphs to the font

This part is pretty straight-forward. Open the font you want to edit by using your image editor, it should look like this:

18b496f486.png
18b496f486.png

The arrangment of glyphs might seem weird at first, but the glyphs are sorted like this to have a file which is as small as possible. You dont have to care much about it though.

Before you edit the image itself you have to get an important information: “What will be the maximum height a character can have?” For this open the YAML file linked to the PNG.

Scroll until you reach the Segment saying “cropping:   #!List<Rectangle>”.

Here pick the highest “height” value of all entries, the same value will appear many times.

After you know the value, let’s go back to image editing.

Depending on how many glyphs you have to add, increase the height by multiples of the maximum line height like this:

3987e0d3ea.png
3987e0d3ea.png

Now you can start adding new characters to the new space you added. The fonts have a really low resolution so it shouldn’t be to hard. After some time and effort you probably end up with something like this:

fb141193eb.png
fb141193eb.png

For further steps, I really recommend you to create an extra layer where you color the bounding box of each single character. It will help you a lot for the later editing of the yaml file. For example, I apply the following layer to confirm that my coordinates and width and height attributes are all correct later on:

d07104c15c.png
d07104c15c.png

You can repeat this process for all fonts you are planning to edit.

After you are done, it’ s time to finally edit the YAML-File.

Adding the neccessary information to the YAML

The YAML file contains multiple segments:

  • An xnbData-Segment (Just leave it as it is)

  • A segment containing information about the location of the glyphs and their width and height.

  • A segment for cropping information

  • A list of characters available for ingame texts

  • A segment containing kerning information

As you can see, this will be a little bit more complex than the image editing but it is really just a matter of patience.

First of all go the the list of characters. Here you have to add characters and more important: In the right order.

Unicode sorts it’s charcters by using so called “character blocks” each containing characters associated with a certain region, culture or land. For example if I want to add support for german characters, I would need to add characters from the character block called “Latin-1 Supplement”.

You can get a good overview on the following site:

http://www.isthisthingon.org/unicode/?page=00&subpage=0&hilite=000C4

Depending on the translation you are working on you probably have to work with different character blocks. Note the last letter you have to use for your language.

For german this would be the glyph ‘ü’ (Latin Small Letter U with Diaeresis)

If you add characters to the list in the YAML file, you just have to make sure that the letter you noted is the last you add to it. If this is not the case, the game will crash as soon as one of the new letters is called.

My edit looks like this:

        - "?" #!Char

        - "?" #!Char

        - "ü" #!Char

        - "?" #!Char

        - "?" #!Char

        - "?" #!Char

        - "ü" #!Char

After you added your characters to the list, it is important to remember the exact order of characters for further editing. For the next step you have to edit the glyph list above the cropping segment. Scroll to the end of it and add the following code for each glyph:

        -  #!Rectangle

            x: GLYPH_X

            y: GLYPH_Y

            width: GLYPH_WIDTH

            height: GLYPH_HEIGHT

Remember the trick with the bounding box layer? Go back to your image and then select the region for each single character:

12b96d0922.png
12b96d0922.png

When you do this take a look at the sidebar in Gimp. You can just copy the information for each glyph - It is pretty easy this way. 😉

After you are done, let’s take a look at the cropping segment.

First of all: It is not a “real” cropping segment, it is actually data which alters the position of characters a little bit.

Just make sure that the height attribute is always the same and that the width equals the total character width. For x and y coordinates just take a look at similar letters and copy the information. You can always adjust the font a little bit if you are not satisfied with the result. The cropping segment allows pixel perfect positioning of letters.

The last segment is for kerning - A typograhical customization for some fonts. It is a list of three-dimensional Vectors which adjust letters based on neighbour-letters. For the beginning you can also just use values from other letters and customize it later. Correct kerning can be a little bit tricky and isn’t even necessary - experiment with it if you have the time. 😉

After you edited all the segments which I mentioned it is time for error handling.

If you are not used to YAML you probably don’t know that tabs are not allowed.

If you are using Notepad++, use Ctrl + F then go to “Replace”.

Activate the extended search mode and input ‘\t’. Leave the replacement empty and click on “Replace all”. Gotcha! All tabs are removed and you should be ready to go.

b17ef337e1.png
b17ef337e1.png

You can check your YAML file for further errors online:

http://yaml-online-parser.appspot.com/

If there are no errors you can finish editing and repack your new font file.

Just use XNBNode with the “pack” command:

xnb_node.cmd pack “EDITED_FONT_FOLDER” “OUTPUT_FOLDER”

If there are also no errors, copy the font into the /Content/Fonts folder.

Stardew Valley should now be able to handle some extra characters. 😉

Editing the dialogue font

The dialogue font is located in /Content/LooseSprites/ and called font_bold.png.

This font is even easier to edit, as you only have to edit and expand the graphic.

Remember character blocks in Unicode? The dialogue font is a list of glyphs sorted

by using these character blocks.

Each glyph has a size of 8x16px. If you are using Gimp, you can activate the grid

which might come in handy when editing the font. Each line fits 16 characters.

As the graphic follows a strict order, the size of the image musst be increased

so it can fit the neccessary character blocks for your translation.

If I want to implement the complete Latin-1 Supplement the height of the font has

to be 192px as it is the second unicode character block. (These blocks

have both 96 characters, but blocks can contain more characters!)

When you altered the height all you have to do is adding the right glyphs to the

right cells in your 8x16 grid. It is really easy. 😉

If you are done just repack again and you should be fine.

Leave a Comment

Your email address will not be published.