Making Fonts

From Procedural Objects
Jump to navigation Jump to search
    I18n.png  Language En flag.jpg English Fr flag.png Français Es flag.png Español De flag.jpg Deutsch Nl flag.png Nederlands Ru flag.jpg Русский Ko flag.png 한국어 Zh flag.png 简体中文 Ja flag.png 日本語 Th flag.png ภาษาไทย


Procedural Objects' Text Customization tool allows for custom fonts. By default the mod only comes with Arial, but any Workshop Item can include as many fonts as desired.

Fonts are made of two components:

  • The .pofont file, which contains information about the Font (name, characters supported by the font, whether styles/color is supported by the font, kerning...)
  • The .png file(s) (either 1 or 3 png files) which contain the actual characters

Those file will have to be placed in the same subfolder when published on the workshop (see the Publish a font section below)

PNG font tables

The font tables for fonts are PNG files that contain every character. The mod doesn't handle standard TTF font formats, nor does it handle SVG or JPG. If the font supports Normal, Italic and Bold styles, there has to be 1 png file per style. Otherwise only one is required.

Those font tables can be created manually or automatically using the PO Font Generator program.

Manual PNG table creation

The PNG file has to have a transparent background, and must be 518 in width - by default. The height depends on the number of characters the font handles. Every character has a space of 50x50 pixels allocated on the PNG file (by default. this size can be changed, see below). They are set in order next to each others, in rows of 10 characters, and there is a 2 pixels wide spacing between each column and between each row (hence the default required width : 50 x 10 + 9 x 2 = 518). The same is true for height.

If no custom characters support is specified, the font handles 130 characters by default and so the PNG has to be 674 in height.

Arial table.png Font guidelines.jpg
The Arial font table (normal style) A guideline pattern you can use to
make a font (don't forget to remove
it when testing/publishing)

Automated PNG table generator

The PO Font Generator program.

The Procedural Objects Font Generator program is a .exe program that only works on Windows computers. It creates font tables based on a selected font that is installed on your computer.

By default this program exports fonts in the Local Fonts folder for PO (C:\Users\<username>\AppData\Local\Colossal Order\Cities_Skylines\ProceduralObjects\Fonts). If the program does not find this folder, it will ask you to select the export directory. You can change this export directory under File > Choose new PO Fonts directory.

If some features of the Generator program seem obscure, hover your mouse over the feature : some have a tooltip description that will help you understand their purpose.

This program exports the PNG font tables (either only normal, or with italic and bold if this option is selected), and it also creates the .pofont file for the font. If exported in the correct folder, the font is already ready to be used after the export. Note that this program does not automatically create Kerning data for the font (see the section below).

WARNING: Kerning data caution (refer to the dedicated section below to learn about Automated Kerning data) : If you have generated fonts with lots of characters (ie. more than 250) try not to use the automated kerning data with all characters. The exported data set it creates grows exponentially with the number of characters, and it becomes huge quite fast, causing issues and overuse of RAM.

POFONT information file

The .pofont file is the config file that makes the mod recognize the PNG file(s) as fonts. The name of the file itself doesn't actually matter. The file can be edited by any basic text edition software such as Notepad or Notepad++. It contains the following informations (one per row, see the exemple file below)

  • The font name, identified as name : this matters and can't be changed through updates as it's used by the mod to tell which font a text field uses. It will also be the one shown in the interface.
  • The name of the Normal style PNG table, identified as normal : this tells what the name of the PNG file corresponding to the Normal style of the font is. Don't include the ".png" extension.
  • The name of the Italic style PNG table, identified as italic : this tells what the name of the PNG file corresponding to the italic style of the font is. Don't include the ".png" extension. Works only if bold and normal exist as well.
  • The name of the Bold style PNG table, identified as bold : this tells what the name of the PNG file corresponding to the bold style of the font is. Don't include the ".png" extension. Works only if italic and normal exist as well.
  • Default spacing between characters, identified as defaultSpacing : the default spacing applied between characters, in pixels. The player will be able to change it but when the font will be applied it will take this specified value. If not set, the default value will be 2.
  • The Space width, identified as spaceWidth : in pixels, the width of a blank when the space bar is pressed. Default is 21.
  • The Characters contained by the PNG file, identified as characters : if set, this value will tell the mod what characters the table contain, in order. By default : ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzàáäåâãìíïîòóöøôõœèéëêùúü-ûð&ÿ'ñßç,!.?:0123456789+=%µ#§€$£;<>"°@(){}/\_*[]¤^²|~
    The value has to be a succession of Unicode UTF-16 codes separated by semi-columns. This can be done by using a unicode converter and replacing the \u by a semi-column in Notepad++.
  • The size of individual characters allocated on the PNG tables, identified as charSize (optional) : sets the width and height of characters in the PNG file(s). Consider adapting the width and height of the PNG tables accordingly (see the section above). Default is 50.
  • Whether the font supports color modification, identified as disableColorOverwriting (optional) : useful when making a font with colored symbols, you don't want the player to set the color to white and thus overwrite the colors in the png table. Then set disableColorOverwriting = true
  • if the font has 3 PNG tables, the styles names, identified as stylesNames (optional), allows to rename the 'N', 'B' and 'I' names of the styles to anything else. Syntax : stylesNames = N,B,I where N, B and I can be replaced by anything.
  • Kerning data. This is not required but can make the font look much better.
    • As many kerning lines as needed can be added. They tell the mod how much space (in pixels) to remove when two letters are placed successively.
    • A kerning data line is written as follows : krng[styles](first character, second character) = pixels.
      • [styles] can be set to Normal, Bold, Italic, NormalItalic, NormalBold, NormalItalicBold.
      • first character is the 0-based index of the 1st character of the setting. In the default order shown above, A is 0, B is 1, V is 21...
      • second character is the 0-based index of the second character of the setting.
      • pixels is the number of pixels to remove when first character and second character are typed successively.
    • Example : removing 4 pixels between A and V when A and V are typed successively, for all styles : krngNormalItalicBold(0,21) = 4
    • Kerning data can also be automatically created by the mod (see the dedicated section below)

