Fuentes, Letras y Tipografías - Bsale-IO/template-docs GitHub Wiki

NO SE RECOMIENDA usar más de 3 Letras (fuentes, tipografías) por Sitio Web, ya que ello aumenta el tiempo de carga de tu sitio.

Para trabajar con tipografías diferentes puedes emplear:

• google fonts
• adobe edge fonts
• cargar de tipografías mediante @font-face

Cargando en el componente style css > fuentes y letras la tipografía y pegando el link de la fuente en este componente:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<script src="//use.edgefonts.net/aclonica.js"></script>

Dentro de el archivo modificaciones.css asigna la fuente al body

body{
   font-family: 'Roboto', sans-serif;
}

Si quieres que sólo los títulos (h1,h2,h3, etc...) usen una fuente en particular

 h1,  h2,  h3,  h4,  h5,  h6,
.h1, .h2, .h3, .h4, .h5, .h6{
   font-family: 'Roboto', sans-serif;
}

❌ NO USAR TTF, OTF, PostScript, etc...

✔️ SÓLO USAR WOFF

• TTF a WOFF
• OTF a WOFF

1. Necesitas que la fuente este en formato WOFF

2. Carga la fuente (Roboto-Regular.woff) en el menú diseño > archivos

3. Dentro del archivo modificaciones.css utiliza un código @font-face

@font-face{
    font-family: "Roboto";
    src: url("{{'Roboto-Regular.woff' | asset_url }}");
    font-weight: normal;
}

configuración	significado
font-family	nombre que tendrá la familia
src	url donde se encuentra el recurso
font-weight	Peso que tiene la fuente. Esto puede ser Normal, Bold, 100, 200, 300, 400, 500, 600, 700, 800, 900

4. Cargar la fuente por regla css dentro del texto que quieres que la cargue

body{
   font-family: "Roboto" sans-serif;
}

sans-serif es según el tipo de familia

Para trabajar con dos variables de una tipografía como sería normal y bold se deben cargar ambos archivo en su versión woff y luego llamarla en el archivo modificaciones.css

    @font-face{
       font-family: "Roboto";
       src: url("{{'Roboto-Regular.woff'  | asset_url }}");
       font-weight: normal;
    }
    @font-face{
       font-family: "Roboto";
       src: url("{{'Roboto-Bold.woff'  | asset_url }}");
       font-weight: bold;
    }

Utilización de la fuente

    body{
       font-family: "Roboto" sans-serif;
       font-weight: normal;
    }
    h1{
       font-weight: bold;
    }