¿Cómo podemos personalizar las fuentes con CSS?

Ingresando un fuente en particular podemos personalizar los títulos, menús y textos de nuestros artículos, con el fin de hacerlos únicos en la web.

Añadiendo una pequeña regla al archivo CSS: @ Perfil delantero.

Para elegir nuestra fuente, que debe ser gratuita, podemos tomar las que ya están instaladas en nuestro equipo, o buscar una en Internet: un buen sitio es www.fontsquirrel.com, donde encontrarás una gran variedad de fuentes.

Después de haber identificado nuestra fuente, para hacerla compatible en la web nos dirigimos a la página ‘@ font-face Generador‘, siempre encendido www.fontsquirrel.com: aquí cargamos nuestra fuente, generamos el paquete y lo descargamos en la pc. En este paquete encontraremos la fuente dividida en 4 tipos, lo que la hace compatible con los principales navegadores.

Ahora carguemos el paquete en el servidor y editemos nuestro archivo CSS:

@font-face {

font-family: ‘Arial’;

src: url(‘arial-webfont.eot’);

src: local (‘ ‘), url(‘arial-webfont.woff’) format (‘woff’), url(‘arial-webfont.ttf’) format(‘truetipe’), url(‘arial-webfont.svg#Arial’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

En la práctica, esta regla primero le dice al navegador que verifique si la fuente existe en la computadora; si no está instalado aquí, la cadena hará que el navegador cargue la fuente con la extensión correcta para permitir su visualización.

Otra solución es esta:

@font-face {

font-family: MyFontName;

src: url(https://www.mywebsite.it/fonts/MyFontName.ttf); }

p { font-family: MyFontName, verdana; }

Una vez que el archivo MyFontName.ttf (fuente de muestra) se ha insertado en la carpeta de fuentes de nuestro sitio, es posible ver la fuente llamada MyFontName o, alternativamente, si el navegador no es compatible con CSS3, la fuente Verdana.

Puede encontrar más información aquí. http://www.w3.org/TR/css3-fonts/#the-font-face-rule.

Aquí hay excelentes editores de CSS que puede usar: