This article contains helpful details to implement custom fonts — however, the code changes and additions could be tricky, and altering specific classes of the font will require a bit of investigation. While we're unable to help out with these aspects of Custom Fonts from the Help Center directly, we do have a number of recommended experts to assist with these changes.
The latest versions of all Out of the Sandbox themes include integration with Shopify's font picker, which may make it unnecessary for you to use the steps below. Adding additional fonts to Shopify's font picker menus is not possible at this time.
Upload the Font File
To upload your font file(s), go to Sales Channels > Online Store > Themes > Actions > Edit Code and scroll down to the bottom of the sidebar. For detailed instructions on this process, visit here.
Locate the folder named "Assets" and click to expand it. Select Add a new asset to upload the font file.
Add code to stylesheet
After the font is uploaded, select styles.css.liquid (also in Assets). At the bottom of the file, you'll find instructions for using your own font. Remove the comments and any format that doesn't apply. For example, if you don't have 'EOT' format, just remove that.
/* #Font-Face
================================================== */
/* This is the proper syntax for an @font-face file.
Upload your font files to Assets and then
copy your FontName into code below and remove
comment brackets */
@font-face {
font-family: 'FontName';
src: url('FontName.eot');
src: url('FontName.eot?iefix') format('eot'),
url('FontName.woff') format('woff'),
url('FontName.ttf') format('truetype'),
url('FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
Then apply that font to the various elements using custom CSS in the styles.scss.liquid file (also in the Assets folder). If you would like to use that font for headings, you can add this to the bottom of the file:
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: 'FontName' !important; }
Please note that this will not add the font to the drop-down menus or the Shopify font picker throughout the customize theme control panel.
For newer versions of themes that use Shopify's built-in font picker, which is required by Shopify, there is no way to add fonts to the font picker menu.
Instead, you will need to use custom CSS to use a font not featured in the picker, which requires custom code outside of what Out of the Sandbox supports. You can hire an expert to help out with this update.