Ahora aprenderemos utilizar la regla @font-face, veremos qué es, para qué sirve y cómo funciona, básicamente se trata de la regla que nos da más opciones para establecer la fuente o tipo de letra que queremos utilizar en nuestra página web, ahora ya no estamos limitados a la cantidad de tipografías que pueda tener el usuario, ahora tenemos el control para implementar una fuente personalizada que queremos.
Ver índice del contenido
Qué es y para qué sirve @font-face CSS
@font-face es una regla de CSS que permite establecer una fuente tipográfica o también conocida como tipografía o tipo de letra para los elementos de texto que se desean. En palabras simples, @font-face es la regla que debemos usar si queremos emplear algún tipo de letra en especial, que no esté disponible en el dispositivo del usuario por defecto.
En la siguiente imagen se muestra solo unas cuantas fuentes de la gran cantidad de fuentes de Google fonts.
Recuerda que el tipo de letra podíamos establecer mediante la propiedad font-family, sin embargo hay un número limitado de tipos de letra que podemos usar directamente; aparte de ellas existen otros tipos de fuente mucho más interesantes, más atractivas y especiales que seguramente te pueden interesar utilizarlas en algún proyecto. La regla @font-face viene a dar esta posibilidad de que podamos hacer uso de dichas fuentes tipográficas especiales.
Cómo poner fuentes personalizadas con CSS
Poner una fuente personalizada con CSS en muy fácil, para ello estableceremos una regla @font-face, mediante ciertas propiedades y valores que aprenderemos más adelante en esta entrada; dentro de dicha regla estableceremos el nombre de la tipografía, dicho nombre es un nombre personalizado, podemos elegir el que queremos, luego estableceremos la ubicación u origen de esa fuente tipográfica, ya sea que este se encuentre en una carpeta del proyecto o en algún lugar remoto al que se puede acceder mediante una dirección URL.
Además, podremos establecer algunas características como el peso del texto, algún estilo, etc. todo ello lo haremos declarando las propiedades respectivas dentro de la regla @font-face.
Por último, una vez creada la regla con las respectivas propiedades y valores, es momento de asociarla a cualquier elemento de texto que queremos. Asociar una regla @font-face ya creada, a un elemento de texto es muy simple, solo declaramos la propiedad font-family para el elemento de texto y en su valor colocamos el nombre de la regla @font-face creada.
Por ejemplo:
Creando una regla @font-family
@font-face {
font-family: nombrepersonalizado;
src:url();
font-style: cursive;
font-weight:700;
}
Ahora asociemos a un elemento de texto, a un párrafo.
p {
font-size:30px;
font-family:nombrepersonalizado;
}A grandes rasgos y de forma genérica hemos conocido la manera en la que funciona la regla @font-face y cómo este nos permite establecer una tipografía personalizada. A continuación destripemos cada propiedad y los valores que pueden tomar y al final practicaremos con varios ejemplos.
Propiedades necesarias
La regla @font-face requiere establecer dos propiedades importantes para funcionar, si una de ellas no se encuentra declarada, entonces no será posible su aplicación; dichas propiedades son: font-family y src, veamos de qué trata cada una de estas.
Font-family
La propiedad font-family nos permite ponerle un nombre al nuevo tipo de letra que estamos agregando, este nombre puede ser cualquier nombre de tu elección. El nombre se establece en el valor de la propiedad font-family
La propiedad font-family es bastante conocida, nos permite establecer un tipo de letra, pero en este caso servirá para colocar un nombre para la nueva fuente que estamos agregando o si prefieres entender como “creando”.
Src
La propiedad src nos permite establecer cuál es dicha fuente personalizada, dicha fuente puede estar contenida en un archivo o puede estar alojada en un servidor remoto, es decir fuera de la carpeta de documentos, en dicho caso utilizaremos la dirección URL donde se encuentra la tipografía que deseamos emplear.
Observa el siguiente ejemplo; se trata de establecer el origen de la fuente tipográfica, si el archivo se encuentra en loca, entonces el valor será: local("nombre de fuente"), en caso se encuentre en una dirección URL ya sea una parcial o una absoluta, será: url(), se pueden especificar varias separándolas con comas (,), para asegurar la disponibilidad e incluso en otros formatos, el navegador puede aplicar el primer disponible o compatible.
src: local('Tangerine Regular'), local('Tangerine-Regular'), url(https://fonts.gstatic.com/s/tangerine/v12/IurY6Y5j_oScZZow4VOxCZZM.woff2) format('woff2');También debemos mencionar que existen formatos de tipografías, estas tendremos que especificarlas mediante la format(). Más adelante veremos ejemplos aplicando la teoría y todas las propiedades aprendidas.
Propiedades opcionales
Además de las propiedades requeridas, podemos utilizar las opcionales, estas nos ayudarán a especificar mejor algunas características de la tipografía establecida con anterioridad mediante las propiedades requeridas. Conozcamos algunas de dichas propiedades opcionales.
font-stretch
La propiedad font-stretch nos permite especificar como se alarga el texto, es decir la distancia entre letras y el valor predeterminado es el normal, no altera el texto, sin embargo podemos entre los valores que podemos elegir mencionamos los siguientes:
- Normal:
normal - Condensado:
condensed - ultra-condensado:
ultra-condensed - extra-condensada:
extra-condensed - semi-condensado:
semi-condensed - expandido:
expanded - semi-expandido:
semi-expanded - extra-expandida:
extra-expanded - ultra-expandido:
ultra-expanded
font-weight
La propiedad font-weight es bastante conocida, pues nos permite definir el peso de la fuente, sus valores pueden ser normal, bold y números que van del 100 al 900. El valor por defecto es normal, este no afecta al texto.
Un valor de bold hace que el texto se vuelva en negrita y los valores numéricos son proporcionales. Un valor de 100 crea un texto delgado, a medida que va creciendo 900 es el texto más grueso. Valores intermedio crear efectos proporcionales.
Font-style
La propiedad font-style es otra bastante conocida, nos permite definir un estilo, el valor por defecto que toma es el normal, podemos elegir entre itálico y oblicuo, estos harán que el texto adquiera una ligera y sutil inclinación.
- Normal:
normal - itálico:
italic - oblicuo:
oblique
unicode-range
Esta es una propiedad opcional que sirve para establecer el rango específico de caracteres que puede ser usada por la fuente establecida, definir esta propiedad hará que ciertos caracteres estén disponibles cuando sea necesario en la página. Si dentro del contenido existe algún carácter dentro del rango establecido, entonces la fuente se descarga, en caso contrario, es decir si en el contenido no se emplea algún carácter del rango establecido, entonces la fuente no se descarga innecesariamente.
Los valores que puede tomar es una U seguido del signo + y seguido de valores hexadecimales Su valor por defecto es «U + FFFF 0-10«
Ejemplos de fuentes personalizadas con CSS
<p class="sinfuente">Párrafo con tipo de letra por defecto y de 27px.</p>
<p class="confuente">Párrafo de fuente personalizada por @font-face de 27px.</p>
<style>
@font-face {
font-family: 'Goldman';
src: url(https://fonts.gstatic.com/s/goldman/v1/pe0uMIWbN4JFplR2HDVyBw.woff2) format('woff2');
font-style: normal;
font-weight: 400;
}
.sinfuente {font-size:27px;}
.confuente {
font-family:Goldman;
font-size:27px;
}
</style>
Otro ejemplo
<p class="sinfuente">Párrafo con tipo de letra por defecto y de 27px.</p>
<p class="confuente">Párrafo de fuente personalizada por @font-face de 50px.</p>
<style>
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: 700;
src: local('Tangerine Regular'), local('Tangerine-Regular'), url(https://fonts.gstatic.com/s/tangerine/v12/IurY6Y5j_oScZZow4VOxCZZM.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.sinfuente {font-size:27px;}
.confuente {
font-family:Tangerine;
font-size:50px;
}
</style>@font-face google fonts
En los ejemplos anteriores hemos utilizado las fuentes de Google fonts, puedes acceder a su sitio web y descargar las fuentes que deseas aplicar en tu proyecto.
[popup_anything id=»5821″]