Re: Help Importing Font to Studio Theme

How to import WOFF2 font files to Studio theme?

elsenorwendle
New Member
5 0 0

Hello, I have been attempting to import several WOFF2 font files to use in my Studio theme page. I have added these font files to the assets directory, and added this to the base.css 

Screen Shot 2023-10-29 at 7.55.21 AM.png

But when I go to theme settings>typography and search for this font I'm unable to find it. Can anyone offer any insight as to what the problem might be? Thanks! 

Replies 2 (2)

PageFly-Theodor
Shopify Partner
691 86 98

Hi @elsenorwendle 
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the  Importing Font To Studio Theme, let’s try this solution:

Step 1

Download the webfont version of your font. The font files must include at least the WOFF and WOFF2 file types (TTF or OTF are not a webfont file types).

Step 2

From your Shopify Admin go to Online Store > Themes > next to the theme you want to edit click Actions > Edit Code. In the sidebar choose Assets > theme.scss.liquid. Scroll to the bottom of the file and paste the following code…

@font-face {
font-family: "NAME OF FONT";
src: url("NAME-OF-FONT-FILE.woff2") format("woff2"),
url("NAME-OF-FONT-FILE.woff") format("woff");
}

Replace NAME OF FONT with the name of your font and NAME OF THE FONT FILE with the exact name (casesensitve with hyphens) of the font file on your computer.

Below this code also paste the following code…

<p><span style="font-weight: 400;">yourcssselectorhere { font-family: "NAME OF FONT"!important; }</span></p>

Step 3

Go to the Assets folder and click Add a new asset. Upload each version of the font file one by one.


I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

elsenorwendle
New Member
5 0 0

Hi Theodore,

Thanks for your reply. I'm not seeing theme.scss.liquid in the assets menu.