gui_using_fonts.rst 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768
  1. .. _doc_gui_using_fonts:
  2. Using Fonts
  3. ===========
  4. Godot allows you to set specific fonts for different UI nodes.
  5. There are three different places where you can setup font usage.
  6. The first is the theme editor. Choose the node you want to set the
  7. font for and select the font tab. The second is in the inspector
  8. for control nodes under **Theme Overrides > Fonts**. Lastly, in
  9. the inspector settings for themes under **Default Font**.
  10. .. note::
  11. Since Godot 4.0, font sizes are no longer defined in the font itself but are
  12. instead defined in the node that uses the font. This is done in the
  13. **Theme Overrides > Font Sizes** section of the inspector.
  14. This allows changing the font size without having to duplicate the font
  15. resource for every different font size.
  16. There are 2 kinds of font files: *dynamic* (TTF/OTF/WOFF/WOFF2 formats) and
  17. *bitmap* (BMFont ``.fnt`` format or monospaced image). Dynamic fonts are the
  18. most commonly used option, as they can be resized and still look crisp at higher
  19. sizes. Thanks to their vector-based nature, they can also contain a lot more
  20. glyphs while keeping a reasonable file size compared to bitmap fonts. Dynamic
  21. fonts also support some advanced features that bitmap fonts cannot support, such
  22. as *ligatures* (several characters transforming into a single different design).
  23. .. tip::
  24. You can find freely licensed font files on websites such as `Google Fonts
  25. <https://fonts.google.com/>`__ and `Font Library
  26. <https://fontlibrary.org/>`__.
  27. Fonts are covered by copyright. Double-check the license of a font before
  28. using it, as not all fonts allow commercial use without purchasing a license.
  29. Dynamic fonts
  30. -------------
  31. Godot supports the following dynamic font formats:
  32. - TrueType Font or Collection (``.ttf``, ``.ttc``)
  33. - OpenType Font or Collection (``.otf``, ``.otc``)
  34. - Web Open Font Format 1 (``.woff``)
  35. - Web Open Font Format 2 (``.woff2``, since Godot 3.5)
  36. While ``.woff`` and especially ``.woff2`` tend to result in smaller file sizes,
  37. there is no universally "better" font format. In most situations, it's
  38. recommended to use the font format that was shipped on the font developer's
  39. website.
  40. Bitmap fonts
  41. ------------
  42. Godot supports the BMFont (``.fnt``) bitmap font format. This is a format created
  43. by the `BMFont <https://www.angelcode.com/products/bmfont/>`__ program. Many
  44. BMFont-compatible programs also exist, like `BMGlyph <https://www.bmglyph.com/>`__.
  45. Alternatively, you can import any image to be used as a bitmap font. This is
  46. only supported for **monospaced** fonts (fonts where each character has the same
  47. width). To do so, select the image in the FileSystem dock, go to the
  48. Import dock, change its import type to **Font Data (Monospace Image Font)** then
  49. click **Reimport**:
  50. .. figure:: img/using_fonts_bitmap_font_from_image_import_options.webp
  51. :align: center
  52. :alt: Changing import type to Font Data (Monospace Image Font)
  53. Changing import type to **Font Data (Monospace Image Font)**
  54. The font's character set layout can be in any order, but orders that match
  55. standard Unicode are recommended as they'll require far less configuration to
  56. import. For example, the bitmap font below contains
  57. `ASCII <https://en.wikipedia.org/wiki/ASCII>`__ characters and follows standard ASCII ordering:
  58. .. figure:: img/using_fonts_monospace_bitmap_font_example.webp
  59. :align: center
  60. :alt: Bitmap font example
  61. Credit: `LibreQuake <https://github.com/MissLav/LibreQuake/blob/master/lq1/gfx-wad/CONCHARS.png>`__
  62. (scaled and cropped to exclude extended range)
  63. The following import options can be used to import the above font image
  64. successfully:
  65. .. figure:: img/using_fonts_bitmap_font_from_image_example_configuration.webp
  66. :align: center
  67. :alt: Import options to use for the above example font
  68. Import options to use for the above example font
  69. The **Character Ranges** option is an array that maps each position on the image
  70. (in tile coordinates, not pixels). The font atlas is traversed from left to
  71. right and top to bottom. Characters can be specified with decimal numbers
  72. (``127``), hexadecimal numbers (``0x007f``) or between *single* quotes
  73. (``'~'``). Ranges can be specified with a hyphen between characters.
  74. For instance, ``0-127`` (or ``0x0000-0x007f``) denotes the full ASCII range.
  75. As another example, ``' '-'~'`` is equivalent to ``32-127`` and denotes the range
  76. of *printable* (visible) ASCII characters.
  77. Make sure the **Character Ranges** option doesn't exceed the number of
  78. **Columns** × **Rows** defined. Otherwise, the font will fail to import.
  79. If your font image contains margins not used for font glyphs (such as
  80. attribution information), try adjusting **Image Margin**. This is a margin
  81. applied only once around the whole image.
  82. If your font image contains guides (in the form of lines between glyphs) or
  83. if spacing between characters appears incorrect, try adjusting **Character
  84. Margin**. This margin is applied for every imported glyph.
  85. Loading a font file
  86. -------------------
  87. To load a font file (dynamic or bitmap), use the resource dropdown's
  88. **Quick Load** or **Load** option next to a font property, then navigate to the
  89. font file in question:
  90. .. figure:: img/using_fonts_load_font.webp
  91. :align: center
  92. Loading a font file
  93. You can also drag-and-drop a font file from the FileSystem dock to the inspector
  94. property that accepts a Font resource.
  95. .. warning::
  96. In Godot 4.0 and later, texture filter and repeat properties are defined in
  97. the location where the texture is used, rather than on the texture itself.
  98. This also applies to fonts (both dynamic fonts and bitmap fonts).
  99. Fonts that have a pixel art appearance should have bilinear filtering disabled
  100. by changing the **Rendering > Textures > Canvas Textures > Default Texture Filter**
  101. project setting to **Nearest**. Otherwise, the font may appear to look blurry.
  102. The texture filter mode can also be set on individual nodes that inherit from CanvasItem
  103. by setting :ref:`CanvasItem.texture_filter <class_CanvasItem_property_texture_filter>`.
  104. Advanced font features
  105. ----------------------
  106. .. _doc_using_fonts_antialiasing:
  107. Antialiasing
  108. ^^^^^^^^^^^^
  109. You can adjust how the font should be smoothed out when rendering by adjusting
  110. *antialiasing* and *hinting*. These are different properties, with different use
  111. cases.
  112. Antialiasing controls how glyph edges should be smoothed out when rasterizing
  113. the font. The default antialiasing method (**Grayscale**) works well on every
  114. display technology. However, at small sizes, grayscale antialiasing may result
  115. in fonts looking blurry.
  116. The antialiasing sharpness can be improved by using LCD subpixel optimization,
  117. which exploits the subpixel patterns of most LCD displays by offsetting the font
  118. antialiasing on a per-channel basis (red/green/blue). The downside is that this
  119. can introduce "fringing" on edges, especially on display technologies that don't
  120. use standard RGB subpixels (such as OLED displays).
  121. In most games, it's recommended to stick to the default **Grayscale**
  122. antialiasing. For non-game applications, LCD subpixel optimization is worth
  123. exploring.
  124. .. figure:: img/using_fonts_antialiasing_comparison.webp
  125. :align: center
  126. :alt: Font antialiasing comparison
  127. From top to bottom: Disabled, Grayscale, LCD Subpixel (RGB)
  128. .. note::
  129. Antialiasing cannot be changed on :ref:`MSDF-rendered fonts <doc_using_fonts_msdf>`
  130. – these are always rendered with grayscale antialiasing.
  131. .. _doc_using_fonts_hinting:
  132. Hinting
  133. ^^^^^^^
  134. Hinting controls how aggressively glyph edges should be snapped to pixels when
  135. rasterizing the font. **None** results in the smoothest appearance, which can
  136. make the font look blurry at small sizes. **Light** (default) is sharper by
  137. snapping glyph edges to pixels on the Y axis only, while **Full** is even sharper
  138. by snapping glyph edges to pixels on both X and Y axes. Depending on personal
  139. preference, you may prefer using one hinting mode over the other.
  140. .. figure:: img/using_fonts_hinting_comparison.webp
  141. :align: center
  142. :alt: Font hinting comparison
  143. From top to bottom: None, Light, Full hinting
  144. .. note::
  145. If changing the hinting mode has no visible effect after clicking
  146. **Reimport**, it's usually because the font doesn't include hinting
  147. instructions. This can be resolved by looking for a version of the font file
  148. that includes hinting instructions, or enabling **Force Autohinter** in the
  149. Import dock. This will use `FreeType <https://freetype.org/>`__'s autohinter
  150. to automatically add hinting instructions to the imported font.
  151. .. _doc_using_fonts_subpixel_positioning:
  152. Subpixel positioning
  153. ^^^^^^^^^^^^^^^^^^^^
  154. Subpixel positioning can be adjusted. This is a `FreeType <https://freetype.org/>`__
  155. feature that allows glyphs to be rendered more closely to their intended form.
  156. The default setting of **Auto** automatically enables subpixel positioning at
  157. small sizes, but disables it at large font sizes to improve rasterization
  158. performance.
  159. You can force the subpixel positioning mode to **Disabled**, **One half of a
  160. pixel** or **One quarter of a pixel**. **One quarter of a pixel** provides the
  161. best quality, at the cost of longer rasterization times.
  162. Changing antialiasing, hinting and subpixel positioning has the most visible
  163. effect at smaller font sizes.
  164. .. warning::
  165. Fonts that have a pixel art appearance should have their subpixel positioning
  166. mode set to **Disabled**. Otherwise, the font may appear to have uneven pixel
  167. sizes.
  168. This step is not required for bitmap fonts, as subpixel positioning is only
  169. relevant for dynamic fonts (which are usually made of vector elements).
  170. .. _doc_using_fonts_mipmaps:
  171. Mipmaps
  172. ^^^^^^^
  173. By default, fonts do not have mipmaps generated to reduce memory usage and speed
  174. up rasterization. However, this can cause downscaled fonts to become grainy. This
  175. can be especially noticeable with :ref:`doc_3d_text` that doesn't have **Fixed
  176. Size** enabled. This can also occur when displaying text with a traditional rasterized
  177. (non-:ref:`MSDF <doc_using_fonts_msdf>`) font in a Control node that has its scale
  178. lower than ``(1, 1)``.
  179. After selecting a font in the FileSystem dock, you can enable the **Mipmaps** in
  180. the Import dock to improve downscaled font rendering appearance.
  181. Mipmaps can be enabled on MSDF fonts as well. This can improve font rencering
  182. quality a little at smaller-than-default sizes, but MSDF fonts are already
  183. resistant to graininess out of the box.
  184. .. _doc_using_fonts_msdf:
  185. MSDF font rendering
  186. ^^^^^^^^^^^^^^^^^^^
  187. Multi-channel signed distance field (MSDF) font rendering allows rendering fonts
  188. at any size, without having to re-rasterize them when their size changes.
  189. MSDF font rendering has 2 upsides over traditional font rasterization, which
  190. Godot uses by default:
  191. - The font will always look crisp, even at huge sizes.
  192. - There is less stuttering when rendering characters *at large font sizes* for
  193. the first time, as there is no rasterization performed.
  194. The downsides of MSDF font rendering are:
  195. - Higher baseline cost for font rendering. This is usually not noticeable on
  196. desktop platforms, but it can have an impact on low-end mobile devices.
  197. - Fonts at small sizes will not look as clear as rasterized fonts, due to the
  198. lack of hinting.
  199. - Rendering new glyphs for the first time *at small font sizes* may be more
  200. expensive compared to traditional rasterized fonts.
  201. :ref:`doc_using_fonts_font_prerendering` can be used to alleviate this.
  202. - LCD subpixel optimization cannot be enabled for MSDF fonts.
  203. - Fonts with self-intersecting outlines will not render correctly in MSDF mode.
  204. If you notice rendering issues on fonts downloaded from websites such as
  205. `Google Fonts <https://fonts.google.com>`__, try downloading the font from the
  206. font author's official website instead.
  207. Using emoji
  208. ^^^^^^^^^^^
  209. Godot has limited support for emoji fonts:
  210. - CBDT/CBLC (embedded PNGs) and SVG emoji fonts are supported.
  211. - COLR/CPAL emoji fonts (custom vector format) are **not** supported.
  212. For Godot to be able to display emoji, the font used (or one of its
  213. :ref:`fallbacks <doc_using_fonts_font_fallbacks>`) needs to include them.
  214. Otherwise, emoji won't be displayed and placeholder "tofu" characters will
  215. appear instead:
  216. .. figure:: img/using_fonts_emoji_placeholder_characters.webp
  217. :align: center
  218. :alt: Default appearance when trying to use emoji in a label
  219. Default appearance when trying to use emoji in a label
  220. After adding a font to display emoji such as
  221. `Noto Color Emoji <https://fonts.google.com/noto/specimen/Noto+Color+Emoji>`__,
  222. you get the expected result:
  223. .. figure:: img/using_fonts_emoji_correct_characters.webp
  224. :align: center
  225. :alt: Correct appearance after adding an emoji font to the label
  226. Correct appearance after adding an emoji font to the label
  227. To use a regular font alongside emoji, it's recommended to specify a
  228. :ref:`fallback font <doc_using_fonts_font_fallbacks>` that points to the
  229. emoji font in the regular font's advanced import options. If you wish to use
  230. the default project font while displaying emoji, leave the **Base Font**
  231. property in FontVariation empty while adding a font fallback pointing to the
  232. emoji font:
  233. .. tip::
  234. Emoji fonts are quite large in size, so you may want to :ref:`load a system
  235. font <doc_using_fonts_system_fonts>` to provide emoji glyphs rather than
  236. bundling it with your project. This allows providing full emoji support in
  237. your project without increasing the size of its exported PCK. The downside
  238. is that emoji will look different depending on the platform, and loading
  239. system fonts is not supported on all platforms.
  240. It's possible to use a system font as a fallback font too.
  241. Using icon fonts
  242. ^^^^^^^^^^^^^^^^
  243. Tools like `Fontello <https://fontello.com/>`__ can be used to generate font
  244. files containing vectors imported from SVG files. This can be used to render
  245. custom vector elements as part of your text, or to create extruded 3D icons
  246. with :ref:`doc_3d_text` and TextMesh.
  247. .. note::
  248. Fontello currently does not support creating multicolored fonts (which Godot
  249. can render). As of November 2022, support for multicolored fonts in icon
  250. font generation tools remains scarce.
  251. Depending on your use cases, this may lead to better results compared to using
  252. the ``img`` tag in :ref:`RichTextLabel <doc_bbcode_in_richtextlabel>`. Unlike
  253. bitmap images (including SVGs which are rasterized on import by Godot),
  254. true vector data can be resized to any size without losing quality.
  255. After downloading the generated font file, load it in your Godot project then
  256. specify it as a custom font for a Label, RichTextLabel or Label3D node. Switch
  257. over to the Fontello web interface, then copy the character by selecting it then
  258. pressing :kbd:`Ctrl + C` (:kbd:`Cmd + C` on macOS). Paste the character in the
  259. **Text** property of your Label node. The character will appear as a placeholder
  260. glyph in the inspector, but it should appear correctly in the 2D/3D viewport.
  261. To use an icon font alongside a traditional font in the same Control, you can
  262. specify the icon font as a :ref:`fallback <doc_using_fonts_font_fallbacks>`.
  263. This works because icon fonts use the Unicode *private use area*, which is
  264. reserved for use by custom fonts and doesn't contain standard glyphs by design.
  265. .. note::
  266. Several modern icon fonts such as `Font Awesome 6 <https://fontawesome.com/download>`__
  267. have a desktop variant that uses *ligatures* to specify icons. This allows you to
  268. specify icons by entering their name directly in the **Text** property of any
  269. node that can display fonts. Once the icon's name is fully entered as text
  270. (such as ``house``), it will be replaced by the icon.
  271. While easier to use, this approach cannot be used with font fallbacks as the main
  272. font's characters will take priority over the fallback font's ligatures.
  273. .. _doc_using_fonts_font_fallbacks:
  274. Font fallbacks
  275. ^^^^^^^^^^^^^^
  276. Godot supports defining one or more fallbacks when the main font lacks a glyph
  277. to be displayed. There are 2 main use cases for defining font fallbacks:
  278. - Use a font that only supports Latin character sets, but use another font to
  279. be able to display text another character set such as Cyrillic.
  280. - Use a font to render text, and another font to render emoji or icons.
  281. Open the Advanced Import Settings dialog by double-clicking the font file in the
  282. FileSystem dock. You can also select the font in the FileSystem dock, go to the
  283. Import dock then choose **Advanced…** at the bottom:
  284. .. figure:: img/using_fonts_advanced_import_settings.webp
  285. :align: center
  286. Import dock
  287. In the dialog that appears, look for **Fallbacks** section
  288. on the sidebar on the right, click the **Array[Font] (size 0)** text to expand
  289. the property, then click **Add Element**:
  290. .. figure:: img/using_fonts_font_fallbacks_add.webp
  291. :align: center
  292. Adding font fallback
  293. Click the dropdown arrow on the new element, then choose a font file using the
  294. **Quick Load** or **Load** options:
  295. .. figure:: img/using_fonts_font_fallbacks_load.webp
  296. :align: center
  297. Loading font fallback
  298. It is possible to add fallback fonts while using the default project font. To do
  299. so, leave the **Base Font** property empty while adding one or more font
  300. fallbacks.
  301. .. note::
  302. Font fallbacks can also be defined on a local basis similar to
  303. :ref:`doc_using_fonts_opentype_font_features`, but this is not covered here
  304. for brevity reasons.
  305. .. _doc_using_fonts_variable_fonts:
  306. Variable fonts
  307. ^^^^^^^^^^^^^^
  308. Godot has full support for `variable fonts <https://variablefonts.io/>`__, which
  309. allow you to use a single font file to represent various font weights and styles
  310. (regular, bold, italic, …). This must be supported by the font file you're using.
  311. To use a variable font, create a :ref:`class_FontVariation` resource in the
  312. location where you intend to use the font, then load a font file within the
  313. FontVariation resource:
  314. .. figure:: img/using_fonts_font_variation_create.webp
  315. :align: center
  316. Creating a FontVariation resource
  317. .. figure:: img/using_fonts_font_variation_load.webp
  318. :align: center
  319. Loading a font file into the FontVariation resource
  320. Scroll down to the FontVariation's **Variation** section, then click the
  321. **Variation Coordinates** text to expand the list of axes that can be adjusted:
  322. .. figure:: img/using_fonts_font_variation_variable_font.webp
  323. :align: center
  324. List of variation axes
  325. The set of axes you can adjust depends on the font loaded. Some variable fonts
  326. only support one axis of adjustment (typically *weight* or *slant*), while
  327. others may support multiple axes of adjustment.
  328. For example, here's the `Inter V <https://rsms.me/inter/>`__ font with a
  329. *weight* of ``900`` and a *slant* of ``-10``:
  330. .. figure:: img/using_fonts_font_variation_variable_font_example.webp
  331. :align: center
  332. Variable font example (Inter V)
  333. .. tip::
  334. While variable font axis names and scales aren't standardized, some common
  335. conventions are usually followed by font designers. For instance, the
  336. *weight* axis typically uses ``400`` as the "regular" font weight and
  337. ``700`` as the "bold" font weight.
  338. You can save the FontVariation to a ``.tres`` resource file to reuse it in other
  339. places:
  340. .. figure:: img/using_fonts_font_variation_save_to_file.webp
  341. :align: center
  342. Saving FontVariation to an external resource file
  343. .. _doc_using_fonts_opentype_font_features:
  344. OpenType font features
  345. ^^^^^^^^^^^^^^^^^^^^^^
  346. Godot supports enabling OpenType font features, which are a standardized way to
  347. define alternate characters that can be toggled without having to swap font
  348. files entirely. Despite being named OpenType font features, these are also
  349. supported in TrueType (``.ttf``) and WOFF/WOFF2 font files.
  350. Support for OpenType features highly depends on the font used. Some fonts don't
  351. support any OpenType features, while other fonts can support dozens of
  352. toggleable features.
  353. There are 2 ways to use OpenType font featutres:
  354. **Globally on a font file**
  355. Open the Advanced Import Settings dialog by double-clicking the font file in the
  356. FileSystem dock. You can also select the font in the FileSystem dock, go to the
  357. Import dock then choose **Advanced…** at the bottom:
  358. .. figure:: img/using_fonts_advanced_import_settings.webp
  359. :align: center
  360. Import dock
  361. In the dialog that appears, look for the **Metadata Overrides > OpenType
  362. Features** section on the sidebar on the right, click the
  363. **Features (0 of N set)** text to expand the property, then click
  364. **Add Feature**:
  365. .. figure:: img/using_fonts_advanced_import_settings_opentype_features.webp
  366. :align: center
  367. OpenType feature overrides in Advanced Import Settings
  368. **In a specific font usage (FontVariation)**
  369. To use a font feature, create a FontVariation resource like you would do for a
  370. :ref:`variable font <doc_using_fonts_variable_fonts>`, then load a font file
  371. within the FontVariation resource:
  372. .. figure:: img/using_fonts_font_variation_create.webp
  373. :align: center
  374. Creating a FontVariation resource
  375. .. figure:: img/using_fonts_font_variation_load.webp
  376. :align: center
  377. Loading a font file into a FontVariation resource
  378. Scroll down to the FontVariation's **OpenType Features** section, click the
  379. **Features (0 of N set)** text to expand the property, then click **Add Feature**
  380. and select the desired feature in the dropdown:
  381. .. figure:: img/using_fonts_font_variation_opentype_features.webp
  382. :align: center
  383. Specifying OpenType features in a FontVariation resource
  384. For example, here's the `Inter <https://rsms.me/inter/>`__ font without the
  385. *Slashed Zero* feature (top), then with the *Slashed Zero* OpenType feature enabled
  386. (bottom):
  387. .. figure:: img/using_fonts_font_variation_slashed_zero.webp
  388. :align: center
  389. OpenType feature comparison (Inter)
  390. .. _doc_using_fonts_system_fonts:
  391. System fonts
  392. ^^^^^^^^^^^^
  393. .. warning::
  394. Loading system fonts is only supported on Windows, macOS and Linux.
  395. System fonts are a different type of resource compared to imported fonts. They
  396. are never actually imported into the project, but are loaded at run-time. This
  397. has 2 benefits:
  398. - The fonts are not included within the exported PCK file, leading to a smaller
  399. file size for the exported project.
  400. - Since fonts are not included with the exported project, this avoids licensing
  401. issues that would occur if proprietary system fonts were distributed alongside
  402. the project.
  403. Create a SystemFont resource in the location where you desire to use the system font:
  404. .. figure:: img/using_fonts_system_font_create.webp
  405. :align: center
  406. Creating a SystemFont resource
  407. .. figure:: img/using_fonts_system_font_specify.webp
  408. :align: center
  409. Specifying a font name to use in a SystemFont resource
  410. You can either specify one or more font names explicitly (such as ``Arial``), or
  411. specify the name of a font *alias* that maps to a "standard" default font for
  412. the system:
  413. +----------------+-----------------+----------------+-------------------------+
  414. | Font alias | Windows | macOS/iOS | Linux |
  415. +================+=================+================+=========================+
  416. | ``sans-serif`` | Arial | Helvetica | *Handled by fontconfig* |
  417. +----------------+-----------------+----------------+-------------------------+
  418. | ``serif`` | Times New Roman | Times | *Handled by fontconfig* |
  419. +----------------+-----------------+----------------+-------------------------+
  420. | ``monospace`` | Courier New | Courier | *Handled by fontconfig* |
  421. +----------------+-----------------+----------------+-------------------------+
  422. | ``cursive`` | Comic Sans MS | Apple Chancery | *Handled by fontconfig* |
  423. +----------------+-----------------+----------------+-------------------------+
  424. | ``fantasy`` | Gabriola | Papyrus | *Handled by fontconfig* |
  425. +----------------+-----------------+----------------+-------------------------+
  426. If specifying more than one font, the first font that is found on the system
  427. will be used (from top to bottom). Font names and aliases are case-insensitive
  428. on all platforms.
  429. Like for font variations, you can save the SystemFont arrangement to a resource
  430. file to reuse it in other places.
  431. .. note::
  432. Unlike Windows and macOS/iOS, the set of default fonts shipped on Linux
  433. depends on the distribution. This means that on different Linux
  434. distributions, different fonts may be displayed for a given system font name
  435. or alias.
  436. .. _doc_using_fonts_font_prerendering:
  437. Font prerendering
  438. ^^^^^^^^^^^^^^^^^
  439. When using traditional rasterized fonts, Godot caches glyphs on a per-font and
  440. per-size basis. This reduces stuttering, but it can still occur the first time a
  441. glyph is displayed when running the project. This can be especially noticeable
  442. at higher font sizes or on mobile devices.
  443. When using MSDF fonts, they only need to be rasterized once to a special signed
  444. distance field texture. This means caching can be done purely on a per-font
  445. basis, without taking the font size into consideration. However, the initial
  446. rendering of MSDF fonts is slower compared to a traditional rasterized font at a
  447. medium size.
  448. To avoid stuttering issues related to font rendering, it is possible to
  449. *prerender* certain glyphs. This can be done for all glyphs you intend to use
  450. (for optimal results), or only for common glyphs that are most likely to appear
  451. during gameplay (to reduce file size). Glyphs that aren't pre-rendered will be
  452. rasterizd on-the-fly as usual.
  453. .. note::
  454. In both cases (traditional and MSDF), font rasterization is done on the CPU.
  455. This means that the GPU performance doesn't affect how long it takes for fonts
  456. to be rasterized.
  457. Open the Advanced Import Settings dialog by double-clicking the font file in the
  458. FileSystem dock. You can also select the font in the FileSystem dock, go to the
  459. Import dock then choose **Advanced…** at the bottom:
  460. .. figure:: img/using_fonts_advanced_import_settings.webp
  461. :align: center
  462. Import dock
  463. Move to the **Pre-render Configurations** tab of the Advanced Import Settings dialog,
  464. then add a configuration by clicking the "plus" symbol:
  465. .. figure:: img/using_fonts_advanced_import_settings_prerender_new_configuration.webp
  466. :align: center
  467. :alt: Adding a new prerendering configuration in the Advanced Import Settings dialog
  468. Adding a new prerendering configuration in the Advanced Import Settings dialog
  469. After adding a configuration, make sure it is selected by clicking its name
  470. once. You can also rename the configuration by double-clicking it.
  471. There are 2 ways to add glyphs to be prerendered to a given configuration. It is
  472. possible to use both approaches in a cumulative manner:
  473. **Using text from translations**
  474. For most projects, this approach is the most convenient to use, as it
  475. automatically sources text from your language translations. The downside is that
  476. it can only be used if your project supports
  477. :ref:`internationalization <doc_internationalizing_games>`. Otherwise, stick to
  478. the "Using custom text" approach described below.
  479. After adding translations to the Project Settings, use the
  480. **Glyphs from the Translations** tab to check translations by double-clicking them,
  481. then click **Shape All Strings in the Translations and Add Glyphs** at the bottom:
  482. .. figure:: img/using_fonts_advanced_import_settings_prerender_translation.webp
  483. :align: center
  484. :alt: Enabling prerendering in the Advanced Import Settings dialog with the Glyphs from the Translations tab
  485. Enabling prerendering in the Advanced Import Settings dialog with the **Glyphs from the Translations** tab
  486. .. note::
  487. The list of prerendered glyphs is not automatically updated when
  488. translations are updated, so you need to repeat this process if your
  489. translations have changed significantly.
  490. **Using custom text**
  491. While it requires manually specifying text that will appear in the game, this is
  492. the most efficient approach for games which don't feature user text input. This
  493. approach is worth exploring for mobile games to reduce the file size of the
  494. distributed app.
  495. To use existing text as a baseline for prerendering, go to the **Glyphs from the
  496. Text** sub-tab of the Advanced Import Settings dialog, enter text in the window
  497. on the right, then click **Shape Text and Add Glyphs** at the bottom of the
  498. dialog:
  499. .. figure:: img/using_fonts_advanced_import_settings_prerender_text.webp
  500. :align: center
  501. :alt: Enabling prerendering in the Advanced Import Settings dialog, Glyphs from the Text tab
  502. Enabling prerendering in the Advanced Import Settings dialog with the **Glyphs from the Text** tab
  503. .. tip::
  504. If your project supports :ref:`internationalization <doc_internationalizing_games>`,
  505. you can paste the contents of your CSV or PO files in the above box to quickly
  506. prerender all possible characters that may be rendered during gameplay
  507. (excluding user-provided or non-translatable strings).
  508. **By enabling character sets**
  509. The second method requires less configuration and fewer updates if your game's
  510. text changes, and is more suited to text-heavy games or multiplayer games with
  511. chat. On the other hand, it may cause glyphs that never show up in the game to
  512. be prerendered, which is less efficient in terms of file size.
  513. To use existing text as a baseline for prerendering, go to the **Glyphs from the
  514. Character Map** sub-tab of the Advanced Import Settings dialog, then
  515. *dobule-click* character sets to be enabled on the right:
  516. .. figure:: img/using_fonts_advanced_import_settings_prerender_character_map.webp
  517. :align: center
  518. :alt: Enabling prerendering in the Advanced Import Settings dialog, Glyphs from the Character Map tab
  519. Enabling prerendering in the Advanced Import Settings dialog with the **Glyphs from the Character Map** tab
  520. To ensure full prerendering, the character sets you need to enable depend on
  521. which languages are supported in your game. For English, only **Basic Latin**
  522. needs to be enabled. Enabling **Latin-1 Supplement** as well allows fully
  523. covering many more languages, such as French, German and Spanish. For Russian,
  524. **Cyrillic** needs to be enabled, and so on.
  525. Default project font properties
  526. ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  527. In the **GUI > Theme** section of the advanced Project Settings, you can choose
  528. how the default font should be rendered:
  529. - **Default Font Antialiasing:** Controls the
  530. :ref:`antialiasing <doc_using_fonts_antialiasing>` method used
  531. for the default project font.
  532. - **Default Font Hinting:** Controls the
  533. :ref:`hinting <doc_using_fonts_hinting>` method used for
  534. the default project font.
  535. - **Default Font Subpixel Positioning:** Controls the
  536. :ref:`subpixel positioning <doc_using_fonts_subpixel_positioning>`
  537. method for the default project font.
  538. - **Default Font Multichannel Signed Distance Field:** If ``true``, makes the
  539. default project font use `MSDF font rendering <doc_using_fonts_msdf>` instead
  540. of traditional rasterization.
  541. - **Default Font Generate Mipmaps:** If ``true``, enables
  542. :ref:`mipmap <doc_using_fonts_mipmaps>` generation and
  543. usage for the default project font.
  544. .. note::
  545. These project settings *only* affect the default project font (the one that
  546. is hardcoded in the engine binary).
  547. Custom fonts' properties are governed by their respective import options
  548. instead. You can use the **Import Defaults** section of the Project Settings
  549. dialog to override default import options for custom fonts.