With access to the code editor, learn to add custom fonts for your Heading and Body Text in your page. 

In this article:

• Adding custom heading and body fonts
• Step 1. Open the code editor
• Step 2. Upload your font files
• Step 3. Specify your two custom fonts

Adding custom heading and body fonts

Adding custom fonts will populate the font across all text in the page and
will not be an option added to your Typography settings. 

Although your custom font will populate the fonts across all text in your page, this guide will demonstrate how you can apply a different custom font for your heading and a different custom font for your body text.

Step 1. Open the code editor

To add custom fonts to your page, open the code editor for your desired page:

• Website page
• Landing page
• Product page

Step 2. Upload your font files

Depending on the page you wish to add your custom fonts to this step may vary. 

Learn to upload your font files for:

• Website page
• Landing page
• Product page

For the purpose of this guide, we will upload our font files to a landing page:

• Open the Website tab from your Dashboard.
• Click Pages from the sidebar.
• Select … on the page you want to work with and choose Edit Code.
• Open the Assets folder.
• Click Upload Asset and choose your font file or drag it into the uploader:

Then, repeat to upload your second font file to the same Assets folder.

Step 3. Specify your two custom fonts

In this guide, the first custom font will be used for the heading text and the second custom font will be used for the body text.

You'll notice that each code snippet differs slightly to specify the font file used for the heading text and the font file used for the body text.

After successfully uploading the font files, specify your two custom fonts:

• Open the styles.scss.liquid folder.
• Copy and paste the following code for your first and second font files at the very bottom of the styles.scss.liquid file replacing "yourfontname.ttf" with your custom font file names:

First code snippet for your heading text:

@font-face { font-family: "Font1"; src: url({{ 'yourfontname.ttf' | asset_url }}); } h1, h2, h3, h4, h5, h6, ul, ol, a { font-family: "Font1", sans-serif; }

In the next line following your first snippet of code, copy and paste your second snippet of code, replacing "yourfontname.ttf" with the name of your custom font file for your body text:

Second code snippet for your body text:

@font-face { font-family: "Font2"; src: url({{ 'yourfontname.ttf' | asset_url }}); } body, p { font-family: "Font2", sans-serif; }

• Click Save to apply your changes.
• After the "save" button turns white, click Preview to confirm the typeface changes: