Defining a Second Font in Minima


#1

I’d like to use a second font on my GitHub Pages site, one font for body, p, etc. and another for all h1, h2, h3, etc.

I copied:
minima.scss
to
/_sass/minima.scss

I then rewrote the $base-font-family line to look like this:
$base-font-family: serif, Times, Times New Roman;

and below the base-font section, I added these lines:
$headings-font-family: sans-serif, Helvetica, Arial;
$headings-font-size: 16px !default;
$headings-font-weight: 400 !default;
$headings-line-height: 1.5 !default;

In \docs_sass\minima/_base.scss I rewrote the section for headings to look like:
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
font: $headings-font-weight # {$headings-font-size}/#{headings-line-height} $headings-font-family;
margin-bottom: $spacing-unit / 2;
}

However, I’m only getting the base font on served pages.

Please tell me what am I missing/doing wrong.


#2

Seriously? No one knows how to do this?


#3

You’ll have more success if you can link to a public repo. What you have above isn’t enough to go on.

Typically you need to copy all of the theme’s _sass files to your local repo since overriding a partial or two doesn’t work. You need the whole set due to how Jekyll processes them when using themes.

You might be better off copying over assets/css/style.scss and add your custom CSS after the @import.

Any CSS declarations you make here will definitely take affect vs. trying to do it in a Sass partial that Jekyll likely is ignoring because of how bundled theme’s work.


#4

Thanks, Michael. Sorry I took so long to respond.
I did copy _sass, but in the minima-2.5.0\assets folder, there is no css folder and subsequently, no style.css. I do have a file: docs\assets\css\style.css that looks like this:

---
# Only the main Sass file needs front matter (the dashes are enough)
---

@import "minima";
@import "minima/syntax-highlighting";
@import "my_overrides";

body, p, ul, li, a
{
	font-family: serif, Times, Times New Roman;
}

h1, h2, h3, h4, h5, h6
{
	font: san-serif, Helvetica, Arial;
}

But it’s not paying attention to it.

And sorry for all the vagueness, but I don’t understand Jekyll and I’m finding it hard to keep track of all the bits and pieces.

I’m thinking at this point it might work best if I scraped it back down to the metal and start over, but now that my site is live, I don’t wanna risk downtime.