DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB Elaboración de documentos web mediante lenguajes de marcas Añadir tipografías externas por CSS.

Presentación del tema: "DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB Elaboración de documentos web mediante lenguajes de marcas Añadir tipografías externas por CSS."— Transcripción de la presentación:

1 DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB Elaboración de documentos web mediante lenguajes de marcas Añadir tipografías externas por CSS

2 Añadir tipografías externas (I) Desde la aparición de servicios como Google Fonts o Fonts.com ya es posible el sueño de cualquier diseñador web. Utilizar un catálogo mucho más extenso y personalizado de fuentes en el diseño. Hasta la existencia de esta posibilidad lo que se utilizaban era imágenes para reproducir texto. http://www.fonts.com http://www.google.com/fonts http://www.fontsquirrel.com/

3 Añadir tipografías externas (II) Tenemos distintas posibilidades a la hora de incluir la tipografía en nuestras páginas. - Como un recurso externo a nuestro servidor por medio de una entrada en nuestro header (por css, por javascript, etc). - Almacenando las fuentes en nuestro servidor y sirviéndolas nosotros mismos.

4 Añadir tipografías externas (III) Con el servicio de Google Fonts contamos con un amplio catálogo de fuentes, en donde podemos interactuar igual que si utilizaramos un carro de la compra. Tras realizar nuestra selección podemos comprobar el “peso” en la carga de la página.

5 Añadir tipografías externas (IV) El modo más sencillo de incluir tipografías con Google Fonts es incluir una linea de código en el con todas las fuentes a utilizar, como una inclusión CSS.

6 Añadir tipografías externas (V) A continuación simplemente podemos aplicar la propiedad font-family estandar en CSS a la clase o elementos que queremos aplicarlo. H1 { font-family: "Mystery Quest", “Times New Roman”, serif; }

7 Añadir tipografías externas (VI) Otro modo de hacerlo es descargando los ficheros de fuentes dentro de nuestro proyecto en un directorio y cargándolo nosotros mismos en nuestro CSS con la propiedad @font-face. El principal inconveniente es que tiene un soporte incompleto en IE8. http://www.w3schools.com/cssref/css3_pr_font- face_rule.asp

8 Añadir tipografías externas (VII) En primer lugar definimos la ubicación y nombre del tipo de fuente. @font-face { font-family: Arbutus; src: url("../fonts/Arbutus/Arbutus- Regular.ttf"); } Y luego hacemos la declaración CSS al elemento. H1 {font-family: "Mystery Quest", “Times New Roman”, serif;}

9 Añadir tipografías externas (VIII) Soporte de tipos de fuentes según navegadores Internet Explorer 9+, Firefox, Chrome, Safari y Opera soportan WOFF (Web Open Font Format) font. Firefox, Chrome, Safari y Opera also support fonts of type TTF (True Type Fonts) and OTF (OpenType Fonts). InternetExplorer NO.

10 Añadir tipografías externas (IX) Un servicio imprescindible para la elección de tipografías y conversión es Font Squirrel. Aparte de tener un catálogo de tipografías, podemos utilizar para convertir entre los distintos formatos. http://www.fontsquirrel.com/tools/webfont-generator

11 Añadir tipografías externas (y X) Un recurso siempre útil y recomendable es utilizar tipografías para sustituir los recursos en imagen, mucho más pesados. Este el caso de las Icon Webfonts: http://fortawesome.github.io/Font-Awesome/ http://zurb.com/playground/foundation-icon-fonts-3 http://icomoon.io/