JMM’s notes on

Using fonts

How to list them, convert them, that kind of thing.

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:

A screencast of Gnome Font Viewer.

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.