Las fuentes tipográficas que tenemos instaladas en nuestros equipos no se incorporan automáticamente en Axure Share ni en el HTML que éste genera.

Cuando se realizan prototipos, al igual que en el desarrollo de un proyecto, se utilizan fuentes distintas a las preinstaladas con el sistema operativo, por ej. las fuentes corporativas o de iconos.

La visualización del prototipo en el equipo local con estas fuentes se visualiza correctamente ya que éstas están instaladas. Pero cuando se sube el proyecto a Axure Share o se genera el HTML, las fuentes no se incrustan.

Hasta que la herramienta Axure haga esta función automáticamente, la opción más sencilla es incrustar la fuente como @font-face. Pero tiene una particularidad con respecto a cómo se realiza en CSS.

Sigue estos pasos y funcionará!

Paso 1: Preparando la fuente

Hay que codificar la fuente a Base 64 para que los iconos sean representados correctamente.

Para ello, accede a esta web https://transfonter.org/ y sube tu tipografía en formato TTF. Ante de comenzar con la conversión, configura en la parte inferior las siguientes opciones, y finalmente pulsa «Convert».

• Activa las opciones:
  • Family support
  • Add local() rule
  • Base64 encode

• Marca todas las opciones de formato: TTF, EOT, WOFF, WOFF2 y SVG.

Cuando esté convertido, tan solo falta descargar el fichero para poder utilizar el código generado. Descomprime y edita el fichero stylesheet.css.

¡No te asustes! Aunque veas mucho código no tienes que interpretarlo. Tan sólo copiar y pegar 😉

En el fichero CSS hay dos fragmentos de @font-face. El segundo, lleva la url «local». Copia desde url (data:application/……) hasta el final, obviando la llave «}».

url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAGQcAA0AAAAAyrwA ………) format(‘woff’),
url(‘tufuente.ttf’) format(‘truetype’),
url(‘tufuente.svg#cepsa-webfont’) format(‘svg’);
font-weight: normal;
font-style: normal;

Paso 2: Incrustar la fuente en Axure

Una vez que tenemos la fuente preparada, ahora en Axure hay que ir a Publicar > Generar archivos HTML (también se puede hacer en Opciones previas) > Fuentes web

Pulsamos el símbolo verde «+» para añadir la tipografía / fuente iconográfica:

• Proporcionar un nombre
• Seleccionar la opción @font-face
• En el campo @font-face{} que se habilita:
  • Primero añadir el nombre de la fuente (recomiendo que se llame igual que el que se genera en el HTML. Para eso, ejecuta tu prototipo en el navegador y con el inspector de código averigua cómo se llama tu fuente)
    font-family: ‘tufuente’
    
  • Segundo, a partir de la anterior línea pegar el fragmento que se indica en el paso 1.

@font-face{
font-family: ‘tufuente‘;
url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAGQcAA0AAAAAyrwA…………………………) format(‘woff’),
url(‘tufuente.ttf’) format(‘truetype’),
url(‘tufuente.svg#tufuente‘) format(‘svg’);
font-weight: normal;
font-style: normal;
}

Así quedaría la ventana de Fuentes Web.

Espero que este artículo te ayude. Si te ha sido útil compártelo!