Existen multitud de conversores de tipografías de escritorio (formatos TTF y OTF) a tipografías web (formatos WOFF, WOFF2, EOT…). Consisten en aplicaciones web a los que se envían las tipografías de escritorio y que devuelven las tipografías web, e incluso la hoja de estilos CSS que permiten usarlas en cualquier página web. ¿Por qué usar entonces la línea de comandos para generar tipografías web? Por dos razones: la primera es la automatización: con la línea de comandos se puede automatizar este proceso. Pero la más importante para mí es que no tengo manera de saber lo que esas aplicaciones web están metiendo en esos archivos que me descargo y que luego subo a los servidores web en los que funcionarán las páginas web que estoy desarrollando. Unas veces porque el código de esas aplicaciones no está disponible para estudiarlo, otras porque aunque lo esté yo no tengo el tiempo de estudiarlo.
Así que me lleva menos tiempo realizar esta tarea yo mismo, con las herramientas que ofrece cualquier distribución de Linux: tres conversores de formato de tipografías y bash.
Para este mini tutorial, he utilizado un Linux Debian Bookworm llamada lei, con el usuario skotperez, para convertir la tipografía FiraSans.ttf y FiraSansExtraCondensed.ttf a web, de las que voy a usar varios pesos para cada una, con sus respectivas cursivas.
Instalar los programas que harán la conversión de TTF a WOFF, WOFF2 y EOT
Hay que instalar tres paquetes:
skotperez@lei:~$ sudo apt install woff2 eot-utils woff-tools
woff-tools permite convertir TTF a WOFF, woff2 de TTF a WOFF2, y eot-utils de TTF a EOT.
Convertir una tipografía TTF a formatos web
Para generar la tipografía WOFF:
sfnt2woff font.ttf
Información sobre este conversor en su repositorio de github.
Para generar la tipogradía WOFF2:
woff2_compress font.ttf
Para generar la tipografía EOT:
mkeot font.ttf > font.eot
Automatizar el proceso de una familiar de tipografías
Frecuentemente necesito convertir una o varias familias de tipografías con todos sus pesos. Con una loop en bash se puede automatizar la generación de los formatos web de todos los pesos de una familia de tipografías.
Desde la carpeta en la que tengo las tipografías TTF que quiero convertir:
skotperez@lei:~/fonts$ ls FiraSansExtraCondensed-ExtraBoldItalic.ttf FiraSansExtraCondensed-SemiBold.ttf FiraSans-Medium.ttf FiraSansExtraCondensed-ExtraBold.ttf FiraSans-Italic.ttf FiraSans-Regular.ttf FiraSansExtraCondensed-SemiBoldItalic.ttf FiraSans-MediumItalic.ttf skotperez@lei:~/fonts$ for i in *.ttf; do sfnt2woff $i; woff2_compress $i; mkeot $i > $i.eot; done skotperez@lei:~/fonts$ ls FiraSansExtraCondensed-ExtraBold.eot FiraSansExtraCondensed-SemiBoldItalic.woff FiraSans-MediumItalic.ttf FiraSansExtraCondensed-ExtraBoldItalic.ttf.eot FiraSansExtraCondensed-SemiBoldItalic.woff2 FiraSans-MediumItalic.woff FiraSansExtraCondensed-ExtraBoldItalic.ttf FiraSansExtraCondensed-SemiBold.ttf FiraSans-MediumItalic.woff2 FiraSansExtraCondensed-ExtraBoldItalic.woff FiraSansExtraCondensed-SemiBold.woff FiraSans-Medium.ttf FiraSansExtraCondensed-ExtraBoldItalic.woff2 FiraSansExtraCondensed-SemiBold.woff2 FiraSans-Medium.woff FiraSansExtraCondensed-ExtraBold.ttf FiraSans-Italic.ttf.eot FiraSans-Medium.woff2 FiraSansExtraCondensed-ExtraBold.woff FiraSans-Italic.ttf FiraSans-Regular.ttf.eot FiraSansExtraCondensed-ExtraBold.woff2 FiraSans-Italic.woff FiraSans-Regular.ttf FiraSansExtraCondensed-SemiBold.ttf.eot FiraSans-Italic.woff2 FiraSans-Regular.woff FiraSansExtraCondensed-SemiBoldItalic.eot FiraSans-Medium.ttf.eot FiraSans-Regular.woff2 FiraSansExtraCondensed-SemiBoldItalic.ttf FiraSans-MediumItalic.ttf.eot
Por coherencia en los nombres de los archivos, una vez generado el formato EOT, lo renombro:
skotperez@lei:~/fonts$ rename 's/.ttf//' *.eot skotperez@lei:~/fonts$ ls FiraSansExtraCondensed-ExtraBold.eot FiraSansExtraCondensed-SemiBoldItalic.woff FiraSans-MediumItalic.ttf FiraSansExtraCondensed-ExtraBoldItalic.eot FiraSansExtraCondensed-SemiBoldItalic.woff2 FiraSans-MediumItalic.woff FiraSansExtraCondensed-ExtraBoldItalic.ttf FiraSansExtraCondensed-SemiBold.ttf FiraSans-MediumItalic.woff2 FiraSansExtraCondensed-ExtraBoldItalic.woff FiraSansExtraCondensed-SemiBold.woff FiraSans-Medium.ttf FiraSansExtraCondensed-ExtraBoldItalic.woff2 FiraSansExtraCondensed-SemiBold.woff2 FiraSans-Medium.woff FiraSansExtraCondensed-ExtraBold.ttf FiraSans-Italic.eot FiraSans-Medium.woff2 FiraSansExtraCondensed-ExtraBold.woff FiraSans-Italic.ttf FiraSans-Regular.eot FiraSansExtraCondensed-ExtraBold.woff2 FiraSans-Italic.woff FiraSans-Regular.ttf FiraSansExtraCondensed-SemiBold.eot FiraSans-Italic.woff2 FiraSans-Regular.woff FiraSansExtraCondensed-SemiBoldItalic.eot FiraSans-Medium.eot FiraSans-Regular.woff2 FiraSansExtraCondensed-SemiBoldItalic.ttf FiraSans-MediumItalic.eot
Hoja de estilos para la tipografía
Para usar la tipografía con los diferentes pesos éste sería el CSS:
@font-face {
font-family: 'Fira Sans';
src: local('Fira Sans'), local('Fira-sans'), local('FiraSans'),
url('../fonts/FiraSans-Regular.woff2') format('woff2'),
url('../fonts/FiraSans-Regular.woff') format('woff'),
url('../fonts/FiraSans-Regular.ttf') format('truetype'),
url('../fonts/FiraSans-Regular.eot') format('embedded-opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: local('Fira Sans'), local('Fira-sans'), local('FiraSans'),
url('../fonts/FiraSans-Italic.woff2') format('woff2'),
url('../fonts/FiraSans-Italic.woff') format('woff'),
url('../fonts/FiraSans-Italic.ttf') format('truetype'),
url('../fonts/FiraSans-Italic.eot') format('embedded-opentype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: local('Fira Sans'), local('Fira-sans'), local('FiraSans'),
url('../fonts/FiraSans-Medium.woff2') format('woff2'),
url('../fonts/FiraSans-Medium.woff') format('woff'),
url('../fonts/FiraSans-Medium.ttf') format('truetype'),
url('../fonts/FiraSans-Medium.eot') format('embedded-opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: local('Fira Sans'), local('Fira-sans'), local('FiraSans'),
url('../fonts/FiraSans-MediumItalic.woff2') format('woff2'),
url('../fonts/FiraSans-MediumItalic.woff') format('woff'),
url('../fonts/FiraSans-MediumItalic.ttf') format('truetype'),
url('../fonts/FiraSans-MediumItalic.eot') format('embedded-opentype');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans Extra Condensed';
src: local('Fira Sans Extra Condensed'), local('Fira-sans-extra-condensed'), local('FiraSansExtraCondensed'),
url('../fonts/FiraSansExtraCondensed-SemiBold.woff2') format('woff2'),
url('../fonts/FiraSansExtraCondensed-SemiBold.woff') format('woff'),
url('../fonts/FiraSansExtraCondensed-SemiBold.ttf') format('truetype'),
url('../fonts/FiraSansExtraCondensed-SemiBold.eot') format('embedded-opentype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans Extra Condensed';
src: local('Fira Sans Extra Condensed'), local('Fira-sans-extra-condensed'), local('FiraSansExtraCondensed'),
url('../fonts/FiraSansExtraCondensed-SemiBoldItalic.woff2') format('woff2'),
url('../fonts/FiraSansExtraCondensed-SemiBoldItalic.woff') format('woff'),
url('../fonts/FiraSansExtraCondensed-SemiBoldItalic.ttf') format('truetype'),
url('../fonts/FiraSansExtraCondensed-SemiBoldItalic.eot') format('embedded-opentype');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans Extra Condensed';
src: local('Fira Sans Extra Condensed'), local('Fira-sans-extra-condensed'), local('FiraSansExtraCondensed'),
url('../fonts/FiraSansExtraCondensed-ExtraBold.woff2') format('woff2'),
url('../fonts/FiraSansExtraCondensed-ExtraBold.woff') format('woff'),
url('../fonts/FiraSansExtraCondensed-ExtraBold.ttf') format('truetype'),
url('../fonts/FiraSansExtraCondensed-ExtraBold.eot') format('embedded-opentype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans Extra Condensed';
src: local('Fira Sans Extra Condensed'), local('Fira-sans-extra-condensed'), local('FiraSansExtraCondensed'),
url('../fonts/FiraSansExtraCondensed-ExtraBoldItalic.woff2') format('woff2'),
url('../fonts/FiraSansExtraCondensed-ExtraBoldItalic.woff') format('woff'),
url('../fonts/FiraSansExtraCondensed-ExtraBoldItalic.ttf') format('truetype'),
url('../fonts/FiraSansExtraCondensed-ExtraBoldItalic.eot') format('embedded-opentype');
font-weight: 800;
font-style: italic;
font-display: swap;
}
Inspiración para este tutorial:
Converting my OTF font into multiple web fonts with this bash script
1 comentario
Hola ,
Veo su sitio web http://www.voragine.net y es impresionante. Me pregunto si las opciones de publicidad como publicaciones de invitados, contenido de anuncios u opciones de banner están disponibles en su sitio.
¿Cuál es el precio si queremos anunciarnos en su sitio?
Salud
Jesse lark