Modifying the CSS HUD - Making a New Font

A Tutorial for Counter-Strike: Source

Attention Gamer! We are one of the oldest mod sites on the Interwebs. Sign up and maximize your browsing experience.

  • Subscribe: Get notified of new submissions like this.
  • Say Thanks: Show your appreciation by sending natko points.
  • Post: Give natko your thoughts on this Tutorial.
  • Vote: Help natko win the Monthly Awards.
  • Rate: Give this Tutorial a rating out of 10.
  • Flag: Alert moderators and warn members of a problem with this Tutorial.
  • Watch: Get notified when this Tutorial is updated.
Mascot

Interested?

Sign up

Already a Bananite? Login

Sections Basics
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](https://developer.valvesoftware.com/wiki/Authoring_and_Using_TrueType_Fonts "") 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](http://en.wikipedia.org/wiki/TrueType "") (.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](http://www.high-logic.com/font-editor/fontcreator.html "") by high-logic. There is another option I can now recommend, [Type light 3.1](http://www.cr8software.net/typelight.html "") - a freeware OpenType font editor. It has basic abilities to open, basic editing and save .ttf files. The [full version](http://www.cr8software.net/type.html "") 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](http://cr8software.net/typelight.html "") or full version. Install it or your other choice and let's continue. Linux users will just need to install [FontForge](http://fontforge.org/ ""). [Mac](http://fontforge.org/mac-install.html "") and [Windows](http://fontforge.org/ms-install.html "") 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... 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... 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](http://en.wikipedia.org/wiki/TrueType#Outlines "").
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... 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. Now I want another, simple, slanted one, select the square drawing tool and make a 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... 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](http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Computer_graphics "")," until you have the shape you want... 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 the GCF. 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... 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](http://css.gamebanana.com/tuts/10676#howandwhere "") but I will use [my tutorial file set](http://files.gamebanana.com/bitpit/insanes_css_hud_tutorial_fonts_4.zip "") 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... 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... 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... NEW FONT ICON
TTF 11_new_death_icon_css
OLD FONT ICON
TTF 1_death_icon_css What happens if it goes wrong? Now if you don't see the new icon and you see this... 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](http://css.gamebanana.com/tuts/10675 ""), 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](http://files.gamebanana.com/bitpit/insanes_css_hud_tutorial_new_font_s.zip "").

Posts

None found

Share

Shareable Image:
Share banner
HTML embed code:
BB embed code:
Markdown embed code:

More embeddable images

Bookmark and Share

Credits

Key Authors
dodbits

Submitter

natko avatar
natko avatar Offline
Admin Joined 16y
266,811 points Ranked 11th
56 medals 10 legendary 14 rare
  • Achieved Admin clearance Medal icon
  • 10 years a member Medal icon
  • Submitted 100 Skins Medal icon
  • Submitted 15 Tools Medal icon
  • Submitted 50 Gamefiles Medal icon
  • Submitted 30 Tutorials Medal icon

natko avatar
natko

Redistributor
Are you the owner? Request Ownership
Sign up to access this!
Sign up to access this!
Sign up to access this!
Sign up to access this!

Category

Details

Difficulty Level
Beginner Difficulty

Attributes

Stats

Posts
0
Views
4,064
Date Added
4y
bcp.crwdcntrl.net tracking pixel