Search code examples
htmlcssjekyllgithub-pageswebfonts

Adding Computer Modern Serif to Jekyll github page

I am using a forked version of the jekyll github page and want to add Computer Modern Serif font as the body font for all pages. I downloaded all the files from here as explained by the answer into a fonts/Serif folder. I then added into the _includes/ext-css.html file the following code

<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <!-- Computer Modern Serif-->
    <link rel="stylesheet" href="fonts/Serif/cmun-serif.css"></link>
    ...
</head>

I have also added the following line (at line 13) to the assets/css/beautifuljekyll.css file

body {
  font-family: 'Lora', 'Times New Roman', serif;

However, I am still unable to get this font on all the pages. Should I add/remove anything else to make this work? I am new to github pages and html, so please help me with this

Solution

  • After a few discussions (thanks to araxhiel) I found a way to fix the issue.

    1. In the _includes/ext-css.html file add /fonts/ instead of just fonts i.e. make the code as
    <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <!-- Computer Modern Serif-->
    <link rel="stylesheet" href="/fonts/Serif/cmun-serif.css"></link>
    ...
</head>
    1. At line 13 of assets/css/beautifuljekyll.css file change it to
    body {
  font-family: 'Computer Modern Serif','Droid Sans', Helvetica, Arial, sans-serif;

    And also, in the same file, add the following piece of code just before this line 13 (before body starts)

    //*********************** Fonts ********************//

@font-face {
    font-family: 'Computer Modern Serif';
    src: url('../../fonts/Serif/cmunrm.eot');
    src: url('../../fonts/Serif/cmunrm.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/Serif/cmunrm.woff') format('woff'),
         url('../../fonts/Serif/cmunrm.ttf') format('truetype'),
         url('../../fonts/Serif/cmunrm.svg#cmunrm') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Computer Modern Serif';
    src: url('../../fonts/Serif/cmunbx.eot');
    src: url('../../fonts/Serif/cmunbx.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/Serif/cmunbx.woff') format('woff'),
         url('../../fonts/Serif/cmunbx.ttf') format('truetype'),
         url('../../fonts/Serif/cmunbx.svg#cmunbx') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Computer Modern Serif';
    src: url('../../fonts/Serif/cmunti.eot');
    src: url('../../fonts/Serif/cmunti.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/Serif/cmunti.woff') format('woff'),
         url('../../fonts/Serif/cmunti.ttf') format('truetype'),
         url('../../fonts/Serif/cmunti.svg#cmunti') format('svg');
    font-weight: normal;
    font-style: italic;
}


@font-face {
    font-family: 'Computer Modern Serif';
    src: url('../../fonts/Serif/cmunbi.eot');
    src: url('../../fonts/Serif/cmunbi.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/Serif/cmunbi.woff') format('woff'),
         url('../../fonts/Serif/cmunbi.ttf') format('truetype'),
         url('../../fonts/Serif/cmunbi.svg#cmunbi') format('svg');
    font-weight: bold;
    font-style: italic;
}
    1. Along with the above two code additions, if you follow the steps in the question, which only leaves adding the fonts/Serif folder onto the main repo from the link, you are good to go!!