Armé un muestrario de font para web, para todo el que necesite mostrar qué tipos de letra pueden verse en su página web. Para usarlos, hay que usar en la hoja de estilo la propiedad Font-family. Aquí un ejemplo para usarlo en párrafos:
p.estilo1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif;
color:#333333;
}
p.estilo2 {
font-family: Arial Black, sans-serif;
color:#6e0139;
}
Y después en el archivo HTML, el tipo de párrafo:
<p>Este es un párrafo con el estilo de letra Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;</p> <p>Este es un párrafo con el estilo de letra Arial Black, sans-serif;</p>
El problema de estos fonts es que tienen que estar instalados en la computadora del usuario para que los visualice, por eso se usan Familias de fonts y no un sólo tipo de letra. Esta es una captura de pantalla del muestrario en Ubuntu:
Y esta es una captura del muestrario en Windows:
Si queremos usar un font que no está en la lista de estándares, podemos subir los archivos ttf y utilizar @font-face para incluirlo en nuestro listado de fonts:
@font-face { font-family: feliz; src:url(‘http://www.blabla.com.ar/FantasiaSerifA-Normal.otf’);
font-family: feliz; font-weight: bold; src:url(‘http://www.blabla.com.ar/FantasticaSerifA-Bold.otf’);
font-family: feliz; font-style: italic; src:url(‘http://www.blabla.com.ar/FantaseB-BookItalic.otf’); }
Después, basta con poner a un párrafo la propiedad font-family con el nuevo font, y listo. El detalle es que Internet Explorer no soporta más que un tipo de fonts, el eot (fuente: w3school):
The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari. However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.
Otra alternativa es utilizar los fonts de Google: http://www.google.com/webfonts/# Una vez que elegimos un font, hacemos clic en “quick use”. Allí nos indica qué debemos agregar a nuestro código y cómo usar el font.
Code: <link href=’http://fonts.googleapis.com/css?family=Ledger’ rel=’stylesheet’ type=’text/css’>
Instructions: To embed your Collection into your web page, copy the code as the first element in the <head> of your HTML document. » See an example
4. Integrate the fonts into your CSS:
The Google Web Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
font-family: ‘Ledger’, serif;
