Use a Different Font on my Site
Updated over a week ago

If you wish to use a custom/proprietary font, then you will need to upload your custom font file as an asset, then figure out the best way to import that font, which may require the help of a developer if you do not have one on staff to assist you.

If you'd like to use a Google font on your site, and you understand CSS, you can easily apply a Google font. Just follow the steps outlined below.

Step 1: Make a backup of your site before you proceed to ensure you can restore your site in the event that you accidentally break some code. Whenever you make code modifications, we always emphasize the importance of making a backup.

Step 2: Determine which Google font(s) you wish to import by visiting https://fonts.google.com/.

Step 3: Select the appropriate font, and you will see a window pop up on the right-hand side of your screen of the selected font family. Click on Embed, then click on @import to grab the import embed code.

Screen_Shot_2020-06-24_at_12.40.24_PM.png

Step 4: Create a new stylesheet for the font styling rules you want to apply. Create this new sheet by navigating to Customization > Advanced > Code Editor. Then click + New File in the upper right-hand corner to create a new file. Make sure to name the file with something intuitive, then select the file format as CSS from the dropdown. Click on Create New Template.

New_Template_-_styles_css.gif

Step 5: Click on your new file name under the Assets section of the Code Editor, which will be located on the bottom left-hand side. Add your import embed code to this new file. Now, add the respective classes you wish to apply the font(s) to, then click Save Changes. If you don't know what classes to apply a font to, usually you can inspect your page using dev tools and then grab the class name from the block you are trying to style. (More details in the above video on this if you aren't familiar).

Screen_Shot_2020-06-24_at_12.43.54_PM.png

Step 6: Import your new CSS file into the theme.liquid file by copying an existing template in that section that ends with '.css', as you also want to import this file as a stylesheet_link. Make sure to change the file name accordingly.

Screen_Shot_2020-06-24_at_12.48.39_PM.png

Step 7: Check out your site to see if you successfully added the CSS modifications to the font family for the selected elements.

If not, you may need to check this in another browser in the event that your browser cache is holding on to a previous state of your site (or, you can clear your browser cache). If all looks good, we recommend making a fresh backup that includes your new changes.

NOTE: Our support team is unable to provide you with assistance with custom coding. Custom coding access requires you to be on our Plus plan. If you're not on our Plus plan please reach out to sales@uscreen.tv to discuss an upgrade.

Did this answer your question?