How can I embed a font into Tiddlywiki?

Question

I'm trying to add a new font to tiddlywiki and have tried a few methods. None of them seem to be working, perhaps you could help?

I tried embedding the google fonts link provided in the html css stylesheet, but it wasn't reading the font. Then I followed this method: https://tiddlywiki.narkive.com/bS0CgWKQ/tw-tw5-how-to-embed-a-font-using-font-face-and-data-url but instead of adding FontAwesome like in the post, I used the font I wanted to add, which is 'Playfair Display', by the way, and can be found here: https://fonts.google.com/specimen/Playfair+Display?selection.family=Playfair+Display:400,400i,700,700i

h1.tc-site-title {
    font-size:22px;
    color:#626262;
    text-transform:uppercase;
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing:1px;
}

The font that is displaying now is Georgia. I at first added:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i&display=swap" rel="stylesheet">

to the stylesheet to embed it, then after that didn't work switched to the other method on narkive, which is a massive css stylesheet starting with:

@font-face {
    font-family: 'playfair_displayregular';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAHlMABMAAAABUNgAAHjcAAE...

There are no error messages showing, but the font simply won't change to the one I want it to. I can change it to any common fonts, it just seems that Tiddlywiki isn't reading the font properly.

Answer 1

I've tried below some of Google fonts and it works with me,to try by yourself, just copy/paste it in a new tiddler, then you can start from there

<link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Alex Brush' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Akronim' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Annie Use Your Telescope' rel='stylesheet'>

<style>
.st2 {font-family: 'Playfair Display';font-size: 42px;}
.st3 {font-family: 'Sofia';font-size: 42px;}
.st4 {font-family: 'Alex Brush';font-size: 42px;}
.st5 {font-family: 'Akronim';font-size: 42px;}
.st6 {font-family: 'Annie Use Your Telescope';font-size: 42px;}
</style>

<h1 class="st2">'Playfair Display'  1234567890 ABC abc</h1>
<h1 class="st3">'Sofia'  1234567890 ABC abc</h1>
<h1 class="st4">'Alex Brush'  1234567890 ABC abc</h1>
<h1 class="st5">'Akronim'  1234567890 ABC abc</h1>
<h1 class="st6">Sofia  1234567890 ABC abc</h1>

and this is my Tiddler output

I hope this will help