Adding Replacing Custom Fonts

Prerequisites

• Font of your choice (OTF or TTF font file extensions should both work)

Information

This guide is primarily geared towards a HUD that has a traditional file structure. A majority of huds use this traditional file structure, but some HUDs (such as budhud) have files in different locations than this guide will show (generally for organizational purposes).

To see the full size of an image in this guide, right click on the image > Open image in new tab

Known Variations

budhud:

• (Step 1) Font file location: ../budhud/resource/fonts/font-latosemibold-original.ttf
• (Step 3) CustomFontFiles clientcheme location: ../budhud/_budhud/resource/clientscheme_fontentries.res
• (Step 4) Fonts clientscheme location: ../budhud/_budhud/resource/clientscheme_lato.res

Guide

Step 1

Download, extract, and then move your font into your HUD's resource folder.

Example File Location: C:/Program Files (x86)/Steam/steamapps/common/Team Fortress 2/tf/custom/my_example_hud/resource

Step 2

Check the font's properties to determine its true name.

• This needs to be checked because a font's internal name may not always match the name of the font file itself

This can be found by opening the font in Windows Font Viewer...

...or by right clicking on the font, going to Properties, and then the Details tab.

Warning

This method shows the correct value a large majority of the time, but in rare instances it can be incorrect.

Step 3

Load the font by adding it to the CustomFontFiles section of the clientscheme, at the bottom of the file.

Example File Location: ../tf/custom/my_example_hud/resource/clientscheme.res

Step 4

Create a definition for your font by adding it to the Fonts section of the clientscheme.

Example File Location: ../tf/custom/my_example_hud/resource/clientscheme.res

Step 5

Find the element whose font you'd like to change.

• The following hierarchy tree can be used to find element names by using the following console command: sv_cheats 1; vgui_drawtree 1
• Drawtree is incredibly useful and and will save your ass, if you're serious about HUD editing you'll want to learn how to use it
• Drawtree will not always point you to the exact file name, so be prepared to use common sense at times (in this example, HudPlayerHealth is shownas nested within HudPlayerStatus, but the actual HudPlayerHealth file is in its own hud file)
• Drawtree and the "Find in Files" command (Notepad++, VSCode, etc etc) is your best friend for tracking down elements

"Right click > Open image in new tab" to see the full size image

Step 6

Open the file relating to the element you found in step 5, search for the section name, and add your new font definition.

Example File Location: ../tf/custom/my_example_hud/resource/ui/hudplayerhealth.res