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

[aesthete]

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

[Small_Task_Help]

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 

[aesthete]

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