Thread: StreetDeck Fonts

All fonts in StreetDeck are actually created from specially formatted PNG images. Unlike traditional fonts you use on your desktop like "Arial" and "Times New Roman", the different fonts in StreetDeck do not necessarily represent different font faces, rather a different font exists for each different size and bold attribute for each character. Taking a look at the fonts sub folder in the default streetdeck skin folder (My Documents\StreetDeck\UI\Skins\Default\Fonts) we can see the entire list of fonts supported by StreetDeck. Additional fonts can NOT be added to this sub folder, only fonts with the shown names will be used by StreetDeck when loading the skin.



Most of the fonts in this sub folder are based off the arial font face, bold and unbold fonts look similar, and correspond to the relative height specified in the font name. However, this does not have to be true. For example, notice the differences between Font125Bold.png and Font125.png. The fonts are completely different colors and have a different shading applied to them. Although, all the default fonts are based on the Arial font face, you can apply any number of font faces to the different files, you can even mix and match different font faces in the same file for different characters, i.e. only numbers are italicized. This is the real power of bitmap based fonts, anything you can draw, you can make into a font. i.e. you could make a font with flames coming out of the letters, add drop shadows, or outlines anything you want, as long as you stay within a few loose contraints of the streetdeck font file format.




An example font from the Default skin in streetdeck is shown below. Notice the single pink pixel RGB(255, 0, 255) found next to and below all the characters in the image. These pixels will not be rendered, but simply denote the width of each corresponding character. Similarly, the first single pink pixel found in the first column of the image scanning from top to bottom denotes the height of EVERY character in the font. All charcters must be the same height. Notice, however, that the characters can contain white space above and below them to account for the difference in height of say a lower case "a" and an upper case "A".


Making a font file like the one shown above is actually a painstaking and extremely difficult process to do manually, since you have to mark and line up all the characters individually. To simplify this process, the StreetDeck development enviornment offers a font template creation and importation tool and premade font templates. To create a new font, run streetdeck in developer mode and goto Font | Create Font Template. Specify the maximum height in pixels of the font you want to create and a filename to save it to. A properly formatted font template like the one shown below on the left will be created; your job is to add the characters to it to make it look like the image below on the right. The blue lines in the templete file show the space that each charcter MUST fit in and the single charcter at the top right of each space indicates the character that should be placed in that space. Once the template is modifed with the new font, each space should contain the final character. All lines, background colors, and the top right characters should be cleared from the file leaving only the characters you want for the font in the space with a completely transparent background. Optionally, rather then using StreetDeck to create the font templates in PNG format, you can use the original PSD files used to create the default StreetDeck fonts found here to greatly ease the task of creating a new font if all you want to do is change the font face and not change the size of the individual characters. Simply use photoshop or another PSD supporting program to alter the text elements in the PSD file and save it to PNG format when your done for importation back into StreetDeck.



After a font template is completed, it needs to be imported back into StreetDeck where it will be converted from a template into a font skin image file and placed in the current skin's font sub folder. To do this goto "Font | Import Font Image" and select the font to import the font image as. All controls that use text drawn with the specified font will now be drawn with the font from the new image.