Changing a Font in an Jekyll Theme

1
votes

I have been experimenting with Jekyll a little bit the last days. I guess I understand the basics about it. I tested around 4 Templates and got them to run and understand the structures of a jekyll page. It isnt much magic tbh.

Today I came to the point where I wanted to change the font of my Template. I am using the Type on Strap Teamplate at the moment and you can see my repo I build on git pages Right here.

I checked out this post on stackoverflow. Which helped me to identify the _variables.scss file in the _sass/base folder. Also the thread goes on, saying that the whole file might be controlled through a scss file, mostly called like the theme. There we go, I found the Type-on-Strap in the _sass folder.

Now my question is: Do i have to edit the _variables.scss like I did below, and If so, where to I put the ttf files or how do i link correctly to the webfont ? Or will I leave the _variables files as it is and only have to edit the type-on-strap.scss file ? and if so again, what do I have to change ?

The _variable.scss file:

// Typography
$font-family-main: 'Source Sans Pro', Helvetica, Arial, sans-serif;
$font-family-headings: 'Source Sans Pro', Helvetica, Arial, sans-serif;
$font-family-logo: 'Source Sans Pro', Helvetica, Arial, sans-serif;
$font-size: 1.25em;

So I dont want to use Sans Pro anymore. I would like to use Barlow Semi Condensed as ther main font, and Barlow Semi Condensed Medium for the headings and logo. Would I change the code to this?:

$font-family-main: 'Barlow Semi Condensed', sans-serif;
$font-family-headings: 'Barlow Semi Condensed', sans-serif;
$font-family-logo: 'Barlow Semi Condensed', sans-serif;

Summary: I only want to know, what do I have to edit how to get Barlow font to replace the sans pro one on my template I am using.

Hope people arent too mad about me making another post about this. I crawler through some of the answers and this is day two in trying. Kind of getting exhausted :)

Thanks in advance!

1
csssasswebfontsjekyll-theme

1 Answers

0
votes

Hey thanks for using the theme. I see two solutions for your problem

  1. If you are not familiar with sass, there are often the possibility to import directly the css of your font in the head.html. Try looking for an "embedded" version.

For this font you could just add this line in your header, and modify the _variable.scss as you did for it to work.

<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">

  1. if you want to manually add your font with sass/scss, there's no magic, you will need to:

    • download the fonts and put them in /fonts mind the naming, you'll need it.
    • Check out how it was done for "Source Sans Pro" in _sass/external/_source-sans-pro.scss. Add a new file like BarlowSemiCondensed.scss with all the right information.
    • Create a @font-face for the font you'll be using.(Usually what you get when you download the font, just copy those files).
    • Don't forget to import any new .scss file in type-on-strap.scss