Borders > Typography

Borders offer really complex typography options in a relatively simple way. You start out with two main fonts that you can choose and set, one for headings & one for body, however, you can mix these fonts and play with their sizes in almost any section.

Main typography

As written above, you can choose two different font families that will be used in your store, one for headings, one for body. You can choose fonts from Shopify's curated font lists and set a generic base size, line height & letter spacing. Our theme features responsive fonts, meaning that you don't set a fixed value for your fonts, but a base size from which the theme will make certain calculations in order to reduce font sizes as the screen becomes smaller.

Section headings

The next panel related to typography is the section headings one, which controls the style for all of your section's heading. This is a really important area, because it is the one which appears most on your store. You can choose what font you want to utilise for this area, the text size, line height (again, based on your base line height), the font style (bold or italic).

You can also change the padding and choose to show slider navigation elements inside the heading area.

One note on slider navigation elements - if the option is checked, even if your section doesn't have a title, the navigation will appear at the top of the section. And don't forget that on mobile devices it will appear at the bottom of the section, no matter what you choose here.

Page titles

Also really important, you can choose how page titles appear through the store. This refers to the main title of all pages (collection, blog, article, customer, etc.) except the product page. The product page has it's own settings to set the typography of the title.

Buttons & forms

Slightly related to typography, you can choose how your buttons & forms will look like, by editing the corder radius of these elements, choosing a custom border size for buttons (forms are limited to 1px) and also make all text inside buttons uppercase.

Typography inside sections

You might notice that in some sections you have more or less the same amount of options in order to tweak your typography to a desired level.

This allows you to further use different text styles in different areas of your store.

Adding your own font

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 Content > Files. The best font file format for compatibility with all browsers is the woff, or even better, woff2 format.

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

{%- liquid
  assign headings_font = settings.headings_font
  assign body_font = settings.body_font
-%}

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

{%- unless body_font.system? -%}
  <link rel="preload" href="{{ body_font | 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:

{%- liquid 

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

  if settings.section_title_italic 
    assign headings_font_italic = headings_font | font_modify: 'style', 'italic' 
    echo headings_font_italic | font_face: font_display: 'swap'
  endif

  echo body_font | font_face: font_display: 'swap'
  assign body_font_bold = body_font | font_modify: 'weight', '+200' 
  if body_font_bold == blank 
    assign body_font_bold = body_font | font_modify: 'weight', '700' 
  endif 
  echo body_font_bold | font_face: font_display: 'swap' 
  
-%}

Now in the place where you deleted these lines of code, add your own font declaration, as following:

@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.

Replace the font family names and url's with valid names and valid url's of the fonts you've uploaded.

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: {{ headings_font.family }}, {{ headings_font.fallback_families }};
--font-weight-headings: {{ headings_font.weight }};
{%- if headings_font_bold -%}
  --font-weight-headings-bold: {{ headings_font_bold.weight }}; 
{%- else -%}
  --font-weight-headings-bold: 700;
{%- endif -%}
--font-style-headings: {{ headings_font.style }};

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

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

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

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

You can have two 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 FontsCopy link

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".