Original article: How to Change Font with HTML
Anteriormente, cuando se usaba HTML4, existía la etiqueta <font> que se podía usar para cambiar el tamaño, la tipografía y el color de un texto.
Pero con la aparición de HTML5, la etiqueta <font> fue deprecada. Actualmente, si se quiere modificar cualquier cosa relacionado con la fuente, hay que hacerlo con CSS.
En este artículo, te enseñaré como cambiar el tamaño de la fuente, el font-weight (grosor de la fuente), el estilo (font-style) y la familia (font-family) con CSS.
Cómo cambiar el tamaño del texto con la propiedad font-size.
La propiedad font size del texto representa cuán grande es texto es.
Para cambiar el tamaño del texto, se debe usar la propiedad font-size y después especificar el valor en pixeles px, rem, o em.
Esto se puede hacer usando CSS dentro de la línea de código (elemento HTML):
<h1 style="font-size: 4rem">freeCodeCamp</h1>
O con CSS interno o embebido dentro del mismo archivo o documento HTML:
<style>
h1 {
font-size: 4rem;
}
</style>
Y también usando CSS externo:
h1 {
font-size: 4rem;
}
Para deshacerse del fondo blanco que viene por defecto y centrar el texto de forma horizontal y vertical, escribí el siguiente código CSS:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f1f1f1;
}
En el navegador se ve como se muestra abajo:
Como cambiar la propiedad font-weight del texto
Font-weight es la propiedad que nos permite que un texto especifico sea más grueso o fino.
Se puede usar font-weight para cambiar cuan fina o gruesa queremos la fuente al darle un valor como normal, lighter, bold, or bolder. También se puede usar valores como 100, 200, 500 y similares.
Como con el tamaño de la fuente, también se puede cambiar la propiedad font-weight usando CSS dentro del elemento HTML, con CSS embebido en el documento HTML o de manera externa.
<span>
<h1 style="font-weight: lighter">freeCodeCamp Lighter</h1>
<h1 style="font-weight: normal">freeCodeCamp Normal</h1>
<h1 class="bold" style="font-weight: bold">freeCodeCamp Bold</h1>
<h1 style="font-weight: bolder">freeCodeCamp Bolder</h1>
</span>
<style>
.lighter {
font-weight: lighter;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.bolder {
font-weight: bolder;
}
</style>
.lighter {
font-weight: lighter;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.bolder {
font-weight: bolder;
}
Cómo cambiar la propiedad font-style del texto
La propiedad font-style permite variación del estilo y tamaño (typeface) de la fuente de un texto. Los posibles valores para utilizar son: normal, bold, or italic
Para cambiar la propiedad font-style, se pueden usar los valores: normal, oblique, o italic.
normal es el valor predeterminado de la propiedad font-style. No es necesario especificarlo a menos que quieras cambiarlo.
También se puede cambiar la propiedad font style con CSS dentro del elemento HTML, con CSS embebido en el documento HTML o de manera externa (archivo CSS).
<span>
<h1>freeCodeCamp Normal</h1>
<h1 style="font-style: oblique">freeCodeCamp Oblique</h1>
<h1 style="font-style: italic">freeCodeCamp Italic</h1>
</span>
<style>
.oblique {
font-style: oblique;
}
.italic {
font-style: italic;
}
</style>
.oblique {
font-style: oblique;
}
.italic {
font-style: italic;
}
Así se ve el resultado en el navegador:
Cómo cambiar la propiedad font-family de un texto
La propiedad font-family es una colección de fuentes que comparten el mismo diseño y tipografía.
Para cambiar esta propiedad, es necesario usar el atributo CSS font-family.
Es posible hacer estos cambios usando CSS dentro del elemento HTML, con CSS embebido en el documento HTML o de manera externa en un archivo CSS.
El código de abajo muestra como cambiar la propiedad font-family usando CSS dentro del código HTML:
<h1 style="font-family: Verdana, Geneva, Tahoma, sans-serif">
freeCodeCamp
</h1>
You can change the font-family in embedded or internal CSS this way:
```css
<style>
h1 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
</style>
Usando un archivo CSS externo es posible cambiar la propiedad font family de esta manera:
h1 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Para esto, debes asegurarte de que el archivo CSS externo este vinculado al archivo HTML. Si no lo está, esto no funcionará.
La fuente Verdana se ve de esta manera el navegador Google Chrome:
Seguro notaste que hay otras fuentes dentro del valor asignado a font-family (Geneva, Tahoma, y sans-serif).
Estas son fuentes de respaldo en caso de que Verdana no este instalada en el equipo del usuario.
Si no te gustan las fuentes que vienen instaladas en tu equipo, puedes obtener otras de Google Fonts.
Busca tu favorita y copia el enlace a la fuente dentro de la sección <head> de tu documento HTML para que la puedas usar en tu hoja de estilo CSS.
En este caso, yo usé la fuente Roboto de esta manera:
h1 {
font-family: Roboto, sans-serif;
}
Y así es como se ve en el navegador:
Conclusión
Este artículo te guía en las distintas maneras para modificar el tamaño y otras propiedades de las fuentes (font-size, font-weight, font-style y font-family) usando CSS dentro del código HTML, con CSS embebido en el mismo archivo HTML o en un archivo externo.
Quizás te preguntes cuál es la mejor manera de usar el código CSS: dentro de la línea de código HTML, con CSS embebido en el mismo documento HTML, o en un archivo CSS externo.
Si estás trabajando en un proyecto pequeño, puedes usar CSS embebido dentro del mismo documento HTML, pero si estás trabajando en un proyecto grande o en equipo, no deberías usar CSS embebido.
Esto es porque es una buena práctica tener el código CSS separado del código HTML.
Por otro lado, CSS dentro de los elementos HTML no se recomienda porque no facilita la lectura del código HTML.
Otro aspecto importante que considerar es que el CSS dentro de los elementos HTML afecta negativamente el SEO (optimización de búsqueda) del sitio web.
¡Gracias por leer!