Add a page on using fonts in Godot

godotengine · Aug 26, 2021 · e2619ce · e2619ce
1 parent 3f8a6bf
commit e2619ce
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 0 deletions.
diff --git a/tutorials/ui/gui_using_fonts.rst b/tutorials/ui/gui_using_fonts.rst
@@ -0,0 +1,56 @@
+.. _doc_gui_using_fonts:
+
+Using Fonts
+===========
+
+Godot allows you to set specific fonts for different UI nodes.
+
+There are 3 places you can setup font usage. The first is the
+theme editor. choose the node you want to set the font for
+and select the font tab. The second is in the inspector for
+control nodes under **Theme Overrides > Fonts**. And lastly in
+the inspector settings for themes under **Default Font**
+
+Regardless of where you are creating the font the process is
+the same. Click on the font setting you want to add a font to
+and a dropdown will appear with two choices **New Bitmap Font**
+and **New Dynamic Font**.
+
+.. image:: img/new_font.png
+
+Bitmap fonts (``.fnt``) are a format created by `BMFont <http://www.angelcode.com/products/bmfont/h>`__.
+If you are using a ``.fnt`` file do not select New Bitmap
+Font. Instead, drag the file from the file system panel to the
+font slot. Selecting the font after adding it to the font slot
+gives you 3 settings that can be changed. Height, ascent and
+Distance Field. Distance field fonts were never reimplemented
+for Godot 3.0 and do not work.
+
+Dynamic Font supports the following formats:
+- TrueType (``.ttf``)
+- OpenType (``.otf``)
+- Web Open Font Format 1 (``.woff``)
+
+If you are using one of these select **New Dynamic Font**.
+Click on it to open its settings in the inspector. From here
+open the **Font** settings and add your font file to the Font
+Data slot. The dynamic font resource is now using the font
+you selected.
+
+There are several options you can adjust. **Extra Spacing** options
+control the spacing of characters. **Settings** control the general
+settings of the font.
+
+.. image:: img/dynamic_font_options.png
+
+In addition, the font data has antialiasing and hinting settings you
+can see if you click on it. If you want to adjust either of these
+you need to make the font data resource unique, then save it to a
+.tres file. Adjusting the font file will not work because ``.ttf``/
+``.otf``/ ``.woff`` files can't contain metadata about antialiasing
+or hinting.
+
+If you want to use the same font again but with different settings,
+such as a larger size or an outline, create another dynamic font
+resource using the same font file, and make the adjustments that you
+want.
diff --git a/tutorials/ui/img/dynamic_font_options.png b/tutorials/ui/img/dynamic_font_options.png
diff --git a/tutorials/ui/img/new_font.png b/tutorials/ui/img/new_font.png
diff --git a/tutorials/ui/index.rst b/tutorials/ui/index.rst
@@ -51,6 +51,7 @@ explain the benefits of that system and how to set it up in your projects.
 
    gui_skinning
    gui_using_theme_editor
+   gui_using_fonts
 
 Control node tutorials
 ----------------------