An example of using custom fonts with dynamic type making use of the UIFontMetrics class introduced with iOS 11. It provides examples using the Noteworthy font that Apple ships built-in to iOS and the Noto Serif font which you can download from google fonts:
See the LICENSE.txt file if you plan on using Noto Serif in a shipping application.
There are two targets in this project:
- Sampler - A UIKit example that requires a minimum of iOS 11
- SamplerUI - A SwiftUI example that requires a minimum of iOS 14
The ScaledFont implementation is now provided as a Swift Package Manager dependency. You can find the GitHub repository for the package here:
The ScaledFont type is a utility type to help you use custom fonts with dynamic type. You must give the name of a style dictionary for the font when creating the ScaledFont. You include the style dictionary as a property list file in the main bundle of your app.
The style dictionary contains an entry for each text style. The available text styles are:
largeTitle,title,title2,title3headline,subheadline,body,calloutfootnote,caption,caption2
The value of each entry is a dictionary with two keys:
fontName: AStringwhich is the font name.fontSize: A number which is the point size to use at the.large(base) content size.
For example to use a 17 pt Noteworthy-Bold font for the .headline style at the .large content size:
<dict>
<key>headline</key>
<dict>
<key>fontName</key>
<string>Noteworthy-Bold</string>
<key>fontSize</key>
<integer>17</integer>
</dict>
</dict>
You do not need to include an entry for every text style but if you try to use a text style that is not included in the dictionary it will fallback to the system preferred font.
For UIKit, apply the scaled font to text labels, text fields or text views:
let scaledFont = ScaledFont(fontName: "Noteworthy")
label.font = scaledFont.font(forTextStyle: .headline)
label.adjustsFontForContentSizeCategory = trueRemember to set the adjustsFontFotContentSizeCategory property to have the font size adjust automatically when the user changes their preferred content size.
For SwiftUI, add the scaled font to the environment of a view:
ContentView()
.environment(\.scaledFont, scaledFont)Then apply the scaled fint view modifier to any view containing text in the view hierarchy:
Text("Headline")
.scaledFont(.headline)See these blog posts for further details: