How to use your own brand fonts in Plain Jane Interactive 3

In Plain Jane Interactive 3, you upload your font file to Shopify, then link it from Theme settings > Typography. Each font role takes its own link, so your face can go on headings, body text, or both.

You need

A .woff2 font file you're licensed to use on the web (Plain Jane Interactive 3 loads .woff2 only).

A .woff2 font file you're licensed to use on the web (Plain Jane Interactive 3 loads .woff2 only).

Getting a .woff2 file

If you bought the font, check the foundry's download or account page for a web or webfont package, which usually includes .woff2. If you only have a .ttf or .otf file, convert it with CloudConvert or Transfonter.

If you bought the font, check the foundry's download or account page for a web or webfont package, which usually includes .woff2.

If you only have a .ttf or .otf file, convert it with CloudConvert (https://cloudconvert.com/ttf-to-woff2) or Transfonter (https://transfonter.org).

Example

This example is from a store running Plain Jane Interactive 3.

This example is from a store running Plain Jane Interactive 3.

1. Open Typography and pick a role

In the editor, open Theme settings > Typography. Choose the role to change: Body font, Subheading font, Heading font, or Accent font. Most stores start with Heading font, as this guide does.

In the editor, open Theme settings > Typography. Choose the role to change: Body font, Subheading font, Heading font, or Accent font. Most stores start with Heading font, as this guide does.

2. Switch to a custom file and name it

Set Font source to Custom font file. Then type a label in Font name; any name works, but your font's family name is clearest.

Set Font source to Custom font file. Then type a label in Font name; any name works, but your font's family name is clearest.

3. Upload the .woff2 file

Typography has no uploader. In your Shopify admin, upload the file in Settings > Files (some admins show Content > Files), then hover the file row and click the Copy link (chain) icon.

Typography has no uploader. In your Shopify admin, upload the file in Settings > Files (some admins show Content > Files), then hover the file row and click the Copy link (chain) icon.

4. Paste the link

Back in Typography, paste the link into Font file URL (.woff2).

Back in Typography, paste the link into Font file URL (.woff2).

5. Repeat on Body font

Set the same fields on Body font. Do the same on Subheading font or Accent font if you want your face there too.

Set the same fields on Body font. Do the same on Subheading font or Accent font if you want your face there too.

6. Set size and spacing

Paragraph has Size and Line height. Heading 1–Heading 6 each have Font, Size, Line height, Letter spacing, and Case. Heading 1 and Heading 2 get smaller on phones so they fit.

Paragraph has Size and Line height. Heading 1–Heading 6 each have Font, Size, Line height, Letter spacing, and Case. Heading 1 and Heading 2 get smaller on phones so they fit.

7. Check the preview and save

Compare the headings and paragraphs in the preview with your brand files, then click Save.

Compare the headings and paragraphs in the preview with your brand files, then click Save.

Common mistake

Setting only Heading font and expecting body text to change. Each role keeps its own setting.

Setting only Heading font and expecting body text to change. Each role keeps its own setting.