Desde esta opción Ud. podrá mantener los tipos de letra utilizados en el diseño del sitio, agregar nuevos tipos de letra, editar los que ya existen o eliminarlos.
Una vez que ingresamos se nos presenta el siguiente diálogo:
Cuando nos disponemos a agregar una nueva fuente utilizando el botón "Nuevo" tenemos tres tipos de fuentes que podemos agregar:
Consideraciones en el uso de Web Fonts
Para las Web Fonts hay que proveer los archivos de fuentes. Los formatos soportados son: WOFF, EOT, TTF, EOT
No es necesario subir todos los formatos, pero según el navegador y la versión se necesita uno u otro.
Formatos soportados por navegador:
-
Internet Explorer: EOT (IE6+)
-
Firefox: WOFF (3.6+) y TTF (3.5+)
-
Chrome: WOFF (6.0+) y TTF (todas las versiones)
-
Safari: WOFF(5.1+), TTF (3.1+)
-
Safari (iphone / ipad): SVG (todas las versiones)
-
Opera: WOFF (11.10+), TTF, SVG (10.0+)
-
Opera Mobile: TTF, SVG (9.7+)
-
Opera Mini: no soporta WebFonts
Con WOFF y EOT se cubre cualquier navegador actual de PC. Para los dispositivos móviles es necesario agregar TTF y SVG.
Con respecto al uso, el código generado para incluir una webfont en la página se guarda en un cache por sesión. En backend se administra automático, si se agrega/actualiza una fuente se expira y regenera en el momento. En frontend para que se tome un cambio es necesario cerrar y abrir el navegador para generar una sesión nueva.
Para el caso de una fuente en formato SVG hay que asegurarse que el nombre ingresado en el campo "Nombre" sea el mismo que figura dentro del archivo SVG.
Configuraciones en el servidor web
IIS7 no tiene registrados los tipos MIME para las extensiones WOFF y SVG por lo que hay que darlos de alta para que funcionen las WebFonts en estos formatos:
-
.woff / application/font-woff
-
.svg / image/svg+xml
Firefox no permite la visualización de fuentes que son cargadas desde un dominio diferente al actual. Como se usan las URLs de frontend para cargar las fuentes, en backend (vista previa) no se ven. Para solucionar esto hay que dar de alta en el IIS un Header sobre el directorio virtual "media".
Desde la herramienta de administración del IIS posicionarse sobre el directorio virtual "media", ir a "HTTP Response Header" -> Add, Name: "Access-Control-Allow-Origin", Value: "*" (sin las comillas).
No es necesario hacer esto si se trabaja en backend con otro navegador.
Ver más
¿Cómo puedo utilizar mis propios tipos de fuente en mi sitio?