Deposit a font in the HTML Experience with Experience Builder

experience builder experience builder summary 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 preconditions 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 black black italic bold bold italic italic light light italic regular have the information in place for each of the font types style weight how to guide 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