@font-face es una regla CSS que permite mostrar fuentes en las páginas web de Internet. Antes de que existiera esta regla, los webmasters podían utilizar en sus sitios un conjunto limitado de fuentes, que son las más comunes y están instaladas en los ordenadores de los usuarios. Con la llegada de @font-face, cualquier fuente específica puede adjuntarse fácilmente a un sitio web.
Si ha descargado la fuente en nuestro sitio, en el archivo con las fuentes encontrará el código CSS listo que deberá copiar y colocar en el documento CSS adjunto al proyecto.
Instalación paso a paso
1. Seleccione la fuente que desee y haga clic en "descargar para sitio web".
2. En la raíz de su sitio cree una carpeta fonts, y copie las fuentes descargadas.
Abra su documento CSS y copie en él el contenido del archivo de texto.
4. Asegúrese de que la ruta a la carpeta de fuentes está escrita correctamente. Dependiendo de la posición de la carpeta donde se encuentran las fuentes, la ruta puede contener uno o más puntos.
5. Hecho. Copie la propiedad con el nombre de la familia y péguela en el selector para el que está escribiendo los estilos.
¿Y si ya he descargado la fuente en otro sitio y quiero conectarla?
En este caso, tienes que encontrar un conversor de fuentes en Internet y convertir tu fuente ttf (u otf) a los formatos adecuados, es decir, eot, svg, woff y woff2. Así te asegurarás de que la fuente se muestre y funcione correctamente en todos los navegadores, así como en dispositivos móviles.
A continuación, deberá deletrear usted mismo la regla @font-face, respetando su sintaxis.
La sintaxis de @font-face
La sintaxis de la regla puede dividirse a grandes rasgos en propiedades básicas y propiedades avanzadas.
Basic:
- font-family - especifica el nombre de la fuente.
- src - indica la ruta de la fuente. Puede ser la URL de la fuente ubicada en el servidor de su sitio web, URL de fuentes ubicadas en el servidor de otra persona (como Google Fonts), o simplemente el nombre de la fuente ubicada en el ordenador del usuario (Helvetica New Bold, Tahoma, Georgia, etc.) .
Ampliado:
- font-display - determina cómo aparecerá la fuente, dependiendo de si se ha descargado y está lista para su uso.
- font-stretch - permite ajustar la anchura del texto.
- font-style - determina si la fuente es lisa, cursiva o inclinada (estas dos últimas no son iguales).
- font-weight - Ajusta la saturación de la fuente, en una escala de 100 a 900 (100-pequeño, 900-pequeño).
- font-variant - determina cómo deben presentarse las letras minúsculas: déjalas sin modificar o hazlas todas minúsculas (mayúsculas).
- font-feature-settings - le permite gestionar las características tipográficas avanzadas de las fuentes OpenType.
- font-variations-settings - permite un control de bajo nivel sobre las variaciones de fuentes Open Type y TrueType especificando nombres de eje de cuatro letras.
- unicode-range - especifica la gama de códigos Unicode (glifos) que se utilizarán en la fuente.
Conectar una fuente a su sitio con Google Fonts
Utilizar Google Fonts es la forma más fácil de conectar una fuente a su sitio web. Vaya a su sitio web, busque la fuente que desee, elija las fuentes adecuadas para instalar y copie el código.
El código copiado debe colocarse en el cuerpo de la etiqueta head, en su página html.
Desventaja de este método es que si durante el maquillaje del sitio que ha perdido Internet - fuentes no se mostrará y se sustituye por la norma, porque los archivos no se encuentran en el equipo local, y en los servidores de Google. Además, lo más probable es que cuando se llega al cliente para una presentación de diseño (o simplemente para la conformación) y él no tiene Wi-Fi, el problema va a suceder de nuevo.
