Hello, I don’t know if a topic already exists for this type of problem, is the font in a TW dependent on a theme or can I change the font without changing the theme? I’m asking this question because I’ve been trying to put an external font in my TW for a while now, but it doesn’t work…
Themes can define a new font-family, but they do not need to.
If fonts that are defined by the CSS are used can be defined in the
CotrolPanel → Appearance → Theme Tweaks → Settings → Font family setting
The TW Starlight theme does define a new font-family.
All the other themes use vanilla base - settings. You can use the starlight theme as a template for your experiments.
Important
You need to switch to the starlight theme to see the link above.
As you can see, the starlight theme does hardcode the font-family, wich is not best practice, since it deactivates the ControlPanel setting.
In vanilla the font is defined almost at the top, which uses the control panels setting with a transclusion as follows. If you search for font-family you can see, which TW elements do define certain elements like pre, code, quote … and so on
/*
** Basic element styles
*/
html, body {
font-family: {{$:/themes/tiddlywiki/vanilla/settings/fontfamily}};
text-rendering: optimizeLegibility; /* Enables kerning and ligatures etc. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
There should be other threads here in the forum too about custom 3rd party fonts.
Hope that helps
-Mario
2 Likes
To apply the stylesheet to tiddlywiki, add a $:/tags/Stylesheet tag.
The font file isn’t served on the server. To embed the font in the plugin, first put it in the plugin’s directory. Then create a hsr.ttf.meta in the same directory as hsr.ttf, with the following contents:
title: $:/plugin/myplugin/hsr.ttf
type: font/ttf
Then change the stylesheet’s @font-face to:
@font-face {
font-family: "HSRFont";
src: url(<<datauri "$:/plugin/myplugin/hsr.ttf">>) format(ttf);
}
Note that ttf fonts are large, it is suggested to use woff fonts on web.
The hsr.ttf.meta, in the Fonts folder of the one served by my server, right? 
If so, is it JSON or CSS? The Font type doesn’t exist.
I don’t understand…
But the Base64 encoded font, so ?
The directory structure should be like this (See PluginFolders), files that doesn’t exist in tiddlers, plugins and themes won’t be served:
tiddlywiki.info
tiddlers
*.tid
plugins
myplugin
plugin.info
Police du theme.tid
hsr.ttf
hsr.ttf.meta
You have to include plugin information in plugin.info:
{
"title": "$:/plugins/myplugin",
"name": "myplugin",
"version": "0.0.1",
"plugin-type": "plugin"
}
But I must write into the tiddler or just into the fields? Because the type: font/ttf does not exist. Sorry if I’m a noob of development… 
The type dropdown only contains common MIME types for completion, if you have a look at the official example theme which embeds a woff font, you can find font/woff type in arvo.woff.meta.
@Springer created a beautiful TW site collecting all the Google Fonts. You may find interestings things there…
Thank you, but the font I’m trying to put in my TW is from a video game. The TW you’re showing me can’t find that font. It’s for an encyclopedia about the lore in Honkai - Star Rail.
Yes, one reason I created that site is because enabling one’s own custom fonts proved to be … pretty difficult!
I’m sure others have more detailed knowledge of how to do it, including Billy… but using a web font (if you can find something that meets your needs) is so much easier — at least for non-experts — than getting a font on one’s computer to be recognized within the browser’s html rendering.
Given the initial framing of the question by @Lilashy my guess is that they came in without any practice on the familiar and easy case (just tweaking the font settings in the Control Panel), but now want to access a very specific font.
I know I’ve accomplished that kind of non-web-font access at least once before, and I recall there was so much wrestling with font-encoding that I was pretty discouraged from trying again.
Hopefully Billy’s advice solves the problem for OP.
Otherwise, finding the closest match to the DIN font style may at least allow for moving forward…
Try dragging the hsr.ttf file into tiddlywiki to import it, and rename its name. You may see hsr.ttf.txt and hsr.ttf.txt.meta created in the tiddlers folder, rename them to hsr.ttf and hsr.ttf.meta and change type: text/plain in hsr.ttf.meta to type: font/ttf. Then move them to the plugin directory, where your plugin’s plugin.info is located in.
Note that the CSS code should not have type field set to text/css, and the argument of datauri macro should be equal to the tiddler title of hsr.ttf, $:/themes/MesThèmes/JeuxVidéo/HoYoVerse/HonkaiStarRail/Fonts/hsr.ttf.
plugin.info? I don’t know… I’m a noob in the computers domain.
Dragging hsr.ttf done.
Rename in…?
Just to be sure @Lilashy, you’re using the node.js version of TiddlyWiki, not the single-file html version, aren’t you?
Fred