Deposit a font in the HTML Experience with Experience Builder
Your HTML Experience can be styled with your desired font.
In this article, you learn how to deposit a new font to the Storefront folder in the Experience builder, by deleting the existing font in the fonts folder and uploading the files of your new font. Besides, you will assign the Name of the font files, the font style, the font weight and the file source in the fonts.css. Afterwards, you will create a preview version and merge the changes to make them available in your app.
Have the licence for your font family downloaded to your computer as txt file
Have downloaded to your computer the TTF files of the following font types from the font family:
Have the information in place for each of the font types:
1. Go to Experience Builder, choose your app in the list and click on it
2. Click on 'Pull from Preview'
3. Click on 'default'
4. Click on 'storefront'
5. Click on 'assets'
6. Click on 'fonts'
7. Mark all files in the folder
8. Click on 'Actions'
9. Click on 'Delete files'
10. Wait until all files are deleted
11. Click on 'Actions'
12. Click on 'Upload files' and upload all font files including the licence of your desired font
13. Wait until the upload is finished
14. Click on 'assets'
15. Click on 'fonts.css'
16. Keep fonts.css open (DO NOT close it by clicking on the X) and click on 'fonts'
17. Go to the end of the second paragraph, mark and delete the from this point on following data in the file
18. In the second paragraph, next to 'font-family' mark the name of the font in quotation marks, e.g. 'OpenSans-Light' and overwrite it with the name of your font in Light, e.g. 'Roboto-Light'
19. Go to 'font-style' and overwrite the orange text with the specification for this font, coming from your font description. E.g. 'light' in the example for 'Roboto-Light'
20. Go to 'font weight' and overwrite the green number with the font weight specified for this font in your font description. E.g. '300' in the example for 'Roboto-Light'
21. Go to 'src' and overwrite the file name in the URL in brackets, with the name of your font. E.g. 'fonts/Roboto-Light.ttf' in the example for 'Roboto-Light'
22. Mark the whole paragraph
23. Copy and paste it below the last one in your file
24. Repeat the steps 18 to 23 until you have it done for all uploaded font files, e.g. for font-black.ttf; font-blackitalic.ttf; font-bold.ttf; font-bolditalic.ttf; font-italic.ttf; font-light.ttf; font-lightitalic.ttf; font-regular.ttf
25. Click on the burger menu
26. Click on 'Update Dynamic Resources'
27. Name your changes, e.g. 'new-fonts'
28. Click on 'Merge all files to preview'
You have successfully uploaded and assigned a new font to the Experience HTML in your app, merged the changes and updated the dynamic resources. You can test the result in the preview and push them live if they look fine, to make them visible in your live app.