How to add custom Google Fonts?

[vovavasylyna]

How can I add custom fonts found on Google Fonts? Is it possible to store them somewhere under /static/fonts/FONT_NAME.ttf and then call them out in assets/css/custom.css? If so, how? Or perhaps any other way?

I've tried simply replacing default ones below with Inter font, but it didn't help, unfortunately.

[imfing]

If you select one from the Inter font family, Google Font will prompt you with the necessary code to use it on the web.
Take Inter regular for example:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

you will need to put this piece of code here:

https://imfing.github.io/hextra/docs/advanced/customization/#custom-scripts

and then you could specify it just like what you did in the custom.css file

[imfing]

In the future we will make it easier to add custom Google fonts

[brickloo]

Google Fonts provides the “at-import” code to import the font link, and I put it in front of the “.content” block following the same tutorial in the question's screenshot, and it worked. However it just successfully changed the font of the body of the article, but the font of the title and top choices were not changed.
I think maybe “.content” limits the scope, but I don't know how to modify it to change the font of the entire blog. I am new to css, are there any suggestions for implementing this?@imfing