Here is an example .pofont file, modified from the greek PO Font Pack by Cozonaq (the characters line has been shortened). Note that it doesn't contain kerning data.

name = (gr)TM
normal = (gr)TMW
italic = (gr)TMY
bold = (gr)TMB
defaultSpacing  = 2
characters = 0041;0042;0043;0044;0045;0046;0047;0048;0049;004a;004b;004c;004d;004e;004f;0050;0051;0052;0053;0054;0055;0056;0057;0058;0059;005a;0061;0062;0063;....
spaceWidth = 21
disableColorOverwriting = true
stylesNames = W,B,Y
name = Arial
normal = arial_fonttable
italic = arialItalic_fonttable
bold = arialBold_fonttable
spaceWidth = 21
krngNormalItalicBold(0,2) = 3
krngNormalItalicBold(2,0) = 3
krngNormalItalicBold(3,0) = 3
krngNormalItalicBold(5,0) = 4
krngNormalItalicBold(0,6) = 2
krngNormalItalicBold(6,0) = 2
krngNormalItalicBold(0,14) = 3
krngNormalItalicBold(14,0) = 3
krngNormalItalicBold(15,0) = 5
krngNormalItalicBold(0,16) = 3
krngNormalItalicBold(18,0) = 1
krngNormalItalicBold(0,19) = 6
krngNormalItalicBold(19,0) = 5
krngNormalItalicBold(0,20) = 1
krngNormalItalicBold(20,0) = 1
krngNormalItalicBold(0,21) = 9
krngNormalItalicBold(21,0) = 9
krngNormalItalicBold(0,22) = 6
krngNormalItalicBold(22,0) = 6
krngNormalItalicBold(0,24) = 7
krngNormalItalicBold(24,0) = 7
krngNormalItalicBold(0,29) = 1
krngNormalItalicBold(29,0) = 1
krngNormalItalicBold(0,30) = 1
krngNormalItalicBold(30,0) = 1
krngNormalItalicBold(43,0) = 2
krngNormalItalicBold(47,0) = 2
krngNormalItalicBold(0,47) = 2
krngNormalItalicBold(0,48) = 2
krngNormalItalicBold(81,0) = 5
krngNormalItalicBold(0,81) = 4
krngNormalItalicBold(119,0) = 4
krngNormalItalicBold(0,120) = 4
krngNormalItalicBold(0,122) = 3
krngNormalItalicBold(122,0) = 3
krngNormalItalicBold(1,6) = 2
krngNormalItalicBold(1,14) = 2
krngNormalItalicBold(1,16) = 2
krngNormalItalicBold(1,19) = 2
krngNormalItalicBold(2,6) = 3
krngNormalItalicBold(10,2) = 3
krngNormalItalicBold(2,14) = 3
krngNormalItalicBold(2,16) = 3
krngNormalItalicBold(2,21) = 2
krngNormalItalicBold(2,22) = 2
krngNormalItalicBold(2,24) = 2
krngNormalItalicBold(23,2) = 3
krngNormalItalicBold(24,2) = 3
krngNormalItalicBold(25,2) = 3
krngNormalItalicBold(2,25) = 3
krngNormalItalicBold(3,24) = 4
krngNormalItalicBold(5,9) = 4
krngNormalItalicBold(11,21) = 5
krngNormalItalicBold(11,22) = 4
krngNormalItalicBold(11,24) = 6
krngNormalItalicBold(10,14) = 4
krngNormalItalicBold(17,14) = 2
krngNormalItalicBold(14,19) = 5
krngNormalItalicBold(19,9) = 5
krngNormalItalicBold(19,14) = 5
krngNormalItalicBold(22,9) = 3
krngNormalItalicBold(14,23) = 4
krngNormalItalicBold(23,14) = 4
krngNormalItalicBold(14,24) = 4
krngNormalItalicBold(24,14) = 4
krngNormalItalicBold(14,25) = 2
krngNormalItalicBold(15,9) = 6
krngNormalItalicBold(43,26) = 3
krngNormalItalicBold(43,28) = 3
krngNormalItalicBold(43,29) = 2
krngNormalItalicBold(43,30) = 3
krngNormalItalicBold(43,31) = 2
krngNormalItalicBold(43,32) = 2
krngNormalItalicBold(43,34) = 2
krngNormalItalicBold(43,35) = 3
krngNormalItalicBold(43,40) = 3
krngNormalItalicBold(43,42) = 3
krngNormalItalicBold(43,44) = 3
krngNormalItalicBold(43,51) = 2
krngNormalItalicBold(43,52) = 3
krngNormalItalicBold(43,53) = 3
krngNormalItalicBold(43,54) = 3
krngNormalItalicBold(43,55) = 3
krngNormalItalicBold(43,56) = 3
krngNormalItalicBold(43,57) = 3
krngNormalItalicBold(43,58) = 2
krngNormalItalicBold(43,59) = 2
krngNormalItalicBold(43,60) = 2
krngNormalItalicBold(43,61) = 2
krngNormalItalicBold(43,62) = 3
krngNormalItalicBold(43,63) = 3
krngNormalItalicBold(43,64) = 3
krngNormalItalicBold(43,65) = 3
krngNormalItalicBold(43,66) = 3
krngNormalItalicBold(43,67) = 3
krngNormalItalicBold(43,68) = 3
krngNormalItalicBold(43,69) = 3
krngNormalItalicBold(43,70) = 3
krngNormalItalicBold(43,71) = 3
krngNormalItalicBold(43,72) = 3
krngNormalItalicBold(28,30) = 2
krngNormalItalicBold(30,28) = 2
krngNormalItalicBold(28,40) = 2
krngNormalItalicBold(28,42) = 2

