Shopify's Font Picker and GemPages Font picker already provide you with many options. However, if they don't satisfy you, you still have the option to manually upload fonts to Shopify.
Upload font to your theme
Step 1: Download the third-party font you want to add to your site. Ideally, each font will include 4 font files:
- .ttf /.otf
- .woff (or .woff2)
- .svg
- .eot
Step 2: Upload the font files to your theme
- From Shopify admin >> Online Store >> Themes >> Actions >> Edit Codes
- Scroll down to section Assets and select Add a new asset
Step 3: Manually upload your font files one by one
Step 4: Add font-face
- Open file theme.scss.
- Add this following codes to the mentioned files at the bottom of the file:
@font-face {
font-family: "FontName";
src: url('{{ "FontName.eot" | asset_url }}');
src: url('{{ "FontName.eot" | asset_url }} ?#iefix') format("embedded-opentype"),
url('{{ "FontName.woff" | asset_url }}') format("woff"),
url('{{ "FontName.woff2" | asset_url }}') format("woff2"),
url('{{ "FontName.ttf" | asset_url }}') format("truetype"),
url('{{ "FontName.svg" | asset_url }} #FontName') format("svg");
}
Step 4: Now the fonts are uploaded, and the files referenced, we can include the fonts in our store.
Integrate the uploaded custom font to GemPages
Step 1: From GemPages editor, click on a text-based element ( Heading, Text Block, etc..) to reveal the settings on the left sidebar.
Step 2: Under tab Settings, select Font Manager
Step 3: In Font Manager, select Add custom font at the top right corner
Step 4: Paste the exact font name into the field and hit Add.
Step 5: Hit Save. You will notice your custom font is now added in the dropdown of Settings editor.