How to connect fonts to a landing page?

Question

css

When laying out landing pages, I never connected local fonts. Always used google.com/fonts .
I know that this is not very correct, but there was no time to master the competent connection of fonts.
Question for connoisseurs. How it's done. Give, please, a step-by-step system (instruction).

Answer 1

Good afternoon everyone.
I'm doing everything right, but the font is not connected in any way.
I downloaded CenturyGothic-Bold.eot, CenturyGothic-Bold.ttf, CenturyGothic-Bold.woff, CenturyGothic-Bold.woff2, CenturyGothic-Bold.svg
placed in the root and in the fonts folder,
no options connect the font.
when viewing an element on the site, it writes “incorrect property name” and the yellow triangle and the font are crossed out.
help please! I tried
the site and it doesn't work: @font-face { font-family: “Century Gothic”; src: url("fonts/CenturyGothic-Bold.eot"); src: url("fonts/CenturyGothic-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/CenturyGothic-Bold.woff2") format("woff2"),
url("fonts/CenturyGothic-Bold.woff") format("woff"),
url("fonts/CenturyGothic-Bold.ttf") format("truetype"),
url("fonts/CenturyGothic-Bold.svg") format("svg");
font-weight: bold;
font-style: normal
}
and
@font-face {
font-family: 'Web font';
src: url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff');
font-weight: normal
font-style: normal
}
``` does not work
and local registered - does not work
what does it need?
help me please