Las fuentes personalizadas se encuentran entre los aspectos más atractivos de CSS3 para los diseñadores. Con la regla de la fuente de la cara , puede representar cualquier fuente que tenga en línea dentro del texto de su página web, independientemente de si el usuario lo tiene instalado o no.
Al igual que con la mayoría de las técnicas de CSS3, el código básico es bastante simple, pero la realidad práctica es un poco más compleja.
En este breve tutorial, analizaremos los conceptos básicos de incluir fuentes personalizadas en sus páginas.
Primero, asegúrese de que la fuente que desea usar tenga licencia para uso en la web. Casi todas las fuentes gratuitas se pueden usar en un sitio web y muchas fuentes premium están disponibles con una licencia que cubre el uso de la web.
Luego suba la fuente elegida a su servidor. Es posible que desee guardarlo en un directorio dedicado de "fuentes", pero esto es opcional.
Recuerde incluir los archivos para las variantes de la fuente que planea usar, como negrita o cursiva. Puede usar archivos EOT (OpenType incrustado) para Internet Explorer y OTF (OpenType) o TTF (TrueType) para el resto. (Las opciones adicionales incluyen WOFF (Web Open Font Format) y SVG (Scalable Vector Graphics), pero aquí nos atenderemos a los tipos más comunes).
Tome nota de dónde están almacenados los archivos de fuentes en su servidor.
Abra el archivo HTML o CSS de la página con la que está trabajando. Agregue una declaración de tipo de letra al código de estilo:
@font-face {}Primero dentro de la sección de la fuente de la fuente, déle un nombre a la fuente que luego puede usar para referirse a ella:
font-family: 'lovelyFont';A continuación, aún dentro de la sección de la fuente , proporcione la ubicación del archivo EOT:
src: url('fonts/lovely_font.eot');Altere la ubicación y el nombre de la fuente según sea necesario. A continuación, agregue una fuente OTF y / o TTF:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Esta es la base del código necesario, que será suficiente en muchos casos. Sin embargo, hay pasos adicionales que podemos tomar para que el código sea más confiable. Primero, amplíe esta sección para incluir un indicador del tipo de archivo de fuente:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Como otra medida de eficiencia opcional, podemos hacer que el navegador busque una copia local de la fuente en caso de que el usuario ya la tenga. Extienda su código nuevamente de la siguiente manera, agregando la sección local antes de especificar la URL, para que la fuente solo se descargue si es necesario:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');La adición es la misma para OTF y TTF. Especificamos el nombre de la fuente después de la palabra clave local .
En este caso, tenemos dos líneas que especifican la fuente local porque el nombre de la fuente tiene más de una palabra. La versión con guiones atiende la forma en que se almacenan los nombres de las fuentes en ciertos sistemas operativos; esta línea adicional no es necesaria si la fuente solo tiene una sola palabra en su nombre. Si sabe que una fuente puede tener diferentes nombres en diferentes sistemas, incluya cada una de las posibilidades en su sección local .
Finalmente podemos aplicar la fuente a los elementos de la página. En el código CSS para un elemento en particular, o un grupo de elementos, simplemente especifique el nombre de la fuente que utilizó, incluidos los errores que elija:
div { font-family: 'lovelyFont', sans-serif; }Si, por ejemplo, también desea usar una versión en negrita de su fuente, simplemente incluya otra sección de cara de fuente con la URL del archivo de fuente en negrita y una declaración de "font-weight: bold;". Especifique un peso de fuente en negrita para cualquier elemento con la fuente personalizada que se le aplica y el navegador representará automáticamente la versión en negrita:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }¡Eso es!
¿Utiliza CSS3 para expandir las caras de tipo disponibles para usted? ¿Utiliza un servicio como Typekit de Adobe o Webfonts de Google? Háganos saber en los comentarios.
Imagen / miniatura destacada, fuente de imagen a través de Shutterstock.