Variable Weight Font in TiddlyWiki

#1

I have started experimenting a variable weight font in TiddlyWiki 5.3.7p and I found it quite interesting.
For my experiment I downloaded the font from Vazirmatn - Google Fonts

This font is a Unicode font has woff2 version (109kB) and support RTL/LTR (here I tried Persian, and English).

The below stylesheet defines the variable font:

@font-face {
    font-family: 'Vazirmatn';
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  src: url(<<datauri "Vazirmatn-wght.woff2">>) format('woff2 supports variations'),
       url(<<datauri "Vazirmatn-wght.woff2">>) format('woff2-variations');
}

Then I added the font in front of TW fonts in $:/ControlPanel → Appearance → Theme Tweaks → Font family.

#2

[…] = my addition

These kind of simple experiments add to “TW-Lore” in a healthy way!
A v. good example of “TW-Super-Flex”.

TT

1 Like
#3

This post is v. interesting to me.
It is interesting in it’s explicit content.
It is also interesting in it’s implicit content.

  • What is a WOFF?
  • Do I need one?
  • Why should font-weight be on my mind?

TT, x

1 Like
#4

What is a WOFF?

WOFF (Web Open Font Format) is a format for using custom fonts on web pages. It’s designed to deliver compressed font files that can be loaded quickly by web browsers. There are two versions: WOFF (the original) and WOFF2 (the newer, more efficient version). Think of it like a special delivery service that helps fonts get to your screen faster and more efficiently.

Do I need a Variable Weight Font?

Variable fonts are a type of font that includes multiple variations of weight, width, and other attributes in a single file. This flexibility allows you to fine-tune the appearance of your text without having to load multiple font files. Here’s why you might want one:

  • Design Flexibility: They provide more design options within a single font file.
  • Performance: Reducing the number of font files can speed up your website.
  • Consistency: Ensures a consistent look across different devices and screen resolutions.

Why should Font-weight be on my mind?

Font-weight refers to the thickness of the characters in a font. Here’s why it’s essential:

  • Readability: Different weights can make text easier or harder to read. For example, bold fonts can emphasize important text.
  • Design Aesthetics: Using varying weights can add visual hierarchy to your content, making it more engaging.
  • Brand Consistency: Consistent use of font weights can reinforce brand identity.

If you’re looking to enhance your TiddlyWiki or documents with custom and versatile fonts, considering WOFF and variable fonts is a smart move!

Note:
The answer was prepared with the help of ChatGPT.