Integrar fuentes web de Google en TYPO3

Si desea utilizar una fuente que la mayoría de los usuarios no tienen instalada en sus sistemas, tendría que cargar la fuente necesaria en el sistema e integrarla utilizando CSS con @font-face. Sin embargo, sólo pueden utilizarse para este fin fuentes que estén disponibles gratuitamente. A continuación, hay que convertirlas a diferentes formatos para los distintos navegadores.

Para ello se pueden utilizar las fuentes web de Google. A diferencia de las fuentes gratuitas, estas fuentes suelen tener también un juego de caracteres con diéresis. Para integrar una fuente web de Google, hay que descargar las fuentes correspondientes, integrarlas en su propio sitio web y utilizar CSS para especificar dónde se pueden encontrar las fuentes.

La herramienta google-webfonts-helper puede utilizarse para crear las fuentes web.

Una vez abierta la página, puede seleccionar la fuente que desea incluir en su sitio web.

En "1. Seleccionar juegos de caracteres" puede seleccionar los juegos de caracteres con los que debe descargarse la fuente. En los países de habla alemana, debe seleccionarse al menos "latin".

En "2. Seleccionar estilos" puede elegir los estilos de fuente que desea poder utilizar posteriormente en su sitio web.

En "3. Copiar CSS" puede copiar el código CSS que debe integrarse en su archivo CSS. En la parte inferior de la sección se encuentra el campo "Personalizar prefijo de carpeta", donde puede ser necesario ajustar la ruta del CSS a las fuentes. Por ejemplo, en la plantilla TYPO3 (proyecto de ejemplo) de jweiland.net, la ruta a las fuentes está en mayúsculas y se encuentra junto al directorio CSS, es decir, debe introducirse "../Fonts" en el campo "Customize folder prefix".

En el proyecto de ejemplo, el código CSS debe introducirse en el archivo

typo3conf/ext/jwmusterprojekt11/Resources/Public/Css/style.css

archivo. Al principio.

Los archivos de fuentes pueden descargarse ahora en "4. Descargar archivos". Hay que descomprimir el zip y transferir los archivos de fuentes a la carpeta fonts.

La carpeta fonts está localizada en el proyecto de ejemplo bajo:

typo3conf/ext/jwmusterprojekt11/Resources/Public/Fonts/

Todos los archivos zip deben ser transferidos a esta carpeta. Por ejemplo, con un programa FTP o a través del gestor de archivos de su paquete Jweiland.

Ahora puede asignar esta fuente al elemento o clase HTML que desee:

p {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
}

Aktualisiert: 17.07.2024