Deposit a font in the HTML Experience with Experience Builder

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'