Trucos CSS: poner fuente personalizada en tu página con CSS

En este artículo te mostraremos unas herramientas para que puedas personalizar tu web y se diferencie de las demás. Gracias a Google Webfonts, Typekit, FontSquirrel y otras más podemos abandonar las clásicas fuentes como Tahoma, Verdana, Arial, Georgia, etc, y empezar a usar nuevas hermosas fuentes que podemos utilizar sin problemas en nuestros sitios.

Google Webfonts

Google Webfonts es un servicio de fuentes gratuitas que brinda el gigante de internet. La gran ventaja que nos proporciona es que las fuentes se cargan desde los servidores de Google y no desde nuestro sitio, aliviando las llamadas en nuestro servidor.

Google Webfonts cuenta hasta el momento con 573 familias de fuentes y agregó a su servicio una serie de fuentes recomendadas que podrían ir bien con la fuente que elegiste (enlace “Pop out”, etiqueta “Pairings”)

¿CÓMO USAR GOOGLE WEBFONTS?

Utilizar Google Webfonts es sencillo, lo primero que debemos hacer es buscar la fuente de nuestra preferencia, en el menú de la izquierda podemos filtrar entre los tipos de fuentes disponibles que son sans-serif, serif, display y handwriting. También en un selector podremos elegir el grosor.

Para colocar la fuente deseada en nuestro sitio debemos clickear en “Quick use” en donde se nos abrirá una página con más detalles y también podremos seleccionar los estilos de la fuente (bold, semi-bold, italic, normal, book).

Ya seleccionados los estilos de la fuente, más abajo en la misma página Google nos proporcionará código para mostrarla en nuestro sitio. Puedes insertarla con cualquiera de estas tres opciones:

Dentro de las etiquetas <head>

Importándola en nuestro CSS

Llamándola con Javascript

A continuación solamente la llamaremos como a cualquier fuente en nuestro CSS

Visita el sitio

Typekit

Typekit es un servicio que proporciona la popular empresa Adobe en el cual podremos agregar fuentes de gran calidad a nuestra página. El truco con Typekit es que por algunas fuentes, debemos pagar por el servicio desde 24 hasta 99 dólares por año, dependiendo de plan contratemos.

Typekit tiene hasta el momento 789 familias de fuentes y 213 de ellas son para uso con nuestra cuenta gratuita. Typekit cuenta con unas grandes herramientas para filtrar fuentes para encontrar exactamente la que estamos buscando.

¿CÓMO USAR TYPEKIT?

Para usar Typekit necesitaremos registrarnos en su sitio, en mi caso me registre con el plan “Trial” para probar el servicio. Este plan es totalmente gratuito pero podemos elegir solamente entre las 213 fuentes que están para este plan ya que para las otras fuentes necesitaremos tener una cuenta paga.

Una vez registrados buscaremos nuestra fuente y cuando la encontremos solamente deberemos pasar el cursor sobre ella y se desplegará un enlace que dirá “+ Add to kit”. A continuación se abrirá un Popup en el cual tenemos que elegir los estilos de fuentes (bold, semi-bold, normal, italic, etc) que usaremos en nuestro sitio, cuando tengamos todo pronto haremos click en “Publish”. En el mismo Popup encontraremos el código para insertar la fuente en nuestro sitio en la esquina superior derecha en el enlace “Embed code”. Ahora lo único que debemos hacer es copiar el código que nos proporcionan y pegarlo dentro de nuestras etiquetas <head> de nuestro sitio.

Código de ejemplo

Visita el sitio

FontSquirrel

FontSquirrel aparte de ser uno de los mejores sitios para descargar fuentes de calidad y gratuitas, también proporciona un servicio de fuentes para web. A diferencia de Google Webfonts y Typekit, aquí nos bajaremos el @font-face kit listo para usar e instalarlo en nuestro propio servidor.

Para obtener una @font-face kit solamente debemos clickear en el enlace “@font-face kits” del menú. Nos aparecerá un listado de fuentes separados por tipos en donde buscaremos la fuente que más nos guste. Para descargarla solamente tenemos que clickear en “Get kit” arriba del nombre de la fuente.

¿Cómo usar FontSquirrel?

El archivo que descarguemos nos dará un CSS con el @font-face y las fuentes compatibles con los diferentes sistemas operativos. Para llamarlo podemos copiar y pegar el @font-face en nuestro CSS principal o simplemente llamar el archivo dentro de las etiquetas <head>

Visita el sitio

Scroll to top