How to connect a TTF font to the site in four different styles (regular, italic, etc.)?

Question

Fonts

There is a font in TTF: https://fontsup.com/family/opel+sans.html
And I need to connect it to the site, sort of like Google Fonts.
What is the required sequence of steps?
1. For example, to connect Fira, I place a meta tag on the page:

<link href="//code.cdn.mozilla.net/fonts/fira.css" rel="stylesheet" type="text/css" />

2. and then in CSS: Everything. Two steps. And what steps do you need to take to connect TTF in 4 varieties: Regular, Italic, Bold, Bold Italic? And how then to use them?
font-family: 'Fira Sans';

Answer 1

Now you do not need to connect ttf, you need woff2 and woff
Connect like this (the file name must be the same, the style and boldness change)

@font-face {
        font-family: "OpenSans";
        src: url("fonts/opensans.woff2") format("woff2"),
        url("fonts/opensans.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        }

        @font-face {
        font-family: "OpenSans";
        src: url("fonts/opensansbold.woff2") format("woff2"),
        url("fonts/opensansbold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
        }

Use like this:

div {
      font-family: OpenSans, Arial, sans-serif;
      font-weight: bold;
    }

Or go to google fonts and connect from there https://fonts.google.com/specimen/Open+Sans
The desired variations are selected.

Answer 2

All the same. It is necessary to connect 4 fonts with different styles.