Trouble configuring multiple weights of the same font

Anki Help
1

I’m trying to configure Anki to use system fonts when present, and fall back to font files in collection.media if not. I also want to use both the regular and bold version of the same font.

My understanding is that the following syntax should work, and it technically does. However, it seems like it doesn’t find the local bold font, as the font does not load if the fallback font sources are removed.

This is on a Windows machine.

EDIT:
Replacing the local bold font with the regular version of another fonts works. In other words, it seems to specifically be a problem with accessing alternate weights.

@font-face { 
  font-family: HanSerif;
  src:
    local('Source Han Serif JP'),
    url('_SourceHanSerifJP-Regular.ttf');
}

@font-face {
  font-family: HanSerif;
  font-weight: bold;
  src:
    local('Source Han Serif JP Bold'),
    url('_SourceHanSerifJP-Bold.ttf');
}
2

I just tried that and it seems to work as expected.

Template:

<div class="han-serif">
    <div class="normal-weight">{{Front}}</div>
    <div class="bold-weight">{{Front}}</div>
</div>

Styling:

@font-face {
    font-family: "HanSerif";
    font-weight: normal;
    src: local("Source Han Serif JP"), url("_SourceHanSerifJP-Regular.otf");
}

@font-face {
    font-family: "HanSerif";
    font-weight: bold;
    src: local("Source Han Serif JP Bold"), url("_SourceHanSerifJP-Bold.otf");
}

.han-serif {
    font-family: "HanSerif";
}

.normal-weight {
    font-weight: normal;
}

.bold-weight {
    font-weight: bold;
}

font-face
font-face879×555 36 KB

Note:
I couldn’t find .ttf file after a bit of googling, so in the example above, I used .otf file downloaded from this page. Also, I used a yet-to-be-released version of AnkiWebView Inspector add-on to illustrate which font the text is rendered in within a single screenshot.

3

Thanks for the reply!

The .ttf file is from this repo. I use it as the original .otf loaded significantly slower when I attempted to use it in Ankidroid a while back.

Using your styling as a base, compare the following three outputs:

Using your styling as-is:
image

Using only the font file [2]:
image

Using only the local font [3]:
image

My conclusion is that the local bold font is never accessed, and Anki instead falls back to the font file. Otherwise, all three of these ought to be the same.

2:

@font-face {
    font-family: "HanSerif";
    font-weight: normal;
    src: url("_SourceHanSerifJP-Regular.ttf");
}

@font-face {
    font-family: "HanSerif";
    font-weight: bold;
    src: url("_SourceHanSerifJP-Bold.ttf");
}

3:

@font-face {
    font-family: "HanSerif";
    font-weight: normal;
    src: local("Source Han Serif JP");
}

@font-face {
    font-family: "HanSerif";
    font-weight: bold;
    src: local("Source Han Serif JP Bold");
}
4

I may have misunderstood the meaning of your first post a bit, as I have a limited understanding of English.

At the time I made my previous post, I had tested the template without installing that font on my OS, so now I installed the font on my OS and tested it again, and the bold-weight part did not work.

As you said, local fonts specified with @font-face local() do not seem to have access to weights other than normal.

One of the workarounds I can quickly think of is as follows:

Template & Styling

Template:

<div class="han-serif">
    <div class="extra-light-weight">{{Front}}</div>
    <div class="normal-weight">{{Front}}</div>
    <div class="bold-weight">{{Front}}</div>
</div>

Styling:

.card {
    font-size: 64px;
    text-align: center;
}

@font-face {
    font-family: "myHanSerif";
    font-weight: 200;
    src: url("_SourceHanSerifJP-ExtraLight.ttf");
}

@font-face {
    font-family: "myHanSerif";
    font-weight: normal;
    src: url("_SourceHanSerifJP-Regular.ttf");
}

@font-face {
    font-family: "myHanSerif";
    font-weight: bold;
    src: url("_SourceHanSerifJP-Bold.ttf");
}

/* First, look for "源ノ明朝 JP" font installed on your system,
and if it is not found, then look for "_SourceHanSerifJP-***.ttf"
in the "collection.media" folder. */
.han-serif {
    font-family: "源ノ明朝 JP", "myHanSerif";
}

.extra-light-weight {
    font-weight: 200;
}

.normal-weight {
    font-weight: normal;
}

.bold-weight {
    font-weight: bold;
}

Screencast GIF:
(It seems that gif files cannot be zoomed to their original size on this forum, unlike jpg and png files. If the size is too small for you to see, open the gif directly in a new tab.)
font-face

2 Likes
5

This works perfectly, thanks!

This seems like the way to go on Linux as well, since it looks like fontconfig will return another font instead of falling back to @font-face url() if the font requested in @font-face local() is missing.

I wonder if the behavior of @font-face local() is an issue with Anki or the OS, though.