Soporte para tipografías

_data/layouts/theme.yml

@@ -8,6 +8,42 @@ title:
   help:
     en: 'The name you want to give to this customization'
     es: 'El nombre que quieras darle a esta personalización'
+font_family_sans_serif:
+  type: predefined_value
+  label:
+    en: Select a typography for the site
+    es: Selecciona una tipografía para el sitio
+  help:
+    en: 'If you want us to add support for a typography, please send us an e-mail'
+    es: 'Si quieres que agreguemos una tipografía, por favor envíanos un e-mail'
+  default:
+    en: sans-serif
+    es: sans-serif
+  values:
+    en:
+      sans-serif: 'Sans Serif'
+      Roboto: 'Roboto'
+    es:
+      sans-serif: 'Sans Serif'
+      Roboto: 'Roboto'
+headings_font_family:
+  type: predefined_value
+  label:
+    en: Select a typography for the headings
+    es: Selecciona una tipografía para los títulos del sitio
+  help:
+    en: 'If you want us to add support for a typography, please send us an e-mail'
+    es: 'Si quieres que agreguemos una tipografía, por favor envíanos un e-mail'
+  default:
+    en: sans-serif
+    es: sans-serif
+  values:
+    en:
+      sans-serif: 'Sans Serif'
+      Roboto: 'Roboto'
+    es:
+      sans-serif: 'Sans Serif'
+      Roboto: 'Roboto'
 enable_rounded:
   type: boolean
   label:

_sass/fonts.scss

@@ -0,0 +1,29 @@
+// https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOkCnqEu92Fr1Mu52xP-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOjCnqEu92Fr1Mu51TzBhc9-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOmCnqEu92Fr1Me5Q-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOlCnqEu92Fr1MmWUlvAw-subset.woff2) format('woff2');
+}

assets/css/styles.scss

@@ -52,9 +52,6 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
 /// para generar animaciones.
 $bezier: cubic-bezier(0.75, 0, 0.25, 1);
 
-/// Redefinir la tipografía aquí, o borrar si usamos las de Bootstrap
-$font-family-sans-serif: sans-serif;
-
 /// Agregamos los colores propios de la plantilla aquí.  Bootstrap los
 /// agrega a su propia paleta de colores.  Si usamos el mismo nombre
 /// podemos redefinir el color.