How to import Google Fonts to shopify

Technical Q&A
,

Topic summary

A user is attempting to import the Bebas Neue Google Font into their Shopify theme but encountering issues despite uploading the .woff2 file to assets and adding @font-face code to base.css.

Attempted Solutions:

  • Used {{ "BebasNeue.woff2" | asset_url }} in the src property
  • Tried alternative syntax variations
  • Screenshots show the font file uploaded but CSS implementation unclear

Community Suggestions:

  • Add ‘assets/’ folder path: url('assets/BebasNeue')
  • Verify complete @font-face declaration with proper src, font-weight, and font-style properties
  • Confirm font file is uploaded to correct content/assets folder
  • Ensure font-family name matches between @font-face and usage
  • Question raised whether Liquid code works in base.css files

Current Status:
Issue remains unresolved. One responder noted the user’s screenshot only shows font-family property without the src declaration, suggesting incomplete CSS implementation. A video tutorial link was shared as alternative guidance for importing Google Fonts without apps.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

I have followed instructions from other forum posts to import the Bebas Neue font

arorar_0-1750961969434.png
arorar_0-1750961969434.png1180×902 96.6 KB

arorar_1-1750962022007.png
arorar_1-1750962022007.png1542×580 77.8 KB

You can see my imported BebasNeue.woff2 file, with the code next to it. I also tried

src: url({{ “BebasNeue” | asset_url }}) format(“woff2”);

Nothing is working. Anyone got suggestions?

2

Hi @arorar ,

Have you tried adding the assets folder

src: url(‘assets/BebasNeue’) format(“woff2”);

Hope that helps,
Jake

3

Hi @arorar ,

Can you please try the below code? I think it will work.

@font-face {
font-family: ‘MyCustomFont’;
src: url(‘{{ “your-font-file.woff2” | asset_url }}’) format(‘woff2’);
font-weight: normal;
font-style: normal;
}

4

This didn’t work! Not sure what the issue is.

Can I put liquid code in base.css?

5

Hi @arorar ,

Can you please confirm if you have added the files correctly to the base.css?

Like have you uploaded the files to content folder? Did you added the same font family name to the font family value?

According to your screenshot, only font-family key is available. The src CSS is not available.

AiTrillion_0-1751017102125.png
AiTrillion_0-1751017102125.png1399×619 102 KB

Can you please send me the screenshot of the CSS which you have added to base.css?

6

Hi @arorar ,

Please refer the video below how you can import google font in Shopify theme customizer without any APP.