Changing font sizes - cjrose/voidHUD GitHub Wiki

Prerequisite Information

If you do not like certain sizes of fonts, and would like to change them, then this guide is for you. Please note that changing fonts is not a simple task, and is pretty involved for those who do not know anything about editing HUDs.

Before we begin, you should have downloaded & installed one of these two applications. Personally, I prefer VSCode because of it's folder search feature, however Notepad++ is enough to handle what we will do. I will write this tutorial to work with both of these.

Finding your element

In a brief summary, everything in the HUD is considered an element, and is controlled through specific files. To edit the font sizes of specific elements, you will first need to:

  1. Where your HUD element is located in the file structure
  2. What your HUD element is named

Let's start by finding the name of the element you would like to edit. For this example, let's change the size of the health value.

  1. Open Team Fortress 2 and open the developer console and type map itemtest. (You can put whatever map you like, but itemtest is a great testing map)
  2. Pick a team, class, etc..
  3. Open your console again and run the following string of commands: sv_cheats 1;vgui_drawtree_draw_selected 1;vgui_cache_res_files 0;vgui_drawtree 1
  4. Don't panic, the VGUI Hierarchy can be a scary thing at first. Expand the hierarchy until you see this:

Finding a specific element can take some trial and error, you may have to play around with expanding some of the different elements.

  1. For our purposes, expand the HudPlayerStatus, as that is where the player health element is stored.
  2. Expand HudPlayerHealth
  3. Click through each of the elements under HudPlayerHealth, you will notice a red box will outline depending on what you're clicking on.
  4. For the purposes of this tutorial, the values we are wanting to change are both the elements PlayerStatusHealthValue and PlayerStatusHealthValueShadow. Please note editing the shadow is very important, otherwise you will have two separately sized health values.
  5. Open up Visual Studio Code or Notepad++. If you have VS Code, ensure the folder you have open is the voidHUD-master directory (the one with the folders such as _defaulthud, _voidhud, resource, etc...). Click the magnifying glass to open the search and type PlayerStatusHealthValue. Don't panic, there will be a lot of results, however we are searching for this specific entry:

Please note that when you hover over the file name, it ends with _voidhud/resource/ui/hudplayerhealth.res. If you edit _defaulthud/resource/ui/hudplayerhealth.res your CHANGES WILL NOT DO ANYTHING

If you installed Notepad++, navigate to Search -> Find in Files. Enter PlayerStatusHealthValue in the Find what: field, and change the Directory: to path to the voidHUD-master folder. Press enter, you should get results like this:

Again, as previously, make sure you find the HudPlayerHealth.res file in the _voidhud folder, not the _defaulthud folder.

Finding the font instance

  1. Now that you have found the file that contains your element, open it, and scroll down to it:

  1. Take a note of the "font" attribute of the element. For this example it is "sb60".
  2. Keep that file open, but navigate to voidHUD-master/_voidhud/resource/scheme/. As of Release 1.16.2021, the default font for the HUD is product sans, however if you changed the font you wanted for the HUD, you will open the file related to which font you chose. For this example, we did not change the overall font of the HUD, so we will open the fonts_productsans.res file.
  3. Scroll down until you find "sb60" (double-check as there is s60 and sb60. The b means the font is bold)
  4. If you want a font size greater than 60, then you will need to create a new font instance, this can easily be done by copying the entire "sb60" element and pasting it. Then, to chose the new size of your font, change the "tall" value. I highly recommend choosing an even number here. Be sure to change the name of the instance (the part before the opening { and closing }) to a new name, preferably "sb" + the number you chose for your "tall" value. Keep this name in your head.
  5. If you want a font size less than 60, I recommend scrolling up a bit and trying to find a font size you feel might be a better fit, for our example we can say we want to lower the font to 48, However you notice the // in the lines all around the "sb48" instance. This line is only commented out because font instancing is pretty taxing to your game on startup, and it's best to cut out any font instances you don't use, but now that you do want to use it, go ahead and remove all the // in front of the lines. It should now look like this:

** NOTE: If you uncommentend or edited an existing font instance OR created a new font instance, then you MUST restart your game for your changes to take effect **

Changing the size

  1. Navigate back to the file containing the element you want to change. In our case, hudplayerhealth.res.
  2. Change the value of the "font" attribute to the font name you chose in the previous step. For this example, assume I'm lowering the size to 48, so my new PlayerStatusHealthValue and PlayerStatusHealthValueShadow would look like this:

  1. If you already restarted your game after editing the font instances, then all you need to do is open your console and run hud_reloadscheme. If you didn't already restart your game in the previous section, do so now, otherwise you won't see the correct font.

Congratulations

You successfully edited the font size of an element! Hopefully this guide was helpful, and left you with no questions on how to change sizes of fonts in voidHUD. If you have any questions or feedback on this guide, please join the HUD Discord and let me know!