Cómo cambiar la fuente en HTML

Para personalizar completamente el aspecto de su sitio web, no puede olvidarse de la tipografía: cómo organizar y diseñar el texto. Dependiendo de su diseño, nicho de negocio y audiencia, es posible que desee cambiar el tipo de letra, el tamaño o el color de su fuente.

Por ejemplo, si prefiere un gris oscuro sobre el negro en su combinación de colores, querrá cambiar el color de fuente predeterminado de su texto. Si está en los medios, puede optar por una fuente sans serif, que se considera la tipografía más fácil de leer. Pero si está en el campo creativo, entonces puede optar por un tipo de letra decorativo como morris troya. Estas son solo algunas de las razones por las que es posible que desee diseñar la fuente en su sitio web.

Veamos cómo puede cambiar la fuente en su sitio con solo un poco de código. Cubriremos:

• cómo cambiar el tipo de fuente en HTML
• cómo cambiar el tamaño de fuente en HTML
  • cómo cambiar el tamaño de fuente dentro del mismo párrafo
• cómo cambiar el color de la fuente en HTML
• cómo cambiar la fuente en un div en HTML

Así es como usas CSS en línea. CSS en línea significa que su HTML y CSS se colocarán juntos en la sección del cuerpo de su documento HTML. Entonces, técnicamente, cambiará la fuente «en HTML».

Solía ​​​​simplemente poder usar la etiqueta de fuente para cambiar el estilo del texto en HTML. Digamos que desea cambiar su fuente a Arial, tamaño 20px y un bonito color naranja. Habría escrito la siguiente línea de HTML:

 
<font face="Arial" size="20px" color="#FF7A59">Your text here.</font>

Sin embargo, esta etiqueta de fuente quedó obsoleta en 1998, por lo que no funciona con la última versión de HTML, HTML5. Ha sido reemplazado por una forma mucho más efectiva de cambiar la apariencia del texto: a saber, CSS. El formato de texto CSS es una alternativa más ligera y flexible a la etiqueta de fuente HTML, y no es difícil de aprender.

Reescribamos el ejemplo anterior usando CSS para cambiar el tipo de fuente de un párrafo. Es importante tener en cuenta que estoy usando CodePen, que usa Times New Roman como tipo de letra predeterminado. Agregaré el atributo de estilo al elemento del primer párrafo, lo que significa que solo se aplicará estilo a este párrafo. El resto de los párrafos y títulos de la página permanecerán en Times New Roman.

Aquí está el HTML con CSS en línea:

 

 
   <h2>How to Change Font Type in HTML [Inline CSS]</h2>
<p style="font-family: Arial">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</p>
<h3>The Explanation</h3>
<p>Since I’m using the CodePen Editor, the default typeface is Times New Roman. That means changing the typeface of a paragraph will require me to use a style attribute that contains the CSS font-family property set to "Arial." The other elements on the page are not targeted by inline CSS and therefore remain Times New Roman.
</p>

Aquí está el resultado:

ver la pluma oNBMjeB de Christina Perricone (@hubspot) en CódigoPen.

Si bien CSS en línea funciona perfectamente para cambiar un solo elemento en la página, se recomiendan otros estilos de CSS en lugar de CSS en línea. Por ejemplo, el CSS interno se puede colocar en la sección de encabezado del documento HTML para diseñar varios elementos en la página.

Por ejemplo, digamos que quiero cambiar la fuente de cada elemento de párrafo a Arial. Entonces podría usar un selector de CSS para apuntar a todos los párrafos y colocarlo dentro de la sección de encabezado de la página.

Aquí está el CSS:

 

 
   p...