Guía del usuario Cancelar

Añadir fuentes a su sitio web

Buscar

Última actualización el 2 ago 2023

Puede usar las fuentes web de Adobe Fonts en sus sitios web, campañas de correo electrónico HTML, artículos con formato AMP de Google y muchos otros tipos de proyectos donde se admitan fuentes web.

Seleccionar fuentes para usarlas

Empiece explorando la biblioteca de fuentes. Puede elegir el idioma compatible que necesite en el menú desplegable IDIOMAS Y SISTEMAS DE ESCRITURA.

Interfaz web de fuentes con la configuración de idioma resaltada — Seleccionar el menú de idiomas y sistemas de escritura para ver el menú de filtros de idioma para fuentes

Añada etiquetas o filtros para reducir la lista de fuentes. Utilice nuestras etiquetas de lenguaje natural para buscar fuentes que se acomoden al estilo de su proyecto o aplique filtros por clasificación (como serif o sans serif), propiedades (altura de x, anchura o grosor) o idioma.

Crear un proyecto web

Cuando encuentre una fuente que le guste, haga clic en el botón </> para añadir la familia a un proyecto web.

Imagen de fuentes Gilbert con la opción Añadir familia resaltada

También puede hacer clic en el nombre de la fuente para abrir la página de la familia y ver todos los grosores y estilos de fuente disponibles. A continuación, haga clic en </> Añadir a proyecto web en la parte superior de la página para añadir la familia a un proyecto web.

Añadir familias de fuentes y elegir estilos y grosores de fuentes de la web de fuentes

En la ventana Añadir fuentes a proyecto web, asignará un nombre a su proyecto web y decidirá qué fuentes deben incluirse.

Haga clic en el menú y elija “Crear un nuevo proyecto”.
Asigne un nombre al proyecto.
Use las casillas para seleccionar los grosores y estilos de fuente que desea incluir.
Cree el proyecto.

También podrá realizar cambios más tarde en la configuración del proyecto en la página Administrar fuentes.

Imagen de una ventana emergente donde hay seleccionadas unas fuentes para añadirlas a un nuevo proyecto a través de la web de fuentes

A continuación, se le facilitará el código de inserción para cargar las fuentes en su sitio web. Las diferentes opciones se explican en la página de ayuda de código de incrustación y el código de incrustación predeterminado funciona bien en la mayoría de los proyectos.

Copie el código de incrustación y agréguelo a la etiqueta <head> en su sitio web.

En la imagen aparece el código incrustado de las fuentes junto con los estilos de fuentes

Haga clic en Hecho para cerrar la ventana del proyecto web y seguir navegando. Para añadir más fuentes a su proyecto, haga clic en el botón </> en otra familia de fuentes y luego elija el nombre de su proyecto en el menú (en lugar de “Crear un nuevo proyecto”).

Personalizar el proyecto web

Su proyecto web y todas las fuentes que haya añadido aparecerán en Administrar fuentes.

Haga clic en el botón Editar proyecto para cambiar los grosores y estilos de fuente que incluir, eliminar por completo una familia de fuentes web del proyecto o designar una configuración de visualización de fuentes. También puede cambiar el conjunto de caracteres en el editor de proyectos web, que especifica la compatibilidad con el idioma del proyecto.

Las fuentes del este asiático deben servirse con subconjunto dinámico, mientras que otras fuentes tienen opciones de subconjunto basadas en el idioma: Predeterminado, Todos los caracteres o un subconjunto de idioma personalizado. La página de ayuda Compatibilidad de idioma y subconjuntos tiene más información sobre las diferentes opciones.

También puede incluir cualquiera de las Funciones de OpenType en el proyecto marcando la casilla “Funciones de OpenType”. Al marcar esta casilla también se muestra una lista de las funciones disponibles para esa familia de fuentes web en particular, como ligaduras, caracteres alternativos o mayúsculas pequeñas.

La visualización de fuentes le permite especificar cómo se cargan las fuentes web en el explorador web y cómo se aplican a su sitio web. Más información sobre estas opciones está disponible en nuestra página de ayuda configuración de visualización de fuentes.

Cuando tenga el proyecto configurado de la manera que lo desee, haga clic en “Guardar cambios” para guardar el proyecto. Las actualizaciones estarán disponibles para su uso en su sitio web pasados unos minutos.

Aplicar las fuentes en el CSS

La página Proyecto web muestra el nombre de la familia de fuentes CSS, el grosor numérico y el estilo de fuente de cada fuente del proyecto. Use estos nombres de familia de fuentes en su CSS para aplicar las fuentes al texto.