Custom fonts in Quarto slides published via GitHub pages

I spent a good chunk of yesterday doing battle with a custom font that I needed to import from a directory rather than from Google Fonts into a #quartoPub presentation.

Author

Affiliation

Cara Thompson

Building Stories with Data

Worked fine locally, but could not get it to work on GitHub Pages.

The solution? Give the font two paths.

// to work locally...
@font-face {
  font-family: 'brandon-text';
  src: url("/fonts/BrandonText-Regular.ttf") 
    format('truetype');
}


// to create a url that will work on GitHub Pages...
/* My root directory is hdsi_rug; GitHub Pages seems to delete that part of the path string, so specifying it again within a new path works. The font isn't stored here, but this tricks GitHub Pages into looking in the right place! */ 

@font-face {
  font-family: 'brandon-text';
  src: url("/hdsi_rug/fonts/BrandonText-Regular.ttf") 
    format('truetype');
}

The next thing to fix was that the footer got moved back to its default Quarto position when the slides are inside an iframe.

So, enter “footer.css” where I needed to edit the footer attributes inside the section which applies when width < 800px (e.g., inside the iframe).

@media screen and (max-width: 800px) {
    // Replicate any footer adjustements in here
  
    .reveal .footer {
      display: block;
      position: fixed;
      /* v Main culprit! v */
      bottom: 0px;
      width: 100%;
      margin: 0 auto;
      text-align: center;
      font-size: 14px;
      z-index: 2;
    }

    // More CSS here
  
}

Finally, I wasted time editing my custom css file in the GH repo, not realising that the Quarto rendered html doc reads from a different css file, deep inside the entrails of the repo.

Really pleased with the end result - but yikes! Every day a school day