Hace 5 años

Como usar nuestras fuentes tipográficas en nuestra web

En esta web he usado cuatro fuentes tipográficas diferentes: Cookie, Hooteroll, McGannahan y Verdana. Para que el navegador de internet pueda visualizar estas tipografías, es necesario que estén instaladas en el sistema operativo, o que las añada en el tema de esta página web. El mismo logo es un texto con la fuente Cookie, y para que se vea tal y como lo he diseñado, he usado la etiqueta CSS3, @font-face.

También nos encontramos con que, hasta que no se pongan de acuerdo, cada navegador reconoce un formato diferente de fuente. Por lo que necesitaremos usar un set de fuentes compuesto por los siguientes formatos ttf, eot, woff y svg. Este set de formatos lo podemos obtener en una de las siguientes webs: Code and more, Font2web, o Font Squirrel. Solo necesitamos la fuente en formato ttf, para subirla y a los pocos segundos descargarnos el set completo.
Los diferentes formatos de nuestra fuente las guardamos en una carpeta que yo la llamo tipografias, dentro de nuestro tema web. Y en el CSS añadimos el código de la etiqueta @font-face. Dónde pone MiFuente va el nombre de la fuente.

@font-face

/* Nuestra fuente */
@font-face{
font-family:’MiFuente’;
src:url(‘tipografias/MiFuente.eot’);
src:url(‘tipografias/MiFuente.eot?#iefix’) format(‘embedded-opentype’),
url(‘tipografias/MiFuente.woff’) format(‘woff’),
url(‘tipografias/MiFuente.ttf’) format(‘truetype’),
url(‘tipografias/MiFuente.svg#BelleroseLight’) format(‘svg’);
font-weight:normal;
font-style:normal;
}

Propiedad font

Con este código ya podemos usar la fuente, igual que si fuese una de las fuentes del sistema, usando font-family. Aquí os pongo un pequeño resumen de las propiedades que le podemos poner a un texto.

font-family

Determina la fuente que se va a utilizar. En el caso de usar las del sistema, se ponen unas cuantas fuentes similares, para que coja la primera que encuentre de la lista.

font-family:’MiFuente’;
font-family:verdana, arial, impact, times;

font-style

Le da estilo normal, italic(italica), u oblique(inclinada).

font-style:normal;

font-variant

Convierte las minúsculas en pequeñas mayúsculas. Las opciones son: normal y small-caps.

font-variant:normal;

font-weight

Con esta propiedad podemos elegir el grosor de la fuente. Las opciones son: normal, bold(negrita), bolder(más grosor que el valor heredado), lighter(menos grosor que el valor heredado), o un valor entre 100(menos grueso) y 900(más grueso).

font-weight:normal;

font-size

Nos permite elegir el tamaño de la fuente. Los valores pueden ser absolutos: xx-large (h1), x-large (h2), large (h3), , medium (h4), small (h5), x-small, xx-small (h6).Relativos: larger(aumenta el tamaño de la letra) o smaller(disminuye el tamaño de la letra). Con un valor exacto con px, o un valor proporcional con em o porcentaje.

font-size:125%;

font

Con font tenemos todas las propiedades anteriores en una sola linea.

font: [style] [variant] [weight] [size]/[line-height] [famly];
font:italic bold 25%;
font:normal 100% ‘MiFuente’;

Diseño web
855

Dame tu opinión

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>