New Shopify Certification now available: Liquid Storefronts for Theme Developers

How to manually add typeface file and edit the CSS file?

aesthete
New Member
4 0 0

Hi, 

 

How can I add a font file such as .ttf and manually edit the appropriate .css file?

 

I purposefully don't want to use the Shopify plugins as I want the full control of what I'm coding. 

 

ATM, I'm using FontPicker plugin but it totally obfuscates what's going on and when I inspect the page I get (index) location which I can't trace.

 

Thanks

Replies 2 (2)
Small_Task_Help
Shopify Partner
314 9 22

Hi

 

Need Host the Font Files on a web server or a file hosting service and by using @font-face at CSS you can use font files

 

If you want you can contact us about this. Details given at signature 

 

Click here to Contact and Get Shopify Store Help
E-mail - hi@shopifysmalltask.com
We are Shopify Store Small Tasks and Customization Experts
aesthete
New Member
4 0 0

Hi, 

 

Thanks for the explanation. Assuming, I'd want to use Google Fonts, then they're hosted on google servers. I presume, I'd add the link to the font in theme.liquid and then CSS in base.css? However, I'm not sure where exactly in the base.css. I can see that, e.g., .text-body has font-family: var(--font-body-family)

How/where do I change the font-body-family to my custom font?

 

Thanks