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:
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:
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: