Modifying the CSS HUD - Making a New Font

Sectionsupdated steampipe
Font editor problem
Use a VALVe TTF font as a base?
Adjust a "Glyph" manually
Save the file correctly
How to get the game to use the new font.
What happens if it goes wrong? 

Basics. Font files in HL2 games are sometimes used as images for HUD icon use.
This tutorial is based on customizing existing Counter-Strike Source files so I will take you through one example in one of the 4 CSS standard font files and how to change and install a custom font. HL2 uses True Type Font files (.ttf), they are moderately easy to change if you know how.

Font editor problem. Linux and Mac operating systems have lots of support to edit TTF fonts, Windows in the past had very few options and the best was, (I repeat was) commercial software programs like FontCreator by high-logic.

There is another option I can now recommend, Type light 3.1 - a freeware OpenType font editor. It has basic abilities to open, basic editing and save .ttf files. The full version has many more functions and you may opt for that, it does do a lot more like import bitmap images and a host of other tools, however it is possible to change a HL2 TTF file with ease under Windows using the free or full version. Install it or your other choice and let's continue.

Linux users will just need to install FontForge. Mac and Windows can also use FontForge.

Use a VALVe TTF font as a base? This is wise to start off, use the TTF files and adjust them, let's say you wanted to adjust the death icon for the kills and deaths area...

TTF 1_death_icon_css

To edit the images in the kills and deaths you need two files. The csd.ttf in the cstrike/resource directory and a clientscheme.res, we can do that later for now open csd.tff with your editor and ensure "Mapping" is selected under the "View" menu...

TTF 2_mapping_is_on

Adjust a "Glyph" manually. Select Glyph no 29, (it's the letter c) and now you will see an image with dots, these are editable points within the Glyph that you can move and adjust (line before and after) the interconnecting lines between each point, see here.
You may want to edit this with the "preview fill" option ticked under "View" it makes it easy to see what is a solid area and what is transparent...

 TTF 3_preview_is_on

So now we can see what we are doing you can start to change things, I know what I want, I want an image that is not smiling and I want a mean set of eyes and a few other adjustments to the bones and jaw.
I selected the mouth, (make sure the select tool is on) and I deleted it.

TTF 4_select_and_delete
Now I want another, simple, slanted one, select the square drawing tool and make a square...

TTF 5_make_square
Now click the select tool again, highlight your shape and select it, the corners will now be shown as red dots, go to "Contour" and select "Reverse", it will now show as a clear section...

TTF 6_make_reverse

With the select tool still on, select the corners, click out of the selected dots, (points) to deselect, then click on one point at a time and drag them around until happy, note that on some points you will see extra controls to adjust the curve in and out, explore the editors options for manipulation of the "Bézier paths", until you have the shape you want...

TTF 7_make_changes

Save the file correctly.
First a warning: The VALVe font file names must never be used as a custom file name, the reason is that when the game starts it will detect a file that is changed and replace it with the default file from cstrike\resource. You can override this and make it read only...don't bother, it will have problems if you give it to someone else, just rename it correctly as shown below.

So as you can see the glyph image is now different, we have to save it now. You have now changed a VALVe TTF file, you should place some embedded info' into the file before you save, click "Font" and select "Names". A box pops up and you can fill it in, change what is there because you don't want to confuse this with VALVe's normal csd.ttf file...

TTF 8_save_embed_info

Save the file now, ("File" "save as") and call it what you called it in "Full name" field... mine was csd_tut, saving it in the cstrike/resource folder is OK of course.

How to get the game to use the new font. The next part of the customization requires a couple of quick edits to the clientscheme.res file, you can read here on how to get that file but I will use my tutorial file set from the previous pages.
Open the clientscheme.res, the first step is to add the whole font, down the bottom of the file there is the "CUSTOM FONT FILES" section, add it like the others in this format...

TTF 9_clientscheme_1

Next we need to alter the "Fonts" section, in this case the font that controls the kills and deaths, it is called "CSTypeDeath" you need to change the font file name...

TTF 10_clientscheme_2

Now save the clientscheme.res and let's look at it in game, go to the cs_assault map, join as a CT, buy a HE Grenade, hurt yourself with it, run up the stairs of the overhead rail line and jump off...

TTF 11_new_death_icon_css TTF 1_death_icon_css

What happens if it goes wrong? Now if you don't see the new icon and you see this...

TTF 12_wrong_death_icon_css

What that means is somewhere in the naming process you have gone wrong and it cannot find your font file, it could be also related to this problem too, note it displays the letter "C" as this is the character for the death font.

If you do see the icon and it is normal you have failed to change the font file name correctly, (csd.ttf) and when the game started it has replaced your file. You will have to start all over and do it again!
As always here is the actual files used in this stage of the tutorial.


Enter Amount Copyright © 2011. All Rights Reserved.