I'm trying to get Jekyll to use two fonts, one for headings, and one for body text. To this end, I've copied the entire _sass folder to the root of my site, then changed \_sass\minima\_base.scss to include definitions for both fonts...
/**
* 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;
}
Then in \_sass\minimua.scss, I changed the styling for the base font, then added the heading font:
$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;
I also created \_sass\my_overrides.scss which looks like this: @charset "utf-8";
// Define defaults for each variable.
$base-font-family: serif, Times, "Times New Roman";
$heading-font-family: san-serif, Helvetica, Arial;
But as far as I can tell, the fonts are switched in their use (screenshot below). And I'm probably forgetting something because this whole process is so complex.
So my question is: How do I get two fonts working with Jekyll, serif for body, san-serif for headings?
I suppose I could also ask if Jekyll has a dual-font facility built in and if not, why not? But perhaps that sounds belligerent? (It's not meant to.)
