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
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!
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…
yourcssselectorhere { font-family: "NAME OF FONT"!important; }
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
Hi Theodore,
Thanks for your reply. I’m not seeing theme.scss.liquid in the assets menu.
