Custom fonts in Swift
By default, Swift is loaded with the Google Fonts. This gives a lot of different fonts to choose from, when designing the branding of the page. Should you want to use the custom fonts this is also possible. Below is a guide on how to set it up and how to choose and use custom fonts on the Branding page.
To make your Swift solution ready for custom fonts, you have to create a new page in the design folder.
- Go to Swift tools > Design
- Right click on the Design folder and create a new page
- As page type choose Fonts Collection and name it "Custom fonts"
- Make sure to keep it on hide in menu. This is done under publication.
It is on this page, that your new custom fonts should be placed. We will show how to create one new font:
- On the new page “Custom fonts” create a new paragraph
- Choose Font as paragraph
- Name it according to the custom font you are adding and its weight. This could be “Satoshi – Regular”
Now you will have to give some information about the new font.
- Name – This field contains the information given when creating the paragraph. Make sure to give the paragraph a name that you can recognize as the name is what you will see in the Branding page
- Font family name - As fonts can have similar style with different weight, this is font families. To group multiple fonts in the same font family, make sure to name the font family exactly the same.
- Font weight and font style - The font weight and style fields are were you choose how the font will look. The weight field spans from Thin 100 to Black 900. In the font style field you choose either normal or italic.
- File - The last field is where you link the paragraph to the font file. Remember it is only .tff, .woff, and .woff2 file extensions that are allowed. You can either use the upload button to upload fonts or navigate to the folder and add it in the default font folder. The default directory is /Files/Templates/Designs/Swift/Assets/fonts. Most importantly you should remember that you cannot use spaces in the name for your font files.
When all the information has been entered remember to hit Save and close. Then you have added a custom font. Should you want to add more custom fonts, you just add a new paragraph.
Remember that you might need to do a hard refresh to see the new fonts.
How to use custom fonts in swift
Custom fonts works a lot like the default Google Fonts. To select custom fonts you have to enter the branding page located in Swift tools -> Design. Here you select “Custom” in the Header font settings. After clicking on “Custom” all the custom fonts added will be displayed with name, weight, style and a little example of how they look.