Why doesn't my font look the same in all browsers?

It's probably just a source definition or path issue. I did a local test that works on Firefox, Chrome, Opera and Edge (Chromium based):

1. I downloaded the files from onlinewebfonts , only OTF, TTF and WOFF formats

2. I created an HTML document in the same folder where I downloaded the fonts

3. In CSS styles, I first declare the font:

@font-face {
  font-family: "Lettera Text Std";
  src: url("LetteraTextStd.otf"),
    url("LetteraTextStd.ttf"),
    url("LetteraTextStd.woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; 
}

Both the HTML, CSS and sources are in the same folder, that's why I don't put paths in url("nombreDeArchivo.ext"), in your case, you must specify the folder according to where you define the CSS rules, for example:

- Carpeta Raíz
  - CSS
      - Font
      - tu-archivo-de-estilos.css

In this case, the folder Fontis inside CSSand the styles file is at the same level; you must define the route withurl("Font/nombreDeArchivo.ext")

But, if the directory structure is different, something like:

- Carpeta Raíz
  - CSS
      - tu-archivo-de-estilos.css
  - Font

The folder Fontis at the same level as CSSand the styles file at a different level from the source; you must take a step back ../to access:url("../Font/nombreDeArchivo.ext")

4. Apply styles on the desired selector:

/* Si quieres usarlo en todo el documento */
body {
  font-family:"Lettera Text Std", Arial, Verdana, sans-serif;
}
/* Aplicar solo a un elemento por ID */
#id-de-contenedor {
  font-family:"Lettera Text Std", Arial, Verdana, sans-serif;
}
/* Aplicar a múltiples elementos por clase */
.clase-de-elementos {
  font-family:"Lettera Text Std", Arial, Verdana, sans-serif;
}

According to the documentation , it is convenient to define the font you want and, separated by commas, other similar fonts in case the main one could not be downloaded and applied.

Still having problems?

It's probably because you want to load additional styles using the same rule and, for practical purposes, they can be considered as different fonts, so to load the title font you have to do it separately:

@font-face {
  /* El nombre que aparece al abrir alguno de los archivos */
  font-family: "Lettera Text Std - Títulos";
  src: url("LetteraTextStd-Titulos.otf"),
    url("LetteraTextStd-Titulos.ttf"),
    url("LetteraTextStd-Titulos.woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; 
}
/* Aplicar a múltiples elementos por etiqueta */
h1, h2, h3 {
  font-family:"Lettera Text Std - Títulos", Arial, Verdana, sans-serif;
}

Just remember, load all the fonts first and then create the rules to apply them.

Update:

To try to avoid noticeable font change on page load, you can try preloading content

The first problem is that you have multiple font files to upload and you will need to create a tag for each of them as suggested here :

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

Your code is going to be left with a lot of lines for font preloading and might not be as easy to maintain.

I suggest you create a specific CSS file for fonts and be the one you add as preloaded content:

<link rel="preload" href="Css/fuentes.css" as="style">

Try importing your font with font-face, do the following at the top of your CSS:

@font-face {
        font-family: Lettera Text Std;
        src: url('Font/LetteraTextStd-bold.otf'),
             url('Font/LetteraTextStd-Titulos.otf');
    }

with that it should work, greetings!

If you have already verified that the source paths are correct, try making a few small syntax changes.

First avoid starting the names of the Classes and IDs with capital letters:

Change .IndustryText to .industryText (remember to do it in the css and html respectively)

Then add quotes to your font name:

.industriaTexto {
    padding: 15px;
    /* font-size: 3vmin; */
    font-size: 20px;
    padding-top: 0px;
    font-family: "Lettera Text Std"; /* con comillas */
}