How to organize the correct connection of fonts?

Question

css

Hey!
All the time I used Google Fonts services to connect fonts (by embedding the font connection code in the head). Now I'm faced with the fact that there are fonts that are not in Google Fonts, but they can be found on other web services (to connect the font).
The question is, how best to include fonts:
1. Through @font-face (uploading all fonts in the required formats to the folder with the site, etc.) in css
2. Or use the method of adding links to the head to include fonts?

Answer 1

Typography is the most important part of the site, so in my opinion it is better to load fonts from your site, and not third-party services, even Google, I am for point 1.
You can also do all sorts of indecency, store fonts in local storage, encode in Base64 and all that.

Answer 2

So

Answer 3

Definitely the first option. So more reliable. Convert fonts using squirrels.

Answer 4

I wrote about how to connect fonts in a modern, fashionable and youthful way in an article .