Integrar fuentes personalizadas a través de @FontFace

Las fuentes personalizadas son una excelente manera de hacer que su sitio sea verdaderamente único. Puede elegir una fuente similar a su logotipo, una fuente que aparezca en sus tarjetas de visita y materiales de prensa, o fuentes creativas que estén relacionadas con el nicho de su sitio. La colección integrada de fuentes de IONOS, junto con las que proporciona la biblioteca de fuentes de Google, le ofrecen una amplia gama de opciones ideales para diferentes diseños de sitios. Si no son suficientes, siga la guía a continuación para incrustar fuentes personalizadas en los sitios.

Descargo de responsabilidad: Esta guía se basa en una herramienta de terceros que no ha sido creada por IONOS. Además, tenga en cuenta que la tecnología @font-face se clasifica como código personalizado. No podemos garantizar que la fuente que elija sea compatible con la incrustación web, que los archivos que reciba del origen de las fuentes estén listos para usar o que el código que edite esté en el formato correcto.

A pesar de que esto rara vez causa problemas con la edición de su sitio, asegúrese de crear una copia de seguridad de su sitio antes de hacer cualquier cambio de código personalizado. Puede revisar nuestra política con respecto al código personalizado aquí .

Preparar archivos de fuentes personalizadas

Las fuentes personalizadas pueden venir en diversos formatos, los más populares son .otf, .ttf, .woff, .svg, y .eot. Para usar su fuente, debe asegurarse de tener los archivos .ttf, .eot y .svg .

Si solo tiene un archivo .otf o ttf, recomendamos usar una herramienta externa para convertir la fuente a los formatos requeridos (en nuestra guía a continuación, usamos FontSquirrel, pero puede usar cualquier alternativa disponible).

Convertir un archivo .otf o .ttf

  1. Descargue o compre la fuente en formato .otf o .ttf.
    Nota

    Para que la fuente funcione, debe tener licencia para la web.

  2. Vaya a la herramienta de generador de fuentes web FontSquirrel, cargue la fuente y conviértala usando la opción Expert. Elija los siguientes formatos (como mínimo): TrueType (.ttf), EOT Lite (.eot), SVG (.svg) y luego descargue el kit.

Cargar archivos de fuentes a IONOS

Si ya tiene los enlaces a las fuentes (por ejemplo, están alojados en su fundición de fuentes y le proporcionan los enlaces o ha cargado las fuentes a una plataforma de archivos compartidos), puede avanzar al siguiente paso. De lo contrario, deberá incrustar las versiones de .ttf, .svg y .eot de la fuente en su sitio.

  1. En el panel izquierdo, haga clic en Contenido, haga clic en Contenido del sitio y luego haga clic en Administrar archivos.
  2. Haga clic en Cargar nuevo archivo y cargue estos archivos.
  3. Si ubica el cursor sobre uno de los elementos en Archivos cargados, haga clic en Seleccionar para generar un botón Descargar archivo en su sitio.
  4. En la barra de navegación, haga clic en Información y herramientas () y luego haga clic en Vista previa del enlace. Haga clic con el botón derecho en el botón y seleccione Copiar dirección del enlace. Este es el enlace al archivo en su sitio IONOS.

    Este proceso debe hacerse por separado para cada archivo, por lo que al final tendrá tres enlaces a tres formatos de archivo.

    Nota

    Este paso no funciona cuando se usa una vista previa dentro del editor. Debe usar el enlace de vista previa que se encuentra en Información y herramientas en la barra de navegación.

Incrustar archivos en IONOS a través de @font-face

  1. Vaya a Modo de desarrollador en su sitio, abra el archivo site.css y pegue el siguiente código:

    2. @font-face {
font-family: 'FONT-NAME';
src: url('URL') format('embedded-opentype'),
url('URL') format('svg#FONT-NAME'),
url('URL') format('truetype');
font-weight: normal;
font-style: normal;
}
  2. Navegue a la carpeta que se le proporcionó en la fundición de fuentes o que descargó de FontSquirrel y busque un archivo de hoja de estilo con un código similar al anterior. La línea que comienza con font-family: tendrá el nombre único asignado a su fuente:
  3. Copie el nombre de la fuente y reemplace dos instancias de FONT-NAME en el fragmento de código anterior con el nombre de su fuente.
  4. Guarde y cierre el Modo Desarrollador.
  5. En el panel izquierdo, haga clic en Contenido y luego en Contenido del sitio.
  6. Haga clic en Administrar archivos, y en Seleccionar en el archivo de fuente para añadir un botón al sitio.
  7. Haga clic en el botón para abrir el Editor de contenido, haga clic con el botón derecho en el URL de la fuente y seleccione Copiar dirección del enlace.
  8. Vaya al Modo Desarrollador, abra site.css, y reemplace el URL con rutas a los respectivos formatos que cargó (el URL copiado del botón del paso 7) y haga clic en Guardar.
Advertencia

No olvide cambiar los signos de cierre: un punto y coma al final de la lista de archivos y una coma después del formato .svg.

El siguiente es un ejemplo de cómo debería verse el código terminado:

Regrese al editor, haga clic con el botón derecho en el elemento de texto que desea editar y haga clic en Editar HTML/CSS. Luego puede aplicar la nueva fuente a los widgets en todos los dispositivos o en vistas específicas del dispositivo utilizando el fragmento CSS de la siguiente forma: font-family: 'FONT-NAME' !Important;. Por ejemplo, para nuestra fuente, agregamos esta línea de código CSS: font-family: 'inklandregular' !Important;.

De esta manera, puede aplicar la fuente a párrafos, encabezados, y así sucesivamente. Si desea aplicar fuentes personalizadas a los elementos de texto en el encabezado, hágalo en el Modo de desarrollador.

Aplicar fuente a fuentes específicas del tema del sitio

Para aplicar sus fuentes personalizadas al tema del sitio, debe reemplazar los elementos CSS específicos por el nombre de su fuente personalizada. Para esto:

  1. Haga clic en el botón Modo de desarrollador en la barra de navegación.
  2. Haga clic en HTML/CSS del sitio y luego haga clic en site-theme.css.
  3. Busque el encabezado o tipo de fuente específico que desea cambiar (por ejemplo, H1, H2, etc.) y reemplace la familia de fuentes actual con el nombre de su fuente personalizada.
  4. Haga clic en Guardar.
  5. Haga clic en Cerrar para cerrar el Modo Desarrollador.

Aplique la fuente a través de CSS

Para establecer la fuente que ha incrustado como fuente de tema de su sitio, agregue la siguiente línea de CSS a site.css. Para obtener más información sobre cómo agregar CSS personalizado, consulte Modo de desarrollador.

"*#dm div.dmContent *, *#dm div.dmFooter *, *#dm div.dm-title {SU_CÓDIGO_DE_INTEGRACIÓN_GOOGLE}"

Reemplace YOUR_GOOGLE_INTEGRATION_CODE arriba por el código CSS de la familia de fuentes que copió de Google Fonts. Haga clic en Guardar.

Aplicar la fuente a un widget específico

Para aplicar una fuente a un widget individual:

  1. Haga clic con el botón derecho en el widget y en Editar HTML/CSS para abrir la ventana de edición de HTML/CSS del widget.
  2. Agregue el código CSS de la familia de fuentes que guardó en el paso 2 anterior entre los corchetes { } debajo del código CSS general o específico del dispositivo.

La fuente ahora se aplica a los elementos de texto del widget y usted puede utilizar el editor insertado para cambiar los colores y editar el texto de la manera habitual.

Aplicar fuente a fuentes específicas del tema del sitio

Para aplicar sus fuentes personalizadas al tema del sitio, debe sustituir los elementos CSS específicos por el nombre de su fuente personalizada. Para esto:

  1. Haga clic en el botón Modo de desarrollador en la barra de navegación.
  2. Haga clic en HTML/CSS del sitio y luego haga clic en site-theme.css.
  3. Busque el encabezado o tipo de fuente específico que desea cambiar (por ejemplo, H1, H2, etc.) y reemplace la familia de fuentes actual con el nombre de su fuente personalizada.
  4. Haga clic en Guardar.
  5. Haga clic en Cerrar para cerrar el Modo Desarrollador.

Notas

  • IONOS no admite el formato .woff2.
  • Presta atención a la forma en que se representan los glifos en la versión web de su fuente. Muchas fuentes personalizadas ofrecen diversas versiones de glifos. Asegúrese de que su fuente se vea correctamente antes de aplicarla al sitio en vivo.
  • Las fuentes personalizadas pueden ralentizar el rendimiento del sitio y el tiempo de carga porque es necesario descargar la fuente para poder mostrarla. Los sitios IONOS generalmente tienen una clasificación de velocidad de página muy alta, pero es inevitable que se produzca una disminución en la velocidad de carga de la página cuando se cargan fuentes adicionales en el sitio. Asegúrese de considerar si el uso de fuentes personalizadas justifica una disminución en la velocidad de la página.
  • En caso de que la fuente personalizada no se muestre por diversas razones, considere agregar una fuente de respaldo en su CSS.
  • En IONOS, no necesita usar consultas @media para mostrar fuentes solo en ciertos dispositivos. En cambio, simplemente puede agregar CSS personalizados en ciertos dispositivos.
  • Use solo fuentes con licencia para incrustación web o uso comercial. No cumplir con la licencia de propietario de una fuente constituye una infracción de sus derechos de autor.