Añadir fuentes a su sitio web

Las fuentes web de Adobe Fonts se pueden usar 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 admiten fuentes web.

Seleccionar fuentes para usarlas

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

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 agregar la familia a un proyecto web.

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 agregar la familia a un proyecto web.

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 desde la página Mis Adobe Fonts.

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.

Haga clic en Hecho para cerrar la ventana del proyecto web y seguir navegando. Para agregar 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 ha agregado aparecerán en Mis Adobe Fonts.

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.

Páginas relacionadas

¿Por qué mis fuentes web proceden de use.typekit.net?