La fuente es un elemento de dise o importante que puede afectar significativamente la percepci n general de su sitio web. El tipo de fuente predeterminado determina qu fuente se usar para el texto en su sitio sin especificar expl citamente en CSS. Si desea cambiar el tipo de fuente para todo su sitio, deber realizar algunos ajustes.
Cambiar el tipo de fuente predeterminado en su sitio es bastante simple, pero requiere un poco de conocimiento de CSS. Tiene varias formas de hacerlo, incluida la configuraci n a nivel de elemento, clase o archivo de estilo completo. Es importante tener en cuenta que cambiar el tipo de fuente puede afectar la apariencia general de su sitio y la facilidad de lectura del texto.
Antes de comenzar a cambiar el tipo de fuente, es una buena idea elegir la fuente adecuada para su sitio web. Tenga en cuenta que los diferentes tipos de fuente se perciben de manera diferente y pueden no ser adecuados para todos los contextos.
Una de las formas m s f ciles de cambiar el tipo de fuente predeterminado en su sitio es usar la propiedad CSS font family. Puede aplicarlo a la etiqueta del cuerpo para cambiar el tipo de fuente para todos los elementos de su sitio. Por ejemplo, si desea utilizar la fuente "Arial", puede insertar el siguiente c digo en su archivo de estilo:
body {
font-family: Arial, sans-serif;
}
- Definici n del tipo de fuente actual
- Elegir un nuevo tipo de fuente
- Conexi n de fuente con CDN
- Conectar una fuente con un archivo local
- Cambiar el tipo de fuente a trav s de CSS
- Comprobaci n en diferentes navegadores y dispositivos
Definici n del tipo de fuente actual
. Esta propiedad le permite especificar una lista de Fuentes separadas por comas que el navegador usar en orden de preferencia. Si la primera fuente no est disponible, el navegador intentar usar la siguiente en la lista.
Puede utilizar las herramientas de desarrollo del navegador para determinar el tipo de fuente actual. Abra la p gina en un navegador, haga clic con el bot n derecho en el texto y seleccione Examinar elemento o Examinar elemento (seg n el navegador seleccionado). Se abrir n las herramientas de desarrollador con el elemento seleccionado.
. La lista de Fuentes se especificar en el valor de la propiedad separada por comas.
para insertar texto con el tipo de fuente actual antes del elemento seleccionado. Aqu hay un c digo de ejemplo:
::before {content: "tipo de fuente Actual: ";
font-family: inherit;
}
Agregue este c digo al bloque CSS de reglas para el elemento seleccionado. Se insertar el texto "tipo De fuente actual:" delante de l, detr s del cual se mostrar el tipo de fuente actual.
Elegir un nuevo tipo de fuente
Puede utilizar diferentes enfoques para seleccionar una nueva fuente:
1. Fuentes web integradas:
Las Fuentes web son Fuentes especiales que se descargan de un servidor web y se pueden usar en su sitio. Hay muchas Fuentes web gratuitas y de pago que puedes usar. Algunos servicios populares de Fuentes web incluyen Google Fonts, Adobe Fonts y Font Squirrel.
Para usar una fuente web incrustada en una p gina web, deber agregar el c digo apropiado para conectar la fuente a trav s de CSS.
2. Fuentes del sistema:
Los navegadores web predeterminados tienen conjuntos de Fuentes del sistema preinstalados que est n disponibles para su uso en su sitio. Puede elegir una de estas Fuentes para que su sitio sea consistente con otros sitios abiertos en las computadoras de los usuarios.
Para utilizar una fuente del sistema, s lo tiene que especificar su nombre en la propiedad CSS font-family.
3. Fuentes-descargas:
Otra opci n para elegir una nueva fuente son las descargas de Fuentes. Son archivos de fuente que se descargan de su servidor web y se utilizan en su sitio. Puede descargar Fuentes de varios recursos y subirlas a su servidor.
Para usar la fuente descargada, deber agregar el c digo apropiado al CSS especificando la ruta del archivo de fuente.
Si desea utilizar una fuente que no est en su computadora, puede conectarla con Content Delivery Network (CDN).
CDN es un sistema de servidor distribuido que almacena y proporciona archivos, como Fuentes, de diferentes partes del mundo. Esto le permite a su sitio cargar r pidamente las Fuentes sin tener que almacenarlas en su propio servidor.
Para conectar una fuente con un CDN, debe insertar un c digo CSS especial en su archivo de estilo.
Aqu hay un c digo de ejemplo que se puede usar para conectar una fuente Montserrat con Google Fonts CDN:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
body {
En este ejemplo, usamos la regla @import para conectar estilos de fuente con CDN. Luego aplicamos la fuente al elemento body con la propiedad font-family.
Tenga en cuenta que despu s de la URL de CDN, especificamos par metros de fuente espec ficos, como el peso (400 y 700). En las opciones, puede especificar otros ajustes de fuente, como la inclinaci n y el Tama o.
Conectar una fuente con un archivo local
Es posible que deba usar una fuente espec fica en su sitio web que no sea proporcionada por el conjunto de Fuentes est ndar. En este caso, puede conectar la fuente con un archivo local.
Para comenzar, debe descargar el archivo de fuente que desea usar en su sitio. A menudo, los archivos de fuente tienen una extensi n .ttf (TrueType Font) o .otf (OpenType Font). Despu s de descargar el archivo de fuente, col quelo en la carpeta de su proyecto, generalmente elija una carpeta llamada "Fuentes" o "Fuentes".
A continuaci n, debe establecer una regla CSS para usar su archivo de fuente local. Puede usar la regla @font-face para hacer esto. Aqu hay un c digo de ejemplo:
@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont.ttf') format('truetype');
}
En este ejemplo, usamos la regla @font-face para definir una fuente llamada "MyFont" y especificar la ruta del archivo de fuente "fonts / MyFont.ttf . Tambi n especificamos el formato del archivo de fuente con el atributo format y el valor 'truetype'.
Aseg rese de que la ruta del archivo de fuente sea correcta, incluida la ortograf a correcta de la carpeta y las extensiones de archivo. Si la fuente est en otro lugar, aseg rese de especificar la ruta correcta.
Despu s de eso, puede usar su nueva fuente especificando su nombre en la propiedad font-family en otras reglas CSS. Por ejemplo:
Safari