viernes, 11 de enero de 2013

Tip: WebFonts + GeneXus

Inaugurando la sección tips les dejo un breve articulo sobre webfonts en GeneXus.

Para que nuestra pagina se vea como queremos es importante lograr que las fonts que elegimos sean las que ve el usuario de la aplicación.
Cuando trabajamos en nuestro ambiente local tenemos las fuentes instaladas, por lo que la pagina siempre se va a ver como queremos. Para los usuarios que no tengan las fuentes instaladas esto no va a ser así y el diseño que verán de nuestra pagina va a ser distinto.




Para solucionar este en Simplifica hacemos lo siguiente:

1) Crear un CSS (archivo) con la declaración de las fuentes que voy a utilizar:

Por ejemplo font.css con:

@font-face{
font-family:'MyriadPro-Bold';
src: url('MyriadWebPro-Bold.woff') format('woff'),
url('MyriadWebPro-Bold.ttf') format('truetype'),
url('MyriadWebPro-Bold.svg') format('svg');
}

2) Agregar la fuente en formato woff, ttf/otf y svg (en el caso de arriba, en la carpeta web)

3) Agregar la referencia en la masterpage
Form.HeaderRawHTML += ''

4) Luego agregar clases en mi tema y en Font Family poner el nombre que le puse a la fuente, por ejemplo "MyriadPro-Bold'"
Siempre es aconsejable que pongan dos, una Webfont y una de las estándar (la que mas se aproxime) para el caso de los browsers viejos.

Si tengo un textblock, variable, etc. tengo que asociarle la clase de mi fuente (recuerden que se pueden poner mas de una clase asociada a un elemento html).
En el combo de Font de GeneXus tienen que dejar el valor by default para que GX no agregue el Style de la font. En ese combo no les van a aparecer las Webfonts, solo aparecen las ttf instaladas en el sistema.

Otra alternativa....
En lugar de esto se pueden utilizar las Google Webfonts, que son fonts almacenadas en Google, entonces simplemente hay que agregar la referencia a la fuente y esto ya es el CSS + Font
ej:


y ya pueden agregar en la clase que quieran usar la FontFamily Stalemate
http://www.google.com/webfonts