Font in a theme or not?

#1

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…

#2

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

image
image1529×730 37.6 KB

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.

image
image1895×803 277 KB

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