about summary refs log tree commit diff
path: root/src/inc/unicode-range.md
blob: fdadf2dcdda73d3d95a847744c06998c5a50d5a8 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
While working on my custom [Anki] cards for learning Japanese and Turkish, I
found that my font of choice for Japanese [IPAex] was not properly supporting
glyphs used by Turkish, like [ğ].

![before](/media/content/unicode-range/before.jpg)

To fix this i am using a property of the `@font-face` rule to limit custom
fonts to source their glyphs from a subset of the unicode range and force
fallback to the next font in the set.

```css
@font-face {
    font-family: "IPAexGothic";
    src:
        local("IPAexGothic"),
        url("_ipaexg.ttf");
    unicode-range: 
        U+0020-007F,
        U+3000-303f,
        U+3040-309f,
        U+30a0-30ff,
        U+ff00-ffef,
        U+4e00-9faf;
}

.card {
    font-family:
        IPAexGothic,
        Noto Sans,
        sans;
}
```

![after](/media/content/unicode-range/after.jpg)

[Anki]: https://apps.ankiweb.net/
[IPAex]: https://ja.wikipedia.org/wiki/IPA%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88
[ğ]: https://en.wikipedia.org/wiki/%C4%9E