I want to add custom fonts to Pipeline theme 2.0

Shopify Discussion

Topic summary

Adding custom fonts (multiple weights) to the Pipeline 2.0 theme, ideally via css-variables.liquid so changes apply globally without editing every class.

Key guidance shared:

  • Official docs link provided for adding custom fonts to themes.
  • Two implementation paths described:
    • Upload fonts to Assets, then declare @font-face in the main CSS (styles.scss.liquid/theme.css) and reference the font family sitewide.
    • Upload fonts to Files, copy URLs, add @font-face in base.css, and set body { font-family: … }.
  • A YouTube tutorial was shared for adding TTF/OTF fonts to Shopify font settings.

css-variables approach (theme settings):

  • OP shared Liquid assignments using settings.type_base_font, settings.type_heading_font, settings.type_accent_font, plus font_modify for bold variants.
  • One reply confirmed the structure is valid and showed a similar Liquid block, but without step-by-step on registering the custom fonts in settings or wiring them to those variables.

Status:

  • No confirmed resolution. OP still seeks a method to integrate custom fonts via css-variables so the theme’s global font settings control usage.
  • Code snippets and external links/video are central to the discussion.
Summarized with AI on December 12. AI used: gpt-5.
1

Hi There! @Shopify_77

I am using the Pipeline theme for the Shopify store. I want to add my fonts to this theme. I have two different fonts with different font weights. I know I have to update the css-variabel.liquid. Can anyone please help to add my custom fonts to this?

Thanks

2

Hi Nira,

You can follow Shopify’s instruction to add custom fonts to your theme:

https://shopify.dev/docs/themes/architecture/settings/fonts#custom-fonts

3

Hi [email removed]Niralishopwell,

You can follow my steps below to upload your custom font.

Uploading your font

To get started, you will first need to upload the font into the Assets folder of your theme.

  1. To get to the Assets folder of your theme, navigate to your Shopify dashboard. From here, go to Online Store > Actions > Edit Code
  2. Scroll down till you find the Assets folder and click Add a new Asset, select your font file, and hit upload asset.

Installing your font in your theme

Next up: Tell your theme that it can use the font file that you have uploaded.

  1. Go to your theme’s main CSS file (usually named styles.scss.liquid, theme.scss.liquid, or another variation of this). This file can be found in the Assets folder of your theme - navigate to the bottom of this file to add new code to your theme.
  2. Add the code below, replacing highlighted elements of the code with actual data.
    Font name > the name of the font, if the font has more than one word in its name it will need “quotation marks” - these will also be needed when inserting into Shogun.
    Filename > the name of the file that was just uploaded to your theme including the file extension, for example, cosmic_sans_bold.ttf.
    Format > the format of the font that was uploaded, for example, for Athena.ttf this would be “TrueType”.

Hope my solution works perfectly for you!

Best regards,

Richard | PageFly

4

Hi @PageFly-Richard , thanks for replying. I have already done by this way but I follow this process I have to check and change fonts to every class element.

Can I update css-variables like this

 assign base_font = settings.type_base_font
  assign base_font_bold = base_font | font_modify: 'weight', 'bolder'

  assign heading_font = settings.type_heading_font
  assign heading_font_bold = heading_font | font_modify: 'weight', 'bolder'

  assign accent_font = settings.type_accent_font
  assign accent_font_bold = accent_font | font_modify: 'weight', 'bolder'

  assign nav_font = settings.type_nav_font

PLease help me if you know the solution. Thanks

5

Hi @Van_Nguyen_GSG ,

I have the default theme’s css-variable file, in this, they have set fonts variable like below. How can I use custom fonts in this to work? I tried but it’s not working properly. If you know something please let me know. Thanks

 assign base_font = settings.type_base_font
  assign base_font_bold = base_font | font_modify: 'weight', 'bolder'

  assign heading_font = settings.type_heading_font
  assign heading_font_bold = heading_font | font_modify: 'weight', 'bolder'

  assign accent_font = settings.type_accent_font
  assign accent_font_bold = accent_font | font_modify: 'weight', 'bolder'
6

Hello,

Please follow the step and solve the issue

Step 1) From your Shopify admin, navigate to Settings > Files.

Step 2) Click on upload files at the top right and upload all of your font files.

Step 3) After that click the font and copy the font url.

@font-face {
font-family: ‘Font-Name’;
src: url(‘Font-url.woff2’) format(‘woff2’);
font-weight: bold;
}
body {
font-family: 'MyWebFont;
}

Step 4) Add the CSS in base.css and save the file

Thanks.

7

Yes you can use it by structure

{% liquid
 assign base_font = settings.type_base_font
  assign base_font_bold = base_font | font_modify: 'weight', 'bolder'

  assign. heading_font = settings.type_heading_font
  assign. heading_font_bold = heading_font | font_modify: 'weight', 'bolder'

  assign accent_font = settings.type_accent_font
  assign accent_font_bold = accent_font | font_modify: 'weight', 'bolder'

  assign nav_font = settings.type_nav_font
%}
8

Hi @niraliie ,

Request you to refer the below video how you can add TIFF and OTG fonts to Shopify font settings.