Tipografías con @font-face

A la hora de seleccionar una tipografía para el desarrollo de una página Web, estábamos limitados al empleo de tipografías de sistema. Sin embargo mediante una sencilla regla CSS podemos utilizar tipografías, que no sean de sistema, con la seguridad de su correcta visualización incluso en equipos que no dispongan de dicha tipografía.

Lo primero que tendremos que hacer, es incluir las tipografías que queramos emplear a una carpeta como lo haríamos con las imágenes o con las hojas de estilo CSS; en mi caso la he llamado fonts.

Después añadiremos a nuestra hoja de estilo CSS la siguiente regla:

@font-face {
font-family: Nombre de la tipografía;
src: url(../fonts/NOMBRE DE LA TIPOGRAFÍA.TTF) format('truetype');
}

Con un ejemplo se verá más claro. En mi caso voy a usar la tipografía Calibri:

@font-face {
font-family: Calibri;
src: url(../fonts/CALIBRI.TTF) format('truetype');
}

Lo mismo para el uso de negrita:

@font-face {
font-family: Calibri;
src: url(../fonts/CALIBRIB.TTF) format('truetype');
font-weight:bold;
}

Para el uso de cursiva:

@font-face {
font-family: Calibri;
src: url(../fonts/CALIBRII.TTF) format('truetype');
font-style:italic;
}

Y la cursiva negrita:

@font-face {
font-family: Calibri;
src: url(../fonts/CALIBRIZ.TTF) format('truetype');
font-style:italic;
font-weight:bold;
}

No hay comentarios:

Publicar un comentario

Entradas populares