Fuente y texto CSS

El lenguaje CSS también nos permite personalizar las fuentes de los textos de nuestras páginas web.
Veamos, en esta guía, cómo incorporar una fuente en nuestro proyecto, cuál es la sintaxis a utilizar para asignarla a un selector y cuáles son las propiedades para caracterizar su estilo.

Importar una fuente

Tenemos dos formas de importar un tipo de fuente a nuestro proyecto: la primera, y la más utilizada, es a través de un enlace externo, utilizando bibliotecas como, por ejemplo, Google fonts. 

¿Cómo funcionan las fuentes de Google? Vamos a averiguarlo.

Cuando aterrices en la página principal de fuentes de Google, se te presentará una interfaz muy intuitiva. Puedes elegir tu fuente entre las muchas disponibles, facilitando tu búsqueda también con la ayuda de un sistema de filtros, o, si ya tienes una específica en mente, ve y búscala con la ayuda de la barra de búsqueda. Supongamos que queremos buscar la fuente 'Montserrat'.
En este punto, al seleccionarlo, tal situación se te revelará.

Lo que tendrás que hacer es seleccionar los "pesos" y "versiones" de la fuente que creas que te serán útiles (negrita, regular, cursiva, etc.) y hacer clic en el símbolo "+" para agregarlos a tu selección.
En ese momento, las versiones de fuentes añadidas aparecerán enumeradas en un panel en la parte superior derecha.
Inmediatamente debajo de ese panel, encontrará otro titulado "Use on web". 

Como puedes ver en la imagen, este panel te proporcionará un enlace y una regla CSS.

En el primer cuadro encontrarás el enlace, que deberás copiar y pegar en el encabezado de tu documento.
En el segundo cuadro, sin embargo, encontrarás las reglas CSS precisas (CSS rules) que tendrás que pegar en tu hoja CSS, junto al selector deseado. Muy sencillo, ¿verdad?

Sin embargo, hay otro método que puedes usar para incrustar una fuente en tu diseño.
Imagina tener una fuente que un diseñador gráfico creó específicamente para tu proyecto. Magnífico, ¿no? Claramente, sin embargo, esta fuente, completamente hecha a su medida, no puede estar presente en las fuentes de Google. ¿Cómo hacer?
¿Tienes en mente dejar de usarlo? ¡Parate!

En estos casos podemos utilizar una de las “@ rule”.

Insertaremos la regla "@ font-face" en la hoja CSS, donde especificaremos el nombre de la fuente y la ruta - ruta - para llegar a ella, como en el ejemplo.

@font-face {
  font-family: Miofont;
  src : url(./miofont) 
}

y, posteriormente, podemos aplicar esta familia de fuentes a los selectores deseados.

La sintaxis  

Como ya hemos observado ampliamente, la propiedad 'font-family' nos permite instruir al navegador sobre el tipo de fuente a representar.
Con esto, de hecho, es posible declarar al navegador la fuente a utilizar, dándole como valor el nombre de la fuente insertada entre comillas.
Es posible declarar más de una fuente en la misma propiedad font-family, de modo que si el navegador no soporta la primera fuente indicada, inmediatamente cambiará a la segunda y así sucesivamente.

Si, por el contrario, pretendemos utilizar varias fuentes diferentes en un mismo documento, las declararemos como valores de dos propiedades font-family diferentes y, a continuación, indicaremos al selector de interés cuál utilizar.
Es una buena práctica insertar primero la fuente deseada, seguida, no necesariamente, por una fuente de reemplazo e, inmediatamente después, por una familia de fuentes genérica, como "serif", "sans-serif", "cursiva", etc.

ejemplo:

* {
    font-family: “times new roman” , “times” , “serif”;
}

Las propiedades de estilo de los textos en CSS

Una vez que hayas elegido una fuente, puedes cambiar su estilo con diferentes propiedades. Veámoslos:

• font-style: se utiliza para modificar el estilo de fuente; puede tomar valores como “normal”, “italic”, “oblique”. Por supuesto que funcionará siempre que, por ejemplo, si hemos importado la fuente de fuentes de Google, también hayamos importado esas versiones.
   
• font-weight: sirve para definir el peso de la fuente; los valores aceptados serán “normal”, “bold”, “bolder”, “lighter” o incluso valores numéricos de 100 a 900 (puede tener una mayor comprensión del valor de un peso en las propias fuentes de Google)
   
• font-size: te permite cambiar el tamaño de su fuente; en consecuencia, acepta todos los valores relativos a unidad de medida.

Hay, entonces, varias propiedades útiles para dar formato al texto.

• text-align: sirve para cambiar la alineación del texto; acepta valores como “left”, “right”, “center” e “justify”. Cuando a la propiedad de alineación de texto se le asigna el valor de justificar, la línea se estira para ajustarse a la página.
   
• text-decoration: a pesar de tener diferentes valores, en realidad se utiliza principalmente con respecto al efecto de subrayado de los enlaces. El valor de referencia más concreto es, por tanto, la keyword “none”, que sirve para eliminar el subrayado anterior.
• text-transform: nos permite convertir nuestras letras en mayúsculas o minúsculas; los valores que acepta son “uppercase” para las mayúsculas, “lowercase” para las minúsculas, y “capitalize”para poner en mayúscula la primera letra de cada palabra.
   
• text-indent: nos permite "sangrar" la primera línea de un bloque de texto. ¿Qué es la sangría? Es la inserción de una cierta cantidad de espacio en blanco al principio de una línea de texto, muy útil, por ejemplo, para escribir código limpio y de fácil lectura. Acepta valores de dimensión (píxeles, porcentajes, etc.) tanto en positivo como en negativo.
• text-shadow: sirve para dar una sombra al texto. Tiene ancho horizontal, ancho vertical, radio de desenfoque y valores de color, que deben ingresarse separados por una coma.
  Encontrarás online los text-shadow generator que te ayudará a configurar el código que ya tiene una representación gráfica.
  ejemplo

  .element1 {

  .element1 {
         text-shadow: 2px 2px 9px #FFEE00;
  }

• letter-spacing: es útil para aumentar o reducir el "kerning" o el espacio entre una letra y otra dentro de una palabra; acepta valores px.
   
• word-spacing: similar a la propiedad anterior, sin embargo, regula el espacio entre una palabra y otra.
   
• line-height: ajusta el interlineado del texto, es decir, el espacio que discurre verticalmente entre una línea y otra.