On the right is the .pofont file for Arial (default font from the mod). You can see it contains lots of kerning data.

PO automatically reduces spacing between characters as much as possible even without kerning, but that can lead to situation where letters seem to be really separated (see picture below)


Kerning.png

Automated Kerning data

Procedural Objects can automate the process of creating kerning data. In order to do so :

  • Check the "Show Developer tools" checkbox in the settings panel
  • Test the font in game (see below) and open the characters table for your font by clicking on its name (see Text Customization)
  • Scroll down to the bottom of the characters table where you will see options to calculate and export kerning data :
    • The Excluded characters indexes represent the 0-based indexes of the characters that you may not want to include in the calculation (for example including the underscore would place it underneath the letters which is not what we want). Write these indexes separated by commas before exporting.
  • The resulting exported data will be placed in a .txt file in the folder C:\Users\<username>\AppData\Local\Colossal Order\Cities_Skylines\ProceduralObjects\Fonts
  • Copy/paste the content of this file inside the .pofont file.

WARNING: if you have generated fonts with lots of characters (ie. more than 500) try not to use the automated kerning data with all characters. The exported data set it creates grows exponentially with the number of characters, and it becomes huge quite fast, causing issues and overuse of RAM. (note: at the moment you can not specify ranges of characters in the Excluded characters box, only single characters)

Test a font

  • Create a folder for your font in the PO local font folder : C:\Users\<username>\AppData\Local\Colossal Order\Cities_Skylines\ProceduralObjects\Fonts
  • Put your PNG file(s) and POFONT file inside.
  • Launch the game.
  • You can refresh your font at runtime inside the game in the Font Management window.


Former PO Test Font program
Before version 1.6.3 fonts could not be reloaded from inside the game. Fonts could be tested without the need to enter the game each time with the POFontTest program. The program only works if you have the default order of characters in the font table. Download and unzip this pack, then replace the "fonttable.png" file with your file (rename it fonttable.png) and launch the program. It allows to test all aspects of the font except kerning.

Publish a font

You can share one or more fonts alongside any kind of content (for instance you can share fonts and a mod in the same workshop item, or fonts+props or fonts+LUT, etc) or you can even share only fonts if you want.

  • Prepare a usual workshop upload (click "Share" on an item in the Content Manager)
  • Open the upload folder by clicking on the folder icon in the bottom-right corner of the preview image.
  • Go to the Content folder.
  • Put the folder you created when testing your font in game (the one that contains the .pofont and .png) directly in this folder.
  • If you want only the font in your workshop item, you can delete other .crp files from the Content folder.
  • Continue your upload as usual.

Any player who subscribes to your workshop item will see those fonts appear in the Text Customization window. When you're done uploading :

  • Delete the test folder you created when testing your font in game.
  • Subscribe to your own item you've just published.

You should also contact the creator in order to get your font added to the official PO Fonts workshop collection.

If you want to be able to update the font in the future make sure to have a single unique item you use for the workshop upload, so that you can find it afterwards for the update.