It’s displayed in Arial, and here’s the error message, when I try to load a font on my server :
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
Yes, I’m using Node.js on PowerShell. Why?
Nevermind
XLBilly’s instructions are specific to node.js version of TW so I wondered if they were adapted to your TW version.
Have fun!
Fred
So it’s feasible?! Even if it’s complicated?
Never tried myself, but I’m confident it’s feasible!
Fred