Fonts (fuentes) CSS

La propiedad font se utiliza para definir el tipo de fuente, negrita, tamaño, y estilo de texto.

La elección de una tipografía adecuada es muy importante para diseñar una pagina del web.


font-family

La propiedad font-family se utiliza para establecer el tipo de fuente.

La propiedad font-family puede contener varioes nombres de fuentes como un sistema alternativo en caso que el web no admite la primera fuente, la segunda fuente es la fuente siguiente.

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
h4 {  
 font-family: Arial, Helvetica, sans-serif;    
} 
h5 {  
 font-family: 'Times New Roman', Times, serif;    
} 
</style> 
</head>
        
<body>
 <h4>Un párrafo usando Arial </h4>
 <h5>Un párrafo usando Times New Roman </h5>
</body>
</html>
Resultado:

Un párrafo usando Arial

Un párrafo usando Times New Roman

font-style

La propiedad font-style se usa para definir 3 estilos de fuente

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {  
 font-style: normal;    
} 
p.italic {  
 font-style: italic;    
} 
p.oblique {  
 font-style: oblique;    
} 
</style> 
</head>
        
<body>
 <p class="normal">Un párrafo usando texto normal</p>
 <p class="italic">Un párrafo usando texto italico</p>
 <p class="oblique">Un párrafo usando texto oblique</p>
</body>
</html>
Resultado:

Un párrafo usando texto normal

Un párrafo usando texto italico

Un párrafo usando texto oblique


font-size

La propiedad font-size se utiliza para establecer el tamaño de texto.

Es importante controlar el tamaño de un texto, pero no es necesario hacer un <p> al tamaño que un <h1>.

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
h3 {  
 font-size: 50px;    
} 
h4 {  
 font-size: 30px;    
} 
</style> 
</head>
        
<body>
 <h3>Titulo 3 con tamaño 50px </h3>
 <h4>Titulo 4 con tamaño 30px </h4>
</body>
</html>
Resultado:

Titulo 3 con tamaño 50px

Titulo 4 con tamaño 30px


font-weight

La propiedad font-weight se utiliza para establecer el peso de fuente.

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {  
 font-weight normal;    
} 
p.negrita {  
 font-weight: bold;    
} 
p.claro {  
 font-weight: 300;    
} 
</style> 
</head>
        
<body>
 <p class="normal">normal</p>
 <p class="negrita">negrita</p>
 <p class="claro">claro</p>
</body>
</html>
Resultado:

Un párrafo normal

Un párrafo negrita

Un párrafo con peso 300 (claro)