Diseños web únicos con @fontface
@font-face permite especificar fuentes personalizadas para visualizar en su página web alojándolas en su propio servidor. Al permitir al diseñador o desarrollador disponer de sus propias fuentes, @font-face elimina la carga innecesaria de fuentes que no se van a usar en el navegador.
Gracias a esta técnica, herramienta, regla o cómo lo queramos llamar, con @font-face podemos llegar a tener páginas web únicas utilizando fuentes o tipografías que no se pueden encontrar en webs como Google Font.
Acelera la carga de tu web con @font-face
Al tener nuestras fuentes en nuestro servidor, no dependemos de cargarlas de servidores externos como es el caso de Google Font. Esto hace que la carga de la web sea más rápida, ya que se eliminan consultas externas y se evita tener que cargar archivos JavaScript en nuestra página.
¿Cómo utilizar @font-face?
Después de explicar un poco cómo y porqué es bueno utilizar esta regla que nos brinda CSS, pasamos a explicar cómo utilizarla para cargar nuestras fuentes.
@font-face {
font-family: nombre-de-la-fuente;
src: url("dirección url donde se encuentra") ;
}
Así se utilizaría la regla @font-face para que nuestro navegador cargue nuestra fuente. La colocaremos en nuestro archivo donde tengamos los estilos, por ejemplo style.css, siempre al principio del documento y una regla por cada fuente que queremos cargar.
Subir fuente al servidor
Antes de esto, tendríamos que subir la fuente que deseamos utilizar en nuestro servidor e indicar en el campo url donde se encuentra.
@font-face {
font-family: mifuente;
src: url(".../fuentes/mifuente.ttf") ;
font-style: normal;
font-weight: normal;
}
Con este ejemplo estaríamos indicando a nuestro navegador mediante la regla @font-face de CSS3 que hay una fuente en una url específica.
Utiliza la fuente con font-family
Para usar la fuente en nuestra web, tenemos que dar estilos a etiquetas HTML con CSS y colocar el nombre de la fuente en el campo font-family.
h1 {
font-family: mifuente;
font-style: normal;
font-weight: bold;
}
Con esta regla CSS indicamos que todos los h1 de nuestra página se muestren con la fuente que hemos añadido con @font-face.
Convierte tus fuentes en Fontsquirrel
Aquí os dejo unos enlaces a un generador de fuentes de fontsquirrel y a diferentes fuentes de iconos para insertarlos en nuestra web.
Preguntas y respuestas
@font-face es una regla CSS que permite cargar e incorporar fuentes personalizadas en una página web. Con @font-face, se puede definir una fuente personalizada mediante la especificación de su origen y proporcionando un nombre para utilizarla en el CSS. Esto permite que los navegadores descarguen la fuente y la muestren correctamente en la página web.
Para utilizar @font-face en CSS, se deben seguir los siguientes pasos:
- Descargar la fuente personalizada en diferentes formatos (TTF, EOT, WOFF, etc.).
- Definir la regla @font-face en el CSS, especificando la ruta y el nombre de la fuente, así como los formatos compatibles.
- Aplicar la fuente personalizada a los elementos deseados utilizando la propiedad font-family en el CSS.
Al utilizar @font-face, es importante considerar lo siguiente:
- Verificar la compatibilidad de los diferentes formatos de fuente con los navegadores y dispositivos.
- Asegurarse de tener los derechos de uso de la fuente personalizada.
- Optimizar el tamaño de los archivos de fuente para una carga rápida de la página.
- Proporcionar fuentes de respaldo en caso de que la fuente personalizada no pueda ser cargada.
