Add custom fonts to your Concept theme

Shopify provides hundreds of free fonts to use for your store. However, you need to use a custom font to get aligned with your brand guideline but it is not supported by Shopify, you can still add it to your theme.

Before font custom	After font custom

You can customize the fonts in your Concept theme using one of two below methods:

Edit liquid code (Highly recommended)

Here's a 9-step guide to achieve this:
1. You need to have your font available first. Some fonts have licenses, so make sure you purchase them properly for your use. Our support team will not be in charge of getting your required fonts.
2. Next, prepare two files with the format .woff and .woff2 for each font style to be added. This is to make sure that your added font is readable on all types of browsers.
3. After having sufficient files, you upload them via [Admin dashboard] > [Content]¹ > [Files]² > [Upload]³.
  
  All your uploaded font files have the chain button on the right side to provide the file link for your act of copying.
4. Next, get back to your admin dashboard, click on [Online store]¹ > [Themes]² > choose Concept theme > click on [Action]³ > [Edit code]⁴.
5. In the open edit code window, you navigate to the folder [Snippets]¹ in the left-hand column. In this folder, click on the file [css-variables.liquid]² to add some custom code for the new font.
6. In the file open file “css-variables.liquid”, you add additional codes under the tab style. It can be found under the text {%- style -%}. The codes are added as follows:
  
  @font-face {
  font-family: "MyFontHeading";
  src: url('add your font file link') format("woff2"),
  url('add your font file link') format("woff"); }
  
  @font-face {
  font-family: " MyFontBody";
  src: url('add your font file link') format("woff2"),
  url('add your font file link') format("woff"); }
  
  Note: Italic text sections are customized by you. The number of @font-face{ } codes to be added depends on how many font styles that you have.
7. After that, you:
  - Search for the text “font-heading-family” and replace all parts of {{...}} with your added text for font-family line ('MyFontBody' in our example).
  - Search for the text “font-body-family” to navigate to relevant code line and replace all parts of {{...}} with your added text for font-family in the codes of step 6 (in our example, it is 'MyFontHeading')
8. After replacing, it looks like the below photo:
9. Note:
  - The settings in Theme settings > Typography is no longer in effect no matter what you configure here once you add these codes in the “css-variables.liquid” file.
  - All above instructions are applicable when you apply the same custom font for all sections & block. In case you need to apply various fonts for different sections or blocks, the edit process will much more complicated and please contact our support team to get further help.
Using RoarTheme app

While Shopify offers a vast collection of free fonts, you might need a custom font to align with your brand guidelines. If your desired font isn't natively supported by Shopify, fret not! Our team has developed an app that provides a wide range of font customization options to enhance your web design. Discover the possibilities and elevate your store's aesthetic with our app.