I forget how to use fonts all the time, so I really should add more here.
Viewing fonts on your system
I already have gnome-font-viewer
installed on my system (maybe because I had this issue before).
Here’s what it looks like:
Fontconfig
- Homepage
- https://www.freedesktop.org/wiki/Software/fontconfig/
- Docs
- fontconfig user docs
As of , I’m finding the fontconfig man pages very sparse.
fc-list
includes the following:
-f Format output according to the format specifier format.
I have no idea what a “format specifier” is.
… Okay, so I’m digging through the source code, and looking at the source of fc-list
I think that FcPatternFormat
is the key to that.
Here’s an online manpage for FcPatternFormat.
Actually, that man page has a good example of how to get the first family part of a font.
I probably would have clicked on the “See also” section, but I don’t have those manpages installed on my system.
I probably should.
Okay, using what I just learned in the past howevermany minutes, here’s how to list installed font families:
fc-list --format '%{family[0]}\n' : | sort -u
That gives you something like:
all-the-icons Arimo Cantarell Cascadia Code Cascadia Code PL Cascadia Mono Cascadia Mono PL Coding Font Tobi …
Chinese fonts
Before I forget, here’s what I set for my fonts.fontConfig.localConf
on NixOS.
Actually, I already forgot, I’m not exactly sure why I set it to an XML file with the following code:
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<match>
<test name="lang" compare="contains">
<string>zh</string>
</test>
<test name="family">
<string>serif</string>
</test>
<edit name="family" mode="prepend">
<string>Noto Serif CJK SC</string>
</edit>
</match>
<match>
<test name="lang" compare="contains">
<string>zh</string>
</test>
<test name="family">
<string>sans-serif</string>
</test>
<edit name="family" mode="prepend">
<string>Noto Sans CJK SC</string>
</edit>
</match>
<match>
<test name="lang" compare="contains">
<string>zh</string>
</test>
<test name="family">
<string>monospace</string>
</test>
<edit name="family" mode="prepend">
<string>Noto Sans Mono CJK SC</string>
</edit>
</match>
</fontconfig>
I think it was just a way of setting a good default font for Chinese characters.
Getting font info
I’m currently trying to get my business card SVG to render correctly, but it requires Cascadia Code, and I need to figure out how to serve web fonts.
The Cascadia Code release page has a zip file with woff2
fonts, but I’m not sure what their weights are.
I’ll try to use otfinfo
to find that out.
I first tried directly running otfinfo --info CascadiaCode.woff2
, but that returned:
otfinfo: woff2/CascadiaCode.woff2: not an OpenType font (bad magic number)
Which makes sense since it’s not the right format.
So I’ll decompress it using woff2_decompress
from google/woff2:
Running woff2_decompress CascadiaCode.woff2
outputs nothing and makes a CascadiaCode.ttf file in the same directory.
Trying to get info there, I see:
$ otfinfo --info CascadiaCode.ttf Family: Cascadia Code Subfamily: Regular Full name: Cascadia Code Regular PostScript name: CascadiaCode-Regular Version: Version 2111.001 Unique ID: 2111.001;SAJA;CascadiaCode-Regular
…
Hmm… this still doesn’t tell me which number I should put for a CSS font-weight
.
But I’ll just use MDN’s common table of font weights and see how well that works.
Wasn’t sure which weight “SemiLight” is, so I’m going with “350” based off some discussions I saw online. I’m not really principled here, and I haven’t checked if this works in any way.
CSS font-face rules
Continuing with the story where I was trying to figure out how to get Cascadia Code to render properly in my SVG file, I ended up making a CSS file that has a rule for every different font file. It looks something like this:
@font-face {
font-family: "Cascadia Code";
src: local("Cascadia Code Regular"),
url("/fonts/CascadiaCode/2111.01/CascadiaCode.woff2") format("woff2");
font-weight: normal;
font-style: normal;
/* See /fonts/CascadiaCode/2111.01/LICENSE
for the license (SIL) of this file. */
}
@font-face {
font-family: "Cascadia Code";
src: local("Cascadia Code Bold"),
url("/fonts/CascadiaCode/2111.01/CascadiaCode-Bold.woff2") format("woff2");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Cascadia Code";
src: local("Cascadia Code Bold Italic"),
url("/fonts/CascadiaCode/2111.01/CascadiaCode-BoldItalic.woff2") format("woff2");
font-weight: bold;
font-style: italic;
}
The trick here is that the “local
” part can’t just be a generic “Cascadia Code
” but has to be more specific like “Cascadia Code Bold Italic
”.
I think what might be happening otherwise is that it just matches the first font that’s closest, and sometimes that gets you an italic font when you wanted a normal font-style
.
That’s my guess, anyway.