Hoy en día, google lo pone fácil definiendo tipos de letras diversos para incorporar en la web sin dañar el rendimiento de esta y sin tener que estar diseñando el tipo de letra.
Google fonts te ofrece una amplia variedad de fuentes que puedes ver aquí y de nuevo, hace de nuestro trabajo algo más sencillo.
Es importante recordar que las letras pueden ser muy bonitas, muy estilosas, pero si quieres que haya feedback en tu web o tienda online, tiene que ser principalmente legibles. Cansar a un cliente con la lectura supone venta perdida segura.
Para poder instalar una fuente de google, iremos al enlace arriba mencionado y elegiremos uno de los que vemos.
En este caso voy a poner un ejemplo para poder ayudar a la instalación aunque es de sobra sencillo.
1) Elegimos la Normal 400, Slabo 27px y pinchamos sobre la flecha que pone «Quick use».
Veremos rápidamente el impacto que tiene ese tipo de letra en nuestra web. Importante para no influir en el mal rendimiento de la página.
2) Elige en el segundo paso de este acceso, el estilo de caracteres que puedes llegar a usar. En la fuente que he elegido, hay 2 opciones, sólo, pero pueden ser muchas más.
3) Integra la fuente en tu web, al inicio de los tags
<head></head>
con el código que te aparece. En mi caso el siguiente
<link href='http://fonts.googleapis.com/css?family=Slabo+27px&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
.
Ejemplo de la inseción:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Slabo+27px&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Slabo', latin;
font-size: 27px;
}
</style>
</head>
<body>
<div>Chupi!</div>
</body>
</html>
4) Como último paso integra la fuenta en tu css en vez de ponerlo directamente en el .html para futuras modificaciones te ahorrá dolores de cabeza.
font-family: ‘Slabo 27px’, serif;
Por ejemplo:
h2 { font-family: ‘Slabo 27px’, serif; font-weight: 400; }