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 Duda, 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 Duda. 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 Duda

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 Duda.

    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 Duda 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;
    }
  3. 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:
  4. 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.
  5. Reemplace el URL con rutas a los respectivos formatos que cargó 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.

Notas


  • Duda 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 Duda 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 Duda, 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.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0

Comentarios sobre este artículo

0 comentarios

Inicie sesión para dejar un comentario.

×

Inicie sesión como profesional

El soporte telefónico prioritario está disponible exclusivamente para profesionales. Inicie sesión en su cuenta Pro ahora para ver nuestros números de soporte internacional.

Entrar
¿No es un profesional? ¡Compre un plan Pro!