Esta página contiene instrucciones sobre cómo cambiar una fuente y su color en una página web. Con la introducción de HTML5, la forma correcta de configurar las fuentes de la página web es usar hojas de estilo en cascada. El método anterior, de usar un atributo de estilo en línea o una etiqueta de fuente, está en desuso y ya no se debe usar.
Nota
Aunque los métodos obsoletos aún pueden mostrarse correctamente en los navegadores de Internet modernos, ya no se garantiza que lo hagan. Para crear páginas web que se muestren correctamente para el número máximo de usuarios, use los métodos CSS descritos en esta página.
Nota
Si está buscando ayuda para personalizar la apariencia de la fuente en un documento de Microsoft Word, vea cómo cambiar el color, tamaño o tipo de letra en Word.
Usar CSS para una sola aplicación
Si planea cambiar la fuente y su color solo una vez en una página web, configure sus atributos en la etiqueta del elemento. Usando el atributo de estilo, puede especificar la cara y el color de la fuente con font-family, color y el tamaño de fuente con font-size, como se muestra en el siguiente ejemplo.
Código de ejemplo
Este texto tiene la fuente Courier, es Azul y 20px.
Resultado
Este texto tiene la fuente Courier, es azul y tiene un tamaño de 20 px.
Usar CSS para una o más páginas
Fuente personalizada para una página
En la parte superior de su página web, puede insertar código entre las pestañas para cambiar la apariencia de su texto en varios elementos. El siguiente cuadro azul contiene un código de ejemplo que, una vez llamado, cambiaría la fuente a Courier y la colorearía de rojo. Como puede ver, hemos definido el nombre de la clase como "personalizado".
.custom {font-family: Courier; color: rojo; tamaño de fuente: 20px; }
Una vez definido, este estilo se puede aplicar a la mayoría de los elementos de su página al adjuntarles la clase "personalizada". El siguiente cuadro muestra dos líneas de código y sus respectivos resultados.
Ejemplo
Toda esta oración es roja y Courier
Solo la palabra test es roja y Courier.
Resultado
Toda esta oración es roja y Courier.
Solo la palabra test es roja y Courier.
Fuente personalizada para muchas páginas.
Importar un archivo CSS externo puede ser muy beneficioso ya que permite a los usuarios cambiar las reglas de varias páginas al mismo tiempo. La siguiente sección muestra un ejemplo para crear un archivo CSS básico que cambia la fuente y su color para la mayoría de los elementos. Este archivo puede cargarse en más de una página web, incluso en un sitio completo.
Usando cualquier editor de texto básico, guardar el siguiente texto como un archivo.css lo preparará para la importación.
@charset "utf-8";
.courier {font-family: Courier; color: # 005CB9; }
Una vez que el texto anterior se coloca en un archivo .css (hemos denominado our basic.css), puede vincularlo desde cualquier otra página utilizando una línea similar al siguiente ejemplo.
Propina
Los usuarios pueden cambiar los atributos de los elementos en una página cambiando el código en el archivo.css importado.
Solución de etiqueta de fuente
Aunque está en desuso, la etiqueta HTML aún se puede usar y puede ser necesario usar con algunos servicios en línea. Cuando utilice la etiqueta FONT, debe incluir el atributo de cara, que describe la fuente que se utilizará. En el siguiente ejemplo, estamos utilizando la fuente Courier y el código de color hexadecimal # 005CB9 , que es azul oscuro.
Código de ejemplo
Un ejemplo de fuente especial.