Last modifiedby & filed under KSP Scripting (NI Kontakt) - Tutorials, KSP: UI (design) & Engine.

Since Kontakt 6 we can add custom fonts. Although the ksp coding part is very easy, creating such a bitmap font manually can be a pain in the ass. That’s why we built an online ksp font type generator which does this job for you.

If you still want to do it manually: the font or each glyph has to be converted into a special bitmap. In this case it’s a horizontal image sprite that has to be put into the Resources/pictures folder of your instrument. learn more below


CONTENT

Creating the Font Sprite

The best is to use our font type generator. There you can convert all google web fonts and generate the appropriate sprite. Simply load the sprite into the Resources/pictures folder.

KSP FONT TYPE GENERATOR

Text File

Don’t forget to add a txt file into the Resources/pictures folder as well, with the same file name of your font sprite. Without it, the font would still work, but it would not be added to your resources container (.nkr) when creating or updating it.The content of the text file doesn’t matter. It can also be an empty txt.

This is how a font sprite looks like:

ksp_kontakt-scripting_custom-font-type_sprite

DIY :: Definitions & hints:

If you still want to create the bitmap yourself, you must strictly follow these definitions:

  • the bitmap (sprite) must contain exactly 256 red pixel dots in total
    [These dots tell Kontakt where a new glyph starts]
  • the dots must be single pixels
  • each dot represents a character.
    [Or a control like delete, enter, shift (first 33 dots) or the space bar (34th dot)]
  • cropping, blurring or modifying any of the red dots will damage the font
  • the dots must be 100% red (#FF0000)
  • the position of each glyph is defined by the Windows-1252 standard
    [glyphs can be left out, but the remaining glyphs must be at the correct position again. Never omit any of the red pixels]
  • don’t leave any space between unoccupied glyph-positions (or red pixels)
  • don’t leave any space between the first controller pixels (first 33 dots)

font sizing is not possible within Kontakt. That has to be done before, when creating the bitmap font (sprite).

Kerning is not feasible with this font sprite method. So letter spacing may look slightly different compared to the original font.

Also keep in mind the Kontakt font is now a bitmap, a pixel-based image (not vector-based). Thus the glyphs may look more blurred or biased.

Loading the bitmap FONT INTO KONTAKT – via KSP Script

this works with the new $CONTROL_PAR_FONT_TYPE and get_font_id()

It only works with dynamic text elements like labels, buttons, text edits etc.

For controls like buttons, switches and menus we can also set separate fonts for each event state. So we can do:

  • button/menu OFF: font 1
  • button/menu ON:  font 2
  • button/menu PRESSED: font 3
  • and so on..

Use these control parameters:

$CONTROL_PAR_FONT_TYPE_ON
$CONTROL_PAR_FONT_TYPE_OFF_PRESSED
$CONTROL_PAR_FONT_TYPE_ON_PRESSED
$CONTROL_PAR_FONT_TYPE_OFF_HOVER
$CONTROL_PAR_FONT_TYPE_ON_HOVER

Adding a custom font to an UI_element

declare ui_label $label (1,1)

We first create a new ui element with dynamic text elements like a label, button, text edit,…

declare $fontID
$fontID := get_font_id("myFont")

{OR MULTIPLE IDs VIA ARRAY}
declare %fontID[4]
%fontID[0] := get_font_ID("myFont_1")
%fontID[1] := get_font_ID("myFont_2")
%fontID[2] := get_font_ID("myFont_3")
%fontID[3] := get_font_ID("myFont_4")

Then we need to retrieve the font ID of our font sprite via get_font_id()

Instead of “myFont_” we use the filename of our font sprite

We can also use multiple fonts within one instrument. Simply add more $fontIDs or use an array like %fontID[]

set_control_par(get_ui_id($label),$CONTROL_PAR_FONT_TYPE,$fontID)

//or via array
set_control_par(get_ui_id($label),$CONTROL_PAR_FONT_TYPE,%fontID[0])

Then we assign the font ID to our ui_element

Example Label:

on init
  declare ui_label $label (1,1)

  declare $fontID
  $fontID := get_font_id("myFont_1")

  set_control_par(get_ui_id($label),$CONTROL_PAR_FONT_TYPE,$fontID)
end on

Example Text Edit:

on init
  declare ui_text_edit @textEdit

  declare $fontID
  $fontID := get_font_id("myFont_2")

  set_control_par(get_ui_id(@textEdit),$CONTROL_PAR_FONT_TYPE,$fontID)
end on

Example button:

on init 
  declare ui_switch $button

  declare %fontID[6] 
  %fontID[0] := get_font_ID("myFont_1") 
  %fontID[1] := get_font_ID("myFont_2") 
  %fontID[2] := get_font_ID("myFont_3") 
  %fontID[3] := get_font_ID("myFont_4")
  %fontID[4] := get_font_ID("myFont_5")
  %fontID[5] := get_font_ID("myFont_6")
  
  
  set_control_par(get_ui_id($button),$CONTROL_PAR_FONT_TYPE,%fontID[0]) 		{ OFF STATE }
  set_control_par(get_ui_id($button),$CONTROL_PAR_FONT_TYPE_ON,%fontID[1]) 	{ ON STATE }
  set_control_par(get_ui_id($button),$CONTROL_PAR_FONT_TYPE_OFF_PRESSED,%fontID[2]) 
  set_control_par(get_ui_id($button),$CONTROL_PAR_FONT_TYPE_ON_PRESSED,%fontID[3])
  set_control_par(get_ui_id($button),$CONTROL_PAR_FONT_TYPE_OFF_HOVER,%fontID[4])
  set_control_par(get_ui_id($button),$CONTROL_PAR_FONT_TYPE_ON_HOVER,%fontID[5])
end on

OWN-FONT-TYPES (OFT) DISPLAY TOOL

ksp-own-font-types-display-toolThis tool is just a little helper which lets you quickly check if your own fonts are working well and how they look & feel inside Kontakt.

For this go into its Resources/pictures folder and overwrite font_1.png; font_2.png or font_3.png with your font sprite.

Open the yb-ksp_own-font-type+display.nki with Kontakt 6 (or up) and select your updated font(s).

Note: to apply a new font you should really completely close and restart Kontakt after updating one of the font-sprite PNGs. Because only hitting the apply button inside the script tabs may cause font glitches.

However: if there are still glitches after restarting Kontakt, there is most likely an error with the font sprite itself.

Sometimes a fancy font or a very small font size just doesn’t work:

  • Try to adjust the letter spacing then.
  • Or the line height if one of the glyphs has overlapped the red dots.

OWN-FONT-TYPEs (OFT) DISPLAY TOOL

  • NKI file [Kontakt 6]: open resource container

DOWNLOAD

How useful was this article?

something you didn't like? Please tell us before you rate!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

NOTE: highly negative votes may be removed without any reasonable given feedback!

Tell us how we can improve this post?

3 Responses to “Kontakt Scripting (KSP) :: own font types – since Kontakt 6 via custom bitmap font sprites”

  1. Serge

    Hi _ I made some personal font images and inserted them in the correct folder for KONTAKT 6 (Resources / pictures folder). No need to add a .txt file to them. Regards _

    • YummyBeats

      oh that's cool. Thanks for that.
      The article has been edited

      [EDIT] just noticed that you still need a text file for creating the resources container.
      So that the font image also gets stored into your .nkr

      The content of the text file doesn't really matter though. It can also be an empty text file.

Leave a Reply

use <pre> </pre> to wrap code blocks

use <code> </code> to wrap small code snippets

use basic html to style your comment

Your email address will not be published. Required fields are marked *