Jekyll and Minima with Two Fonts?

Question

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.)

Screenshot showing switched fonts

Possible duplicate of [Changing the font in Jekyll Minima (default) theme](https://stackoverflow.com/questions/54138066/changing-the-font-in-jekyll-minima-default-theme) — Tobias Barsnes, Jan 11 '19 at 20:10

score 1 · Answer 1 · answered Jan 11 '19 at 20:39

1

You may be able to split your css to target each separately, like this:

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;
}

answered Jan 11 '19 at 20:39

brooksrelyt

3,925
5
31
54

I'm very new to jekyll. Would this be in minima.scss or _base.scss? Does it need to be in both? – no-one Jan 12 '19 at 13:17
Put it in base if that is the file that overrides the default styles. Otherwise I would suggest creating a _app.scss file you can use strictly for customization as to not interfere with the default minima packaging/scss files. – brooksrelyt Jan 12 '19 at 16:35
To be honest, I gave up. I managed to get the font changed to something readable (serif) and now I don't wanna touch again because I don't wanna spend hours trying to fix it (again). I can't find a guide or tutorial for which files do what in Jekyll or how to make this kind of change. I think Jekyll was designed to use only one font, so this is now on the back burner. I'll just keep an eye out for something else that's more plug-n-play. But thanks for asking. – no-one Jan 17 '19 at 10:09

Jekyll and Minima with Two Fonts?

1 Answers1