如何在Tiddlywiki中嵌入字体？Playfair Display嵌入失败求助

I've run into similar font loading headaches with TiddlyWiki before—its dynamic style handling works a bit differently than static sites, so common tricks don't always land. Let's walk through two reliable fixes to get Playfair Display working for you:

Method 1: Load Google Fonts via CSS @import (Simplest Approach) #

TiddlyWiki doesn't reliably pick up raw <link> tags added in random tiddlers, but it fully processes stylesheets tagged as global site styles. Here's how to set this up:

1. Create a new tiddler, set its Type to text/css, and add the tag $:/tags/Stylesheet (this tells TiddlyWiki to load it as a core stylesheet).
2. Paste this code into the tiddler:

/* Import Playfair Display from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');

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

Save the tiddler, reload your wiki, and the font should load correctly. The @import rule works here because it's embedded directly in the CSS that TiddlyWiki injects into the page's styles.

Method 2: Embed Fonts Locally (No External Dependencies) #

If you want to avoid relying on Google's servers, you can embed the font files directly into your wiki:

1. Download the Playfair Display font package from Google Fonts, extract it, and grab the WOFF2 files (the most efficient format for web use: PlayfairDisplay-Regular.woff2, PlayfairDisplay-Italic.woff2, PlayfairDisplay-Bold.woff2, PlayfairDisplay-BoldItalic.woff2).
2. Drag each WOFF2 file into your TiddlyWiki to create new tiddlers. Name them something like $:/fonts/PlayfairDisplay-Regular.woff2 for easy reference.
3. Create another stylesheet tiddler (Type: text/css, Tag: $:/tags/Stylesheet) and paste this:

/* Define each variant of Playfair Display */
@font-face {
  font-family: 'Playfair Display';
  src: url('$:/fonts/PlayfairDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('$:/fonts/PlayfairDisplay-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('$:/fonts/PlayfairDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('$:/fonts/PlayfairDisplay-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}

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

Save and reload—your wiki will now use the locally embedded font instead of falling back to Georgia.

Why Your Previous Methods Failed #

• The <link> tag likely wasn't being injected into the wiki's <head> section—TiddlyWiki manages its DOM dynamically, so raw HTML tags in regular tiddlers don't always get processed correctly.
• When you tried the @font-face method earlier, you probably either referenced the font files incorrectly (TiddlyWiki uses internal tiddler paths, not external URLs) or missed defining all the font variants you needed, forcing the browser to fall back to your backup font.

内容的提问来源于stack exchange，提问作者Kate