One often overlooked element in mobile application design is the font. While the focus during design and development typically centers on colors and images, paying attention to font choice can significantly enhance your app’s appeal. If you’re interested in giving your app a unique improvement that sets it apart, this insightful post is for you.
In this post we’ll see how use the font width and how use a custom font.
Font width
In SwiftUI are existing four value for the font width:
- Standard
- Compressed
- Expanded
- Condensed
In the code:
struct ContentView: View {
var body: some View {
VStack {
Text("Hello world")
.fontWidth(.compressed)
Text("Hello world")
.fontWidth(.expanded)
Text("Hello world")
.fontWidth(.condensed)
}.font(.largeTitle)
}
}
To have this:
Custom Font
Now see how add a font:
- download Fredoka from here https://fonts.google.com/specimen/Fredoka
- add it to the project select from the File menu “Add file to your project” and select the font file
- write the font file mane in the info section “Font provided by application
To use a custom font with the given name
and size
that scales relative to the given textStyle
. Example:
struct ContentView: View {
var body: some View {
Text("Welcome - first screen")
.font(Font.custom("Fredoka-Regular", size: 30, relativeTo: .largeTitle))
}
}
Enjoy with the fonts!