como-insertar-fuentes-web

Cómo insertar fuentes no estándar en tu página web

Adoramedia
Menú

El diseño cambió el papel por la pantalla y con ello su modo de expresión. Hasta hace unos años, los diseñadores web contaban con un grupo reducido de tipos clásicas, las “cinco fantásticas” (Arial, Helvética, Verdana, Trebuchet y Times New Roman), suponiendo una limitación en la personalización del site y siendo el talón de Aquiles de las marcas para poder transmitir su identidad corporativa de manera online.

Hoy en día contamos con varios servicios que permiten indexar las fuentes para que sean compatibles en nuestros sitios web y puedan visualizarse correctamente en cualquier navegador, rompiendo por fin el saco de la homogeneidad tipográfica.

@font-face

Esta regla CSS permite incrustar tipografías en nuestra web, enlazando la fuente por defecto desde el servidor hasta la descarga en la caché del navegador.

Plataformas como Font Squirrel, TypeKit o Fonts Live son capaces de crear un set de fuentes @font-face en formatos .eot (carga en Internet Explorer), .svg (código compatible en iOS), .woff (el nuevo estándar) y los estándares .ttf y .otf.

A continuación la sintaxis en lenguaje CSS:

@font-face {font-family: "fuente"; font-style: normal; font-weight: 400;}
h2{color: #999999; font-family: 'fuente'; font-size: 3em; }

 

Google Font API

Google Fonts simplifica aún más el trabajo. Sin necesidad de convertir fuentes ni alojar archivos en nuestro servidor. Únicamente es necesario copiar el código proporcionado por la aplicación e insertarlo en el <head>, para posteriormente enlazar las fuentes desde CSS con el atributo font-family.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300'  rel='stylesheet' type='text/css'>

Como único inconveniente, sólo podemos utilizar las tipografías listadas por Google, no las que nosotros queramos.

 fuentes web con Google Fonts API

Typekit

Servicio semejante a Google Fonts bajo el lema “Fonts as a Service” (fuentes como un servicio) que vincula tipografías comerciales en los sitios web a precio de licencia. Tan sólo es necesario crearse una cuenta, compilar un kit de fuentes y pegar el script generado en la etiqueta <head>.

Fuentes web con Typekit

A continuación mostramos algunos ejemplos destacados de páginas web donde las tipografías dejan de ser un simple elemento de lectura para convertirse en protagonistas del diseño:

Ejemplo Fuente web

 

Ejemplo fuentes para paginas web

 


 

 

Compartir

Tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de privacidad y protección de datos, pinche en el enlace para más información. ACEPTAR

Aviso de cookies