La fuente es uno de los elementos m s importantes del dise o de una p gina web que puede afectar en gran medida la forma en que los visitantes perciben el contenido. Por defecto, los navegadores establecen sus propias Fuentes para Mostrar el texto, lo que puede dar lugar a resultados no deseados. Sin embargo, con la ayuda de HTML y CSS, puede establecer f cilmente una fuente en toda la p gina.
Para empezar, debe elegir la fuente adecuada. Es importante recordar que no todas las Fuentes son adecuadas para su uso en p ginas web, ya que pueden tener licencia o no ser compatibles con todos los navegadores. Se recomienda elegir Fuentes de colecciones abiertas y gratuitas, como Google Fonts o Adobe Fonts.
Despu s de seleccionar la fuente, es necesario a adirlo a la p gina. Esto se puede hacer con la etiqueta HTML "link" que apunta al archivo de fuente. Para hacer esto, es suficiente agregar el siguiente c digo a la secci n "head" de su p gina web:
El ejemplo anterior utiliza la fuente Roboto de Google Fonts. Puede reemplazar la referencia con otra fuente o especificar varias Fuentes separ ndolas con comas. Especifique el peso de la fuente (por ejemplo, 400 para normal, 700 para negrita) y agregue el atributo "display=swap" para que el navegador muestre el texto inmediatamente con la fuente seleccionada, incluso si el archivo de fuente a n no se ha cargado.
- Paso 1: Importar fuente a archivo HTML
- Descubre el nombre de la fuente
- Paso 2: Crea un estilo CSS
- Crea un nuevo archivo CSS
- Paso 3: conecte el archivo CSS
- A adir un enlace a un archivo CSS en HTML
Paso 1: Importar fuente a archivo HTML
Para empezar, seleccione la fuente que desee o desc rguela desde su computadora. Las Fuentes generalmente se presentan en formatos .ttf, .otf o .woff. Una vez que haya seleccionado o descargado el archivo de fuente, col quelo en la misma carpeta donde se encuentra su archivo HTML.
Para importar una fuente a un archivo HTML, agregue el siguiente c digo a la secci n de su documento:
| C digo | Descripci n |
|---|---|
| Importa un archivo de fuente externo |
En lugar de " fuente.formato " en el c digo anterior, especifique la ruta del archivo de fuente relativa a su archivo HTML. Por ejemplo, si el archivo de fuente se llama " myfont.ttf " y est en la misma carpeta que su archivo HTML, entonces la ruta se ver as :
Una vez que haya agregado este c digo a una secci n de su archivo HTML, la fuente se importar y estar lista para usar en toda la p gina. Ahora puede pasar al siguiente paso y establecer esta fuente para los elementos de texto de su p gina.
Descubre el nombre de la fuente
Antes de instalar una fuente en toda la p gina HTML, debe averiguar el nombre de la fuente seleccionada. Esto se puede hacer de varias maneras:
1. Use propiedades CSS. Abra el archivo CSS que est conectado a su p gina HTML. Por lo general, especifica varias propiedades de estilo, incluidas las Fuentes. Busque la secci n responsable de las Fuentes y observe el nombre de la fuente especificada:
p {font-family: Arial, sans-serif;
}
En el ejemplo dado, el nombre de la fuente es Arial.
2. Utilice diferentes herramientas de desarrollo. La mayor a de los navegadores modernos tienen herramientas de desarrollo integradas que le permiten analizar los elementos de una p gina web y sus propiedades, incluidas las Fuentes. Abra las herramientas de desarrollo en un navegador, seleccione el elemento deseado en la p gina y busque la propiedad "font-family" en la secci n de estilos:
Texto de ejemplo
En este caso, el nombre de la fuente es Arial.
3. P ngase en contacto con el desarrollador o propietario de la fuente. Si est utilizando una fuente no est ndar que no se especifica en CSS o est disponible en las herramientas de desarrollo, puede ponerse en contacto con el desarrollador de la fuente o su propietario. Podr n proporcionarle el nombre exacto de la fuente que se puede usar en el c digo CSS.
Una vez que haya aprendido el nombre de la fuente, puede pasar al siguiente paso: configurarlo en toda la p gina HTML.
Paso 2: Crea un estilo CSS
Despu s de crear el archivo HTML, deber crear un estilo CSS para personalizar la fuente en toda la p gina.
1. Cree un nuevo archivo en la misma carpeta donde se encuentra su archivo HTML. Ll malo style.css.
p {
font-family: 'Nombre_rift', sans-serif;
}
Reemplace Nombre_shrift con el nombre de la fuente que desea usar en su p gina. Tambi n puede especificar otras propiedades de fuente, como Tama o, negrita y color.
4. Guarde el archivo style.css.
Crea un nuevo archivo CSS
- Para instalar una fuente en toda la p gina HTML, debe crear un nuevo archivo CSS. En este archivo, puede definir reglas de estilo para diferentes elementos HTML y especificar la fuente deseada.
- Para crear un nuevo archivo CSS, siga estos pasos::
- Abra un Editor de texto y cree un nuevo archivo.
Guarde el archivo con la extensi n .css (por ejemplo, styles.css).
Abra el archivo creado e ingrese el siguiente c digo:
body {font-family: 'Nombre_rift', sans-serif;
}
En lugar de' Nombre_rift', escriba el nombre de la fuente deseada. Si desea utilizar varias Fuentes en orden de preferencia, enum relas separadas por comas.
Guarde el archivo CSS y con ctelo a la p gina HTML agregando la siguiente l nea de c digo dentro de la etiqueta HTML de su p gina:
Ahora, todos los elementos HTML en su p gina se mostrar n utilizando la fuente que especifique.
Medida 3: Conecte el archivo CSS
Para instalar una fuente en toda la p gina HTML, es necesario conectar el archivo CSS.
Crea un nuevo archivo con la extensi n .css y ll malo, por ejemplo, "styles.css . Abra este archivo en cualquier Editor de texto.
En el archivo styles.css agregue el siguiente c digo:
body {
- font-family: 'Nombre de fuente', sans-serif;
- }
- Aqu ,' nombre de fuente ' es el nombre de la fuente que desea usar en su p gina. Reempl celo con un nombre de fuente espec fico. Si usted no sabe c mo nombrar la fuente, puede utilizar nombres comunes como Arial, Helvetica, Times New Roman, etc. No olvide agregar una coma y especificar una categor a de fuente com n al final de la l nea. Por ejemplo, sans-serif para Fuentes sans serif o serif para Fuentes serif.
- Para conectar un archivo CSS a una p gina HTML, agregue el siguiente c digo dentro de la etiqueta head:
- Abra el archivo en un Editor de texto y defina el estilo de la fuente utilizando las propiedades CSS apropiadas. Por ejemplo: