Help with adding my custom fonts to the Atelier theme

Store Design
, ,
1

Hi! I need help adding my fonts to the Atelier Theme. I want to try to do it myself if that’s possible. Thanks in advance!

2

Hi @plantas

Yes. If you want to add your own fonts to the Atelier theme you can do it yourself with these steps.

1.Prepare your font files

Prefer WOFF2 files. For example:

MyFont-Regular.woff2
MyFont-Medium.woff2
MyFont-Bold.woff2

If you have multiple weights, upload each one separately.

2.Upload the fonts to Shopify

Go to: Shopify Admin → Content → Files → Upload files

Upload your .woff2 files.

After uploading, click the font file and copy its file URL.

3.Open the theme code

Go to: Online Store → Themes → Atelier → … → Edit code

Before editing, duplicate your theme so you have a backup.

4.Add the @font-face CSS

Find the theme’s main CSS file. Depending on the Atelier version, it may be something like:

base.css
theme.css
styles.css

Add this near the beginning:

@font-face {
  font-family: 'My Custom Font';
  src: url('YOUR-REGULAR-FONT-URL') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'My Custom Font';
  src: url('YOUR-BOLD-FONT-URL') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Replace the URLs with the URLs you copied from Content → Files.

5.Apply the font

If you want the font across the entire website:

body {
  font-family: 'My Custom Font', sans-serif;
}

If you only want it for headings:

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'My Custom Font', sans-serif;
}

For buttons:

button,
.button {
  font-family: 'My Custom Font', sans-serif;
}

6.Use different font weights

If you uploaded Regular and Bold:

body {
  font-family: 'My Custom Font', sans-serif;
  font-weight: 400;
}

h1,
h2,
h3 {
  font-family: 'My Custom Font', sans-serif;
  font-weight: 700;
}

Best regards,
Devcoder :laptop:

3

Hi @plantas

Hi! Yes, you should be able to add your own fonts yourself, although the exact steps may depend a little on how the Atelier theme handles typography.

Before making any changes, I’d recommend duplicating your theme first so you have a backup.

Then, check Online Store → Themes → Customize to see whether Atelier already provides a typography or custom font setting. If it doesn’t, you’ll likely need to add the font file to your theme and make a small adjustment in the theme code to apply it.

I’d test the font on a duplicated theme first and check how it looks across headings, body text, buttons, and especially on mobile.

One thing worth keeping in mind is that fonts set in your theme don’t always automatically apply to content added by third-party apps. For example, if you’re using Easify Custom Product Options, you can also adjust the styling separately in the app’s App Design settings to help keep the options consistent with your store’s overall look.

If you share which parts of the store you want to change—such as just the headings or the entire site—someone may be able to point you toward the right place to update it.:heart:

4

Hi, It could be done through the following process:

  • Upload the font files which need to add in the store
  • Goto the Shopify Admin → Content → Files.
  • Upload your font files, preferable to be .woff2 files.
  • Get URLs of the uploaded files.
  • Edit your theme
  • Online Store → Themes → Atelier → ⋯ → Edit code.
  • Find theme.liquid file or other main CSS file of the theme, such as base.css, theme.css, or global.css.

and insert this code

@font face {
font-family: 'My CustomFont';
src: url {'YOUR-FONT_URL.woff2')format('woff2')
font-weight: 400;
font-style: normal;
font-desplay: swap;
}
@font face {
font-family: 'My CustomFont';
src: url {'YOUR-FONT-BOLD_URL.woff2')format('woff2')
font-weight: 700;
font-style: normal;
font-desplay: swap;
}
body {
font-family: 'My CustomFont', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'My CustomFont', sans-serif;
}