Combine > Typography

Our theme uses three different font families, one for regular page headings, one for section headings and one for body text (everything else). You can choose from the list of font families that are included in Shopify and also change the base size & line heights in order for the selected font to look properly in your store. Combine uses responsive typography, meaning that font sizes will change depending on screen size, but they will always be based on the base size that you set. 

How to add your own font

Combine theme includes different the default Shopify fonts that can be selected from the  Theme Customizer > General > Typography (screenshot). But if you decide to use a custom font, there are a few methods to do this:

1. Use the @font-face declaration (add your own font files)

Please start by uploading your new font in Shopify Content > Files. The best font file format for compatibility with all browsers is the  woff, or even better, woff2 format. Use the generated URL in the indicated code below. 

Open  /snippets/head-variables.liquid and right at the top, remove this code:

{%- liquid
  assign headings_font_primary = settings.headings_font_primary
  assign body_font_primary = settings.body_font_primary
  assign body_font_secondary = settings.body_font_secondary
-%}

{%- unless headings_font_primary.system? -%}
  <link rel="preload" href="{{ headings_font_primary | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}

{%- unless body_font_primary.system? -%}
  <link rel="preload" href="{{ body_font_primary | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}

{%- unless body_font_secondary.system? or body_font_primary == body_font_secondary -%}
  <link rel="preload" href="{{ body_font_secondary | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}

Now, go a bit further and identify the place where the current fonts are created, and delete those lines as well:

{%- comment -%} Fonts {% endcomment %}
  {%- liquid 

    echo headings_font_primary | font_face: font_display: 'swap'

    echo body_font_primary | font_face: font_display: 'swap'

    assign body_font_primary_medium = body_font_primary | font_modify: 'weight', '+100' 
    unless body_font_primary_medium == blank 
      echo body_font_primary_medium | font_face: font_display: 'swap' 
    endunless 

    assign body_font_primary_bold = body_font_primary | font_modify: 'weight', '+200' 
    if body_font_primary_bold == blank 
      assign body_font_primary_bold = body_font_primary | font_modify: 'weight', '700' 
    endif 
    echo body_font_primary_bold | font_face: font_display: 'swap' 

    if body_font_secondary != body_font_primary
      
      echo body_font_secondary | font_face: font_display: 'swap'
      assign body_font_secondary_bold = body_font_secondary | font_modify: 'weight', '+100' 

      if body_font_secondary_bold == blank 
        assign body_font_secondary_bold = body_font_secondary | font_modify: 'weight', '700' 
      endif 
      echo body_font_secondary_bold | font_face: font_display: 'swap' 

    else
      assign body_font_secondary_bold = body_font_primary_bold
    endif
    
  -%}

Back at the top, you should see the style opening declaration:

<style type="text/css">

Right after this line of code, add your own font code replacing the URL value with your own font link generated Settings > Files when you've uploaded the font:

@font-face {
  font-family: "MyFont";
  src: url('Your_font_link_URL') format("woff2");
}

Add this declaration for all the fonts that you wish to use (if you want to change two fonts, one for headings, one for body, you'll need to font declarations, with the names you declare. If your font has style variations (italic, bold), you need to add font files for those as well.

Now that your font is ready to be loaded, you need to modify the font variables. Go down again, and search for the code snippet below. 

  /* Font variables */

    --font-stack-headings-primary: {{ headings_font_primary.family }}, {{ headings_font_primary.fallback_families }};
    --font-weight-headings-primary: {{ headings_font_primary.weight }};
    --font-style-headings-primary: {{ headings_font_primary.style }};

    --font-stack-body-primary: {{ body_font_primary.family }}, {{ body_font_primary.fallback_families }};
    --font-weight-body-primary: {{ body_font_primary.weight }};
    {%- if body_font_primary_bold -%}
      --font-weight-body-primary-bold: {{ body_font_primary_bold.weight }}; 
    {%- else -%}
      --font-weight-body-primary-bold: 700;
    {%- endif -%}
    {%- if body_font_primary_medium -%}
      --font-weight-body-primary-medium: {{ body_font_primary_medium.weight }}; 
    {%- else -%}
      --font-weight-body-primary-medium: {{ body_font_primary.weight }};
    {%- endif -%}
    --font-style-body-primary: {{ body_font_primary.style }};

    --font-stack-body-secondary: {{ body_font_secondary.family }}, {{ body_font_secondary.fallback_families }};
    --font-weight-body-secondary: {{ body_font_secondary.weight }};
    {%- if body_font_secondary_bold -%}
      --font-weight-body-secondary-bold: {{ body_font_secondary_bold.weight }}; 
    {%- else -%}
      --font-weight-body-secondary-bold: 700;
    {%- endif -%}
    --font-style-body-secondary: {{ body_font_secondary.style }};

Delete this entirely and replace it with your own font stack here, like this:

--font-stack-headings-primary: "MyFont", sans-serif;
--font-weight-headings-primary: 400;
--font-weight-headings-bold: 700;
--font-style-headings-primary: normal;


--font-stack-body-primary: "MyFont", sans-serif;
--font-weight-body-primary: 400;
--font-weight-body-primary-bold: 700;
--font-weight-body-primary-medium: 500;
--font-style-body-primary: normal;


--font-stack-body-secondary:: "MyFont", sans-serif;
--font-weight-body-secondary:: 400;
--font-weight-body-secondary-bold: 700;
--font-style-body-primary: normal;

You can have three different fonts, or use the same font for all typography, just make sure that you add the source files properly for all the fonts that you wish to use.

2. Use Google Fonts

After you select the font you need to use from Google fonts, a code will be generated for you to insert in the theme.

Please embed the generated code in the  theme.liquid file, just before the </head> closing tag (screenshot).  

For example, for the Poiret One font the code generated by Google is:

<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">

Then go back at STEP 1 and apply the steps in order for the theme to use your font. Just skip the "@font-face" declaration, but the rest is the same.. You will be using the selected font from Google instead. So in all above examples, where we've used "MyFont", here it will be "Poiret One".