Webfont: tipografías hechas para la web

Veremos como implementar las webfonts para enriquecer nuestro sitio web.

Rodríguez Patiño, Eduardo
2020-12-01 | 2,626 lecturas

Antes estabamos limitados a trabajar con las fuentes que nos daba nuestro sistema operativo por defecto, y sobre todo que estas no eran compatibles.

Si queríamos dar una fuente increible a nuestra web para transmitir como un plan de publicidad el truco era crear imagenes, pero este concepto ya dio un paso atrás porque se vio que no era escalable ya que no podíamos aplicarle reglas de estilo.

Hoy en día contamos con @font-face

El cual te permite enlazar una fuente (tipografía) que hayas subido a tu servidor y lo invocamos mediante una regla css de esta manera

@font-face {
    font-family: 'Mi fuente'; /* Nombre de mi fuente, pongan lo que quieran */
    src: url('mifuente.eot'); /* La url de mi fuente*/
    src: /* diferentes formatos */
    url('mifuente.woff') format('woff'),
    url('mifuente.ttf') format('truetype'),
    url('mifuente.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

El tema esta que cada navegador interpreta diferente formato y para evitar este problema lo hacemos de esta forma, cosa que si no reconoce una pasa a la siguiente.

Muy bien una ves que tenemos agregado nuestra fuente a nuestra hoja de estilo ahora la llamamos con el siguiente còdigo.

p {font-family:'Mi Fuente', 'Tahoma'}

En el código anterior le estoy indicando que todos los párrafos tendran como fuente principal la que yo subí, y en caso no tenganmos usará Tahoma como fuente secundaria.

De todas maneras las fuentes varían ligeramente en cada navegador, por son detalles que te daras cuenta si prestas con atención pero de todas formas le estamos dando más vida a nuestras websites, que sería mi blog si usara las fuentes como Times New Roman.

Adjunto un ejemplo práctico para que puedan descargarlo y entender a más detalle como va el tema: