Uso de diferentes servicios de fuentes

Ejemplos de uso para combinar fuentes de diferentes orígenes en un mismo documento. Guía rápida.

Desde Google Fonts

En este caso usamos la fuente Bebas para los títulos y la fuente Monserrat para el texto

Para eso, en primer lugar importamos en nuestra hoja de estilos las fuentes que vamos a usar, copiando el código que nos proporciona Google Fonts:


    @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,100;0,400;0,800;1,400&display=swap');
            

Y luego definimos los selectores CSS que necesitemos para dar el formato al documento:


                h1, h2, h3, h4, h5, h6 {
                    font-family: 'Bebas Neue', cursive;
                }
                body {
                    font-family: 'Montserrat', sans-serif;
                }
            

Si necesitamos más reglas las vamos definiendo en el CSS, y las aplicamos en el documento como siempre. Por ejemplo:


                .resaltado {
                    font-family: 'Montserrat', cursive;
                    font-weight: 100;
                    font-size: 22px;
                    line-height: 2;
                }
                

Y el HTML

<p class="resaltado">Este párrafo usa el peso <em>100 de la tipo montserrat</em> para estos caracteres.</p>

Para ver:

Este párrafo usa el peso 100 de la tipo montserrat para estos caracteres.

Uso de fuentes guardadas en nuestro servidor

En este caso necesitamos tener los archivos de fuente en fotmato woff disponibles en algún directorio del servidor. Y a continuación, en nuestro CSS, definir una directiva font-face que haga referencia a esas fuentes. Una vez hecho esto, ya podemos usar esa tipografía en nuestro documento de forma habitual, como lo hacemos con cualquier otra fuente. Ejemplo:


                @font-face {
                    font-family: 'pixel';
                    src: url('fuentes/pixeles.woff2') format('woff2'),
                         url('fuentes/pixeles.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                
                }
                .pixeles {
                    font-family: 'pixel';
                    font-size: 30px;
                    color: green;
                }
                

Y el HTML:

<h3 class="pixeles">Este título usa una fuente propia</h3>

Este título usa una fuente propia

Y seguimos el mismo proceso para usar otra fuente más:


                @font-face {
                    font-family: 'grunge';
                    src: url('fuentes/grunge.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                
                }
                .ruda {
                    font-family: 'grunge';
                    font-size: 40px;
                    color: violet;
                    letter-spacing: 4px;
                    text-shadow: 4px 4px 2px darkslateblue;
                }
                

Y el HTML

<h3 class="ruda">este titular usa otra fuente instalada en nuestro sitio con formato woff</h3>

este titular usa otra fuente instalada en nuestro sitio con formato woff

Uso de iconos

En este caso lo que hacemos es usar las propiedades de texto de CSS para mostrar y modificar imágenes en lugar de mostrar letras. Este tipo de imágenes son vectoriales (no mapas de bits), son dibujos sencillos a los que podemos cambiar su color o tamaño como lo hacemos con el texto del documento.

Del mismo modo que podemos usar fuentes de servicios externos como Google o fuentes alojadas en nuestro servidor, con los iconos podemos usar servicios web, o guardar nuestras fuentes de iconos en nuestros archivos.

Uso del servicio de fontawesome.

En este caso todo lo que tenemos que hacer es enlazar nuestro documento al servicio de FontAwesome, desde el propio <head>, podiendo algo así:


                <script src="https://kit.fontawesome.com/5f5babe17b.js" crossorigin="anonymous"></script>
            

A partir de ahí solo tenemos que añadir la clase CSS con el nombre del icno que queremos usar en nuestro documento. Para ver los iconos disponibles y sus nombres de clase tenemos que consultar la web de fontawesome o usar extensiones disponlibles. Por ejemplo, Visual Studio Code tiene una, o si trabajamos con Wordpress también tenemos un plugin disponible para insertar los iconos.

El elemento que vaya a mostrar el icono puede recibir más clases CSS, aparte de las específicas para cada imagen. En nuestro ejemplo vamos a combinar las clases para mostrar dos iconos distinos, con una clase propia, que vamos a llamar iconos, que va a dar el formato adicional a las imágenes.


                <span class="fas fa-envelope iconos"></span>
                <span class="fas fa-address-book iconos"></span>
                

Junto con el CSS

.iconos { font-size: 80px; color: lime; text-shadow: 5px 5px 0 darkgreen; }

Iconos desde nuestros archivos

En este caso,procedemos como con las fuentes guardadas en nuestro directorio. Primero nos aseguramos de tener el archivo woff de la fuente disponible, y luego creamos una directiva font-face para usar ese archivo. Luego definimos las clases para cada icono haciendo referencia al contenido de la fuente para cada icono. Esta información la encontraremos en el servicio desde el que hemos descargado los iconos, en este caso icomoon.. También podemos añadir clases adicionales para acabar de dar formato.

Como en el caso de FontAwesome, aquí se usa el pseudoelemento ::before para mostrar el icono, pero en este caso tenemos que indicarlo nosotros explícitamente en el CSS.


                @font-face {
                    font-family: 'icomoon';
                    src: url('fuentes/icomoon.woff?xzr74') format('woff');
                    font-weight: normal;
                    font-style: normal;
                  }
                  
                  .navegacion::before {
                    font-family: 'icomoon';
                    margin-right: 1rem;
                  }
                  .icono-inicio:before {
                    content: "\e900";
                  }
                  .icono-carro:before {
                    content: "\e93a";
                  }
                  .icono-telf:before {
                      content: "\e942";
                  }
                  .icono-sobre:before {
                    content: "\e945";
                  }
                  .icono-mapa:before {
                    content: "\e947";
                  }
                  .icono-avion:before {
                    content: "\e9af";
                  }
                  .navegacion {
                    font-size: 2rem;
                    margin: 10px;
                    color: wheat;
                    list-style: none;
                    text-shadow: 1px 1px 1px maroon;
                }
                .navegacion a {
                    text-decoration: none;
                    color: cornsilk;
                    font-family: 'Bebas Neue', sans-serif;
                }
                

Y el HTML

<ul> <li class="navegacion icono-inicio"><a href="#">Inicio</a></li> <li class="navegacion icono-carro"><a href="#">Carrito</a></li> <li class="navegacion icono-telf"><a href="#">Llama</a></li> <li class="navegacion icono-sobre"><a href="#">Escribe</a></li> <li class="navegacion icono-mapa"><a href="#">Mapa</a></li> <li class="navegacion icono-avion"><a href="#">Vuela</a></li>