Blog
Cambiar la fuente de la letra (texto) HTML con CSS
Las fuentes de letras que se utilice en un sitio web desarrollado con HTML y CSS pueden determinar que tan atractiva se ve, aunque algunos desestimen completamente su uso y se queden con los tipos que vienen por defecto.
En este tutorial te vamos a explicar cómo cambiar de fuente (font) con CSS, para que puedas desarrollar un sitio web moderno e impactante en una primera instancia. Podremos comprobar que unas pocas lineas de código CSS se podrá modificar el tipo de letra de todo el cuerpo HTML.
Ejemplo de cambio de fuente en un texto HTML con CSS
Para comprender mejor cómo realizar un cambio de fuente o tipografía, a continuación te proporcionaremos un breve ejemplos de código. El mismo está completo y se encuentra en HTML y CSS.
<html> <head> <title>Cambiar la fuente de la letra al HTML con CSS</title> <style> .texto { font-family: Verdana; } </style> </head> <body> <div class="texto">Texto de prueba</div> </body> </html>
En el ejemplo anterior se puede apreciar que con el atributo CSS font-family se modifica la tipografía del texto que está dentro de una etiqueta div de clase texto.
La propiedad font-family acepta varias fuentes, las cuales vienen incorporadas por defecto. A continuación te dejamos algunas fuentes adicionales que se pueden utilizar libremente en cualquier sitio web.
Family Genérico | Font family | Descripción |
---|---|---|
Serif | Times New Roman Georgia |
Las fuentes Serif tienen pequeñas líneas en los extremos de algunos caracteres. |
Sans-serif | Arial Verdana |
“Sans” significa sin – estas fuentes no tienen líneas en los extremos de los caracteres |
Monospace | Courier New Lucida Console |
Todos los caracteres monoespacios tienen el mismo ancho. |
Utilizar fuentes (fonts) de Google
Google ofrece gratuitamente y libremente una gran variedad del fuentes para que puedas utilizar en tus proyectos. Las misma fuentes se pueden ver en https://fonts.google.com. Para utilizar alguna de sus fuentes solamente es necesario importarla dentro del HTML. A continuación te dejaremos un breve ejemplo de cómo hacerlo, reutilizando el código anterior.
<html> <head> <title>Cambiar la fuente de la letra al HTML con CSS usando las fuentes de Google</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"> <style> .texto { font-family: 'Tangerine', serif; } </style> </head> <body> <div class="texto">Texto de prueba</div> </body> </html>
Eso es lo básico que hay que saber para poder modificar o cambiar las fuentes de los texto en HTML con CSS. En caso de que tengan una duda pueden dejar un comentario al final del tutorial.
Muy bueno brothers
Me sirvio! me gustaria que expliques como hacer los saltos de texto y cambiar el tamaño de tipografia y demas.
Gracias y saludos.
Muy buena documentación
para saltar a otra línea usa el comando antes de escribir esa línea y se te pondrá debajo
alguien sabe como invertir un simbolo tengo que hacer una imagen para una carta pero que un palo este de un lado y el otro palo invertido como en los naipes