I am making use of CSS to use my Lettera font, when taking my web development to production some browsers do not see the same font style, the following are the definitions that I am using in my CSS file:
.parrafoVerde {
padding: 30px;
font-size: 3vmin;
position: center;
font-family: Lettera Text Std;
}
.IndustriaTexto {
padding: 15px;
/* font-size: 3vmin; */
font-size: 20px;
padding-top: 0px;
font-family: Lettera Text Std;
}
<p class="parrafoVerde">
Lorem ipsum dolor sit amet consectetur adipiscing elit praesent, malesuada faucibus morbi litora nisi torquent pellentesque, integer facilisi nec maecenas cras nullam montes.
<p />
<p class="IndustriaTexto MoverNuestrasOperacionesIzquierda" >
Lorem ipsum dolor sit amet consectetur adipiscing elit praesent, malesuada faucibus morbi litora nisi torquent pellentesque, integer facilisi nec maecenas cras nullam montes.
</p>
In addition to this I am saving my font family to a location in a folder within the project.
But the problem persists that the font is not being taken from the other browsers, even using the same browser being Chrome.
I seem to realize that this happens because I don't have the font I'm using installed on the different computers.
Update:
I followed the guide recommended by @DavElsanto, but I still haven't found a solution, what I have done so far is the following as the guide says:
- I have my font in .OTF format which I later upload to Webfont Generator to create my Web Font Kit.
- Generate my Web Font Kit in extensions .TTF .WOFF .SVG .WOFF2
- Copy the CSS generated in the Web Font Kit into the style sheet, paste it as follows:
font-face
In addition to the fonts that I generated in the Web Font Kit, I added the one for my font in .OTF format to my CSS , but it still doesn't solve me.
@font-face {
font-family: 'Lettera Text Std';
src: url('Font/LetteraTextStd.woff2') format('woff2'),
url('Font/LetteraTextStd.woff') format('woff'),
url('Font/LetteraTextStd.ttf') format('truetype'),
url('Font/LetteraTextStd.svg#LetteraTextStd') format('svg'),
url('Font/LetteraTextStd-Títulos.otf') format('embedded-opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
Update 2:
After adding all the possible font formats for the different browser versions they are as follows:
Update 3:
Checking the console for an error, I get the following: