Installing and importing a custom font in the ADK to be used in Widgets of your mod.
Installing the Font on your Operating System
To Import a font to the ADK, you first need to find and install it on your Operating System if you don't have it already installed, which is an easy task.
Installing a font:
- Find a font which you like (in this example I will use the website http://www.1001fonts.com). - see Screenshot #1
- Make sure the license of the font is compatible with your need.
- Test if the font supports all the characters you will be using in your mode (this won't be an issue with English characters, but for other languages which have some additional or full different characters in the alphabet).
- Download the font.
- Locate the downloaded font files (.otf or .ttf). - see Screenshot #2
- Open the font file you want to use and select "install" to install it on your Operating System.
Importing the Font to ADK
Next step is to create a font object inside the ADK and import the installed font.
Importing a font:
- Inside ADK, Content Browser, open your Mod folder and for organization you can create a sub folder "Fonts" inside it and open that sub folder.
- Select "New" or Right Click somewhere in the empty "Fonts" folder, choose "Materials & Textures" > "Font". - see Screenshot #3
- A new popup will open where you have to pick a font from all the fonts installed on your OS. - see Screenshot #4
- Search for your font and select the "Style" and "Size" of the font to be imported and hit "OK".
- A new font object will be created, prompting you to name it. Enter a name and hit "Enter". - see Screenshot #5
- Select the new created font file and hit Enter or Double Left Click to open a new Window with setting for the font. - see Screenshot #6
Making the font work and look good
The next few steps will be to make the font show actual characters and not some random scribble, and to make it look sharper and resolve some of possible issues.See Screenshot #7 to see how the font looks with the default import options.
NOTE: If you change anything in the Import Options, you will need to re-import the font for the changes to take effect (right click on the font object in Content Browser and pick "Reimport")
- First thing to do which will make the font work is, inside the "Import Options", check the box for "Use Distance Field Alpha" and "Reimport" the font object. - see Screenshot #8
- Change the "Distance Field Scan Radius Scale" to remove/reduce the dark glow and stroke around the character.
- Change the Extend Box (top,left,bottom,right) values to solve the characters being cut.
- Change the X/YPadding to increase the space between characters if they are to close to each other.
- REMEMBER TO "Reimport" the font for the changes to take effect and also REMEMBER TO change the "Font Draw Scalar" to force the new style to be applied on the TextBlok (so you can see how it looks like now).