{"id":5665,"date":"2022-10-27T07:51:14","date_gmt":"2022-10-27T07:51:14","guid":{"rendered":"https:\/\/littlethemeshop.com\/?p=5665"},"modified":"2023-08-12T00:13:09","modified_gmt":"2023-08-12T00:13:09","slug":"how-to-add-custom-fonts-to-a-shopify-theme","status":"publish","type":"post","link":"https:\/\/littlethemeshop.com\/how-to\/how-to-add-custom-fonts-to-a-shopify-theme\/","title":{"rendered":"How to Add Custom Fonts to a Shopify Theme"},"content":{"rendered":"\n<p>Out of the box, Shopify comes with a ton of font options that will meet most users needs. However, if you have your heart set on a specific font and need it added to your <a href=\"https:\/\/littlethemeshop.com\/category\/shopify-themes\/\" data-type=\"URL\" data-id=\"https:\/\/littlethemeshop.com\/category\/shopify-themes\/\">Shopify theme<\/a>, here&#8217;s a quick step-by-step tutorial to show you how to do that.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Download your font<\/h2>\n\n\n\n<p>Make sure you have a font file ready. Your font might be in TTF, OTF, WOFF, or WOFF2 format. Ideally, for the web, you should use a .woff or .woff2 format. You can convert your font using <a href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\">Font Squirrel&#8217;s webfont generator.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Upload your font<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-medium is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/littlethemeshop.com\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-27-at-2.23.15-AM-571x600.png\" alt=\"\" class=\"wp-image-5667\" width=\"418\" height=\"439\" srcset=\"https:\/\/littlethemeshop.com\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-27-at-2.23.15-AM-571x600.png 571w, https:\/\/littlethemeshop.com\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-27-at-2.23.15-AM.png 594w\" sizes=\"(max-width: 418px) 100vw, 418px\" \/><\/figure>\n\n\n\n<p>Next, while in Shopify, go to Online Store > Themes > (three dots) > Edit Code. Scroll down to <strong>Assets <\/strong>and click &#8220;Add a new asset.&#8221; Upload your font file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Add CSS<\/h2>\n\n\n\n<p>Next, open <strong>Header.liquid<\/strong> from under<strong> Sections<\/strong> and copy and paste the below code inside the &lt;style&gt;&lt;\/style&gt; brackets. Remember to replace &#8220;your-font-file&#8221; with the file name of your custom font and &#8220;My Custom Font&#8221; with the name of your font.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@font-face {\n  font-family: 'My Custom Font';\n  src: url('{{ 'custom-font.woff2' | asset_url}}') format('woff2'), url('{{ 'custom-font.woff' | asset_url}}') format('woff');\n  font-weight: normal;\n  font-style: normal;\n}\n\/* To replace the titles only *\/\n\nh1, h2, h3, h4, h5, h6 {\n  font-family: 'My Custom Font', sans-serif !important;\n}\n\/* To replace the body\/paragraphs only *\/\n\np, li, span {\n  font-family: 'My Custom Font', sans-serif !important;\n}<\/pre>\n\n\n\n<p>Save when you&#8217;re done and exit the Code Editor. You should see your changes, but if you don&#8217;t, remember to clear your browser cache.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Update: Alternative Method<\/h2>\n\n\n\n<p>If the above method doesn&#8217;t work, try uploading your font file under<strong> Content > Files <\/strong>instead. Next, copy the link and use this CSS code instead, replacing &#8220;your-font-link&#8221; with the link you just copied:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@font-face {\n  font-family: 'My Custom Font';\n  src: url('{{ 'your-font-link}}') format('woff2'), url('{{ 'your-font-link}}') format('woff');\n  font-weight: normal;\n  font-style: normal;\n}\n\/* To replace the titles only *\/\n\nh1, h2, h3, h4, h5, h6 {\n  font-family: 'My Custom Font', sans-serif !important;\n}\n\/* To replace the body\/paragraphs only *\/\n\np, li, span {\n  font-family: 'My Custom Font', sans-serif !important;\n}<\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you have your heart set on a specific font and need it added to your Shopify theme, here&#8217;s a quick step-by-step tutorial to show you how to do that.<\/p>\n","protected":false},"author":1,"featured_media":5666,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[310],"tags":[328,364],"class_list":["post-5665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-how-to","tag-shopify-tutorial"],"_links":{"self":[{"href":"https:\/\/littlethemeshop.com\/wp-json\/wp\/v2\/posts\/5665"}],"collection":[{"href":"https:\/\/littlethemeshop.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/littlethemeshop.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/littlethemeshop.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/littlethemeshop.com\/wp-json\/wp\/v2\/comments?post=5665"}],"version-history":[{"count":4,"href":"https:\/\/littlethemeshop.com\/wp-json\/wp\/v2\/posts\/5665\/revisions"}],"predecessor-version":[{"id":6124,"href":"https:\/\/littlethemeshop.com\/wp-json\/wp\/v2\/posts\/5665\/revisions\/6124"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/littlethemeshop.com\/wp-json\/wp\/v2\/media\/5666"}],"wp:attachment":[{"href":"https:\/\/littlethemeshop.com\/wp-json\/wp\/v2\/media?parent=5665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/littlethemeshop.com\/wp-json\/wp\/v2\/categories?post=5665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/littlethemeshop.com\/wp-json\/wp\/v2\/tags?post=5665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}