Estoy haciendo uso de CSS para utilizar mi fuente Lettera, al llevar mi desarrollo web a producción algunos navegadores no ven el mismo estilo de fuente, las siguientes son las definiciones que estoy utilizando en mi archivo CSS:
.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>
Adicional a esto estoy guardando la familia de mi fuente en una ubicación en una carpeta dentro del proyecto.
Pero el problema persiste en que la fuente no se esta tomando desde los demás navegadores, incluso utilizando el mismo navegador siendo Chrome.
Al parecer me doy cuenta de que esto sucede al no tener instalada la fuente que estoy usando en los diferentes equipos.
Actualización:
Seguí la guía que recomendó @DavElsanto, pero aun no encuentro una solución, lo que he realizado hasta el momento es lo siguiente como dice la guía:
- Tengo mi fuente en formato .OTF la cual posteriormente cargue en Webfont Generator para crear mi Web Font Kit.
- Genere mi Web Font Kit en extensiones .TTF .WOFF .SVG .WOFF2
- Copie en hoja de estilos el CSS generado en el Web Font Kit, este lo pegue de la siguiente manera:
Adicional a las fuentes que genere en el Web Font Kit añadí a mi CSS el font-face
de mi fuente en formato .OTF, pero aun no me soluciona.
@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;
}
Actualización 2:
Después de agregar todas los posibles formatos de fuentes para las diferentes versiones de navegador están de la siguiente manera:
Actualización 3:
Al revisar la consola si sale un error, obtengo lo siguiente:
@font-face
o solo fuentes predeterminadas?