Jekyll et Minima avec deux polices de caractères ?

Question

J'essaie de faire en sorte que Jekyll utilise deux polices, une pour les titres et une pour le corps du texte. À cette fin, j'ai copié l'intégralité du dossier _sass à la racine de mon site, puis j'ai modifié les paramètres suivants \_sass\minima\_base.scss pour inclure les définitions des deux polices...

/**
  * Basic styling
 */
body {
  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
  color: $text-color;
  background-color: $background-color;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
     -moz-font-feature-settings: "kern" 1;
       -o-font-feature-settings: "kern" 1;
          font-feature-settings: "kern" 1;
  font-kerning: normal;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
  font: $heading-font-weight #{$heading-font-size}/#{$heading-line-height} $heading-font-family;
  margin-bottom: $spacing-unit / 2;
}

Ensuite, dans \_sass\minimua.scss J'ai modifié le style de la police de base, puis j'ai ajouté la police d'en-tête :

$base-font-family: serif, Times, "Times New Roman";
$base-font-size:   16px !default;
$base-font-weight: 400 !default;
$small-font-size:  $base-font-size * 0.875 !default;
$base-line-height: 1.5 !default;

$heading-font-family: sans-serif, Helvetica, Arial;
$heading-font-size:   16px !default;
$heading-font-weight: 400 !default;
$heading-line-height: 1.5 !default;

J'ai également créé \_sass\my_overrides.scss qui ressemble à ceci : @charset "utf-8" ;

// Define defaults for each variable.

$base-font-family: serif, Times, "Times New Roman";
$heading-font-family: san-serif, Helvetica, Arial;

Mais pour autant que je puisse dire, les polices sont interverties dans leur utilisation (capture d'écran ci-dessous). Et j'oublie probablement quelque chose car tout ce processus est très complexe.

Ma question est donc la suivante : Comment faire pour que deux polices fonctionnent avec Jekyll, serif pour le corps, san-serif pour les titres ?

Je suppose que je pourrais également demander si Jekyll dispose d'une fonction de double police intégrée et si non, pourquoi ? Mais peut-être que cela semble belliqueux ? (Ce n'est pas le but.)

Capture d'écran montrant les polices changées

Answer 1

Vous pouvez peut-être diviser vos css pour les cibler séparément, comme ceci :

h1, h2, h3, h4, h5, h6 {
    font: $heading-font-weight #{$heading-font-size}/#{$heading-line-height} $heading-font-family;
    margin-bottom: $spacing-unit / 2;
}

p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
    font: $base-font-weight #{$base-font-size}/#{$base-font-height} $$base-font-family;
    margin-bottom: $spacing-unit / 2;
}