Adding Computer Modern Serif to Jekyll github page

Question

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

Vignesh S · Accepted Answer · 2022-02-22T20:41:38.880

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

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>

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

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!!

Adding Computer Modern Serif to Jekyll github page

1 Answers1