docs: Custom Fonts documentation screenshot is incorrect

[dfabulich]

https://skip.tools/docs/modules/skip-ui/#custom-fonts

Custom Fonts

Custom fonts can be embedded and referenced using Font.custom. Fonts are loaded differently depending on the platform. On iOS the custom font name is the full Postscript name of the font, and on Android the name is the font’s file name without the extension.

Android requires that font file names contain only alphanumeric characters and underscores, so you should manually name your embedded font to the lowercased and underscore-separated form of the Postscript name of the font. SkipUI’s Font.custom call will accommodate this by translating your custom font name like “Protest Guerrilla” into an Android-compatible name like “protest_guerrilla.ttf”.

Text("Custom Font")
    .font(Font.custom("Protest Guerrilla", size: 30.0)) // protest_guerrilla.ttf

Custom fonts are embedded differently for each platform. On Android you should create a folder Android/app/src/main/res/font/ and add the font file, which will cause Android to automatically embed any fonts in that folder as resources.

For iOS, you must add the font by adding to the Xcode project’s app target and ensure the font file is included in the file list in the app target’s “Build Phases” tab’s “Copy Bundle Resources” phase. In addition, iOS needs to have the font explicitly listed in the Xcode project target’s “Info” tab under “Custom Application Target Properties” by adding a new key for the “Fonts provided by application” (whose raw name is “UIAppFonts”) and adding each font’s file name to the string array.

See the Skip Showcase app TextPlayground for a concrete example of using a custom font, and see that project’s Xcode project file (screenshot) to see how the font is included on both the iOS and Android sides of the app.

That screenshot wasted a ton of my time. https://assets.skip.tools/screens/SkipUI_Custom_Font.png

Let's start by noticing that the screenshot is not an accurate depiction of the Xcode project for skipapp-showcase. Here's where the files really are.

% git ls-files . | grep protest | xargs ls -l
lrwxr-xr-x  1 dfabulich  staff     66 Feb 17 10:59 Android/app/src/main/res/font/protest_guerrilla.ttf -> ../../../../../../Sources/Showcase/Resources/protest_guerrilla.ttf
-rw-r--r--@ 1 dfabulich  staff  84512 Feb 17 10:59 Sources/Showcase/Resources/protest_guerrilla.ttf
% git grep protest_guerrilla
Darwin/Info.plist:              <string>protest_guerrilla.ttf</string>
Darwin/Showcase.xcodeproj/project.pbxproj:              490010192BACD83F0000DE33 /* protest_guerrilla.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 490010182BACD83F0000DE33 /* protest_guerrilla.ttf */; };
Darwin/Showcase.xcodeproj/project.pbxproj:              490010182BACD83F0000DE33 /* protest_guerrilla.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = protest_guerrilla.ttf; path = ../Sources/Showcase/Resources/protest_guerrilla.ttf; sourceTree = "<group>"; };
Darwin/Showcase.xcodeproj/project.pbxproj:                              490010182BACD83F0000DE33 /* protest_guerrilla.ttf */,
Darwin/Showcase.xcodeproj/project.pbxproj:                              490010192BACD83F0000DE33 /* protest_guerrilla.ttf in Resources */,
Sources/Showcase/TextPlayground.swift:                    .font(Font.custom("Protest Guerrilla", size: 30.0)) // protest_guerrilla.ttf

• The file is checked in exactly once in Sources/Showcase/Resources/protest_guerrilla.ttf
• The there's a symlink in Android/app/src/main/res/font/protest_guerrilla.ttf pointing to the font file
• There's an Xcode project reference in the "App" group referencing the font file as well
• The Info.plist file then refers to the file as protest_guerrilla.ttf, using the project reference to find the actual file

Figuring this out took me an embarrassingly long time. The worst part is that when you mess it up, the build succeeds, and the app just silently shows the system-default font, with no warning or message in the logs about missing fonts.

Here's an actual, decent screenshot (but I had to move all of the *Playground.swift files into a fake folder, "MovedFilesForScreenshot", in order to fit the three protest_guerrilla.ttf lines on the screen, plus the Info.plist line).