Skip to main content

How to use the font styles

Define a font​

When you display a text with the TextComponent, you can change the font of the text with the TextFontConfiguration key. For example, we define here a TextComponent with a custom system font (see Fonts). It has a size of 30 points, is aligned to the center of the TextComponent and has a "Semibold" weight.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
			<key>Containers</key>
			<array>
				<dict>
					<key>Components</key>
                    <array>
                        <dict>
                            <key>Type</key>
                            <string>Text</string>
                            <key>Text</key>
                            <string>Hello there!</string>
                            <key>TextFontConfiguration</key>
                            <dict>
                                <key>SystemFontWeight</key>
                                <string>Semibold</string>
                                <key>Size</key>
                                <integer>30</integer>
                                <key>TextAlignment</key>
                                <string>Center</string>
                            </dict>
                        </dict>
                    </array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>

Use a custom font​

Note that you can specify a font from the Fonts book with the Name key. To do so, specify the PostScript name of the font (⌘I after having selected the font). For example, to use the Arial normal font, we would specify "ArialMT", whereas we will specify "Arial-BoldMT" for the bold version. Here we use it with the previous example.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
			<key>Containers</key>
			<array>
				<dict>
					<key>Components</key>
                    <array>
                        <dict>
                            <key>Type</key>
                            <string>Text</string>
                            <key>Text</key>
                            <string>Hello there!</string>
                            <key>TextFontConfiguration</key>
                            <dict>
                                <key>Name</key>
                                <string>Arial-MT</string>
                                <key>Size</key>
                                <integer>30</integer>
                                <key>TextAlignment</key>
                                <string>Center</string>
                            </dict>
                        </dict>
                    </array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>

Reusing a font​

Now, if we want to reuse this font for another TextComponent, rather than copying the same TextFontConfiguration dictionary, we will move this font to the FontStyles section, and reuse it in both TextComponents. To do so, we will have to name the font so that we can find it by its name. Here, we'll name it "Title" but you are free to name it the way you want of course. Here is what the FontStyles section will look like:

<key>FontStyles</key>
<dict>
	<key>Title</key>
	<dict>
		<key>SystemFontWeight</key>
		<string>Semibold</string>
		<key>Size</key>
		<integer>30</integer>
		<key>TextAlignment</key>
		<string>Center</string>
	</dict>
</dict>

Now we can use this font by just specifying its name in the TextComponent:

<dict>
    <key>Type</key>
    <string>Text</string>
    <key>Text</key>
    <string>Hello there!</string>
    <key>TextFontConfiguration</key>
    <string>Title</string>
</dict>

The same goes for any other TextComponent which has to use this font.

Reusing & Customizing a font​

Now imagine you have a TextComponent in which you want to reuse the font "Title" but you want to add a specific color to it, and change the key SystemFontWeight to "Medium". Rather than writing all the "Title" font dictionary to change the specific attributes, you can use the font "Title" as the parent Style key and change what you want. Here is the code:

<dict>
    <key>Type</key>
    <string>Text</string>
    <key>Text</key>
    <string>Hello there!</string>
    <key>TextFontConfiguration</key>
    <dict>
        <key>Style</key>
        <string>Title</string>
        <key>SystemFontWeight</key>
        <string>Medium</string>
        <key>Color</key>
        <dict>
            <key>DarkMode</key>
            <string>#5F6796</string>
            <key>LightMode</key>
            <string>#965741</string>
        </dict>
    </dict>
</dict>

This final feature lets you locally have a deeper level of customisation.

Discover more​

You can see how fonts are used in the High-quality images presets in the materials repository.

Last updated on