Vincular una hoja de estilos de fuente externa a un sistema de marca

Este artículo se aplica únicamente a las plantillas de automatización de contenido, que son diferentes de las plantillas personalizadas de Brandfolder y CI Hub. 

Su marca Es posible que ya tengas tus fuentes digitalmente accesibles y listas para la web a través de una CDN (Content Delivery Network). En este caso, simplemente puede vincular la hoja de estilo CSS que declara y accede a sus fuentes alojadas en el sistema de marca, listo para usar en sus plantillas.

Vinculación de la primera hoja de estilo

1. Desde la pestaña de tipografía en el sistema de marcas, haga clic en Editar en la esquina superior derecha de la página.
2. Podemos actualizar una fuente declarada en una tipografía existente o podemos comenzar desde cero con una nueva tipografía y lista de fuentes.
3. Haga clic en Agregar origen en una entrada de fuente no vinculada para abrir el modal de enlace de hoja de estilo. 
4. Basado en el@font-facefont-familySi se declara en la hoja de estilo, podrá especificar la fuente que desea vincular en el Nombre entrada. Si existen varias fuentes, echa un vistazo a la sección de fuentes múltiples a continuación.
5. Haga clic en Agregar origen para finalizar el proceso de vinculación.

Tu nueva fuente ahora estará vinculada a tu CDN, por lo que cada vez que crees una plantilla estará disponible. 

Formato de hoja de estilo

Al vincular una hoja de estilo externa, Brand System espera un archivo CSS de acceso público que contenga uno o más@font-facedeclaraciones a las fuentes. 

Su archivo debe verse algo como el siguiente. Recuerde que la hoja de estilo que vincula a Brand System seguirá necesitando acceder a las fuentes que declara en elSRCURL.

@font-face { font-family: 'Helvetica'; src: url('helvetica-bold.woff2') format('woff2'), url('helvetica-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica.woff2') format('woff2'), url('helvetica.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2')('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: italic; }

Múltiples fuentes en tu hoja de estilo

Si su hoja de estilo se ve como el ejemplo de abajo (es decir, múltiples@font-facefont-familydeclaraciones) tendrá que configurar varias fuentes con el mismo enlace de CDN. Esto es para que pueda crear correctamente escalas de tipos basadas en las fuentes recién vinculadas. Para ver cómo se ve esto en acción, echa un vistazo al video a continuación. 

@font-face { familia tipográfica: 'Poppins'; src: url('poppins.woff2') format('woff2'), url('poppins.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Helvética'; src: url('helvetica-bold.woff2') format('woff2'), url('helvetica-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: italic; }

Otros recursos

• MDN Web Docs: @font-face
• Digital Ocean: Cómo definir fuentes personalizadas en CSS con @font-face y visualización de fuentes