forked from lakmeer/zbalermorna
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathfonts.html
89 lines (62 loc) · 5.66 KB
/
fonts.html
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
---
title: Zbalermorna Fonts
permalink: /fonts/
---
<div class="container">
<div class="row">
<div class="column">
<h1>Zbalermorna Fonts</h1>
<p>These are some of the featured fonts in the <a href="https://github.com/{{ site.repository }}/tree/master/fonts/">Zbalermorna Github repo <code>/fonts</code> folder</a>, and probably the most complete at the time of writing this. These and others are included in the fonts.css file that you can add to a page to load them in your stylesheet directly:
<pre><code>@import url(//jackhumbert.github.io/zbalermorna/assets/css/fonts.css);</code></pre>
or from the <code>head</code>:
<pre><code><link rel="stylesheet" href="//jackhumbert.github.io/zbalermorna/assets/css/fonts.css"></code></pre>
Check out the <code><a href="https://github.com/{{ site.repository }}/tree/master/assets/css/fonts.css">/assets/css/fonts.css</a></code> file for which fonts are included, and their names. There is slightly better feature support (namely embedded bitmaps) if they are installed locally, so preference is given to those (via <code>local('Font Name')</code>).
</p>
<p>This is the latin text that is used in these examples, which aims to be a pangram for Zbalermorna:
<pre><code>.ii .o'i mu xagji sofybakni cu zvati le purdi</code></pre>
</p>
<p>These fonts only contain glyphs that are relevant/used in Zbalermorna texts. These additional characters are: <code>! "#$%&():;<>?[]{}«»</code></p></p>
<h3>Crisa Regular / Light</h3>
<div class="row">
<div class="column one-half">
<p style="font-family: 'crisa-regular'; font-size: 48px;"> </p>
</div>
<div class="column one-half">
<p style="font-family: 'crisa-light'; font-size: 48px;"> </p>
</div>
</div>
<p>Crisa is based on Lato, and is optimised for reading at smaller sizes. The font has embedded bitmaps for sizes 12-17px, which will only render if you install it on your system (as opposed to loading it from the web).
<h3>Vrude Regular</h3>
<div class="row">
<div class="column one-half">
<p style="font-family: 'vrude-regular'; font-size: 48px;"> </p>
</div>
<div class="column one-half">
<p style="font-family: 'vrude-regular'; font-style: italic; font-size: 48px;"> </p>
</div>
</div>
<p>Vrude has a Regular and Italic version, and is based on <a href="https://fonts.google.com/specimen/Playfair+Display">Playfair Display</a> and is licensed under the Open Font License.</p>
<h3>Ritli Regular</h3>
<p style="font-family: 'ritli-regular'; font-size: 48px;"> </p>
<p>Ritli is based on Times Newer Roman, which itself is based on Nimbus Roman, and is licensed under GPL.</p>
<h3>Primihi Regular</h3>
<p style="font-family: 'primihi-regular'; font-size: 48px;"> </p>
<p>Primihi is <a href="https://www.fontsquirrel.com/fonts/Goudy-Bookletter-1911">Goudy Bookletter</a>, and is Public Domain.</p>
<h3>Dunda Regular</h3>
<p style="font-family: 'dunda-regular'; font-size: 48px;"> </p>
<p>Dunda is based on <a href="https://www.dafont.com/tengwar-annatar.font">Tengwar Annatar</a>.</p>
<h3>Nerfopi Regular</h3>
<p style="font-family: 'nerfopi-regular'; font-size: 48px;"> </p>
<p>Nerfopi is based on Lobster 1.3 and is licensed under OFL.</p>
<h3>Tanbo Regular</h3>
<p style="font-family: 'tanbo-regular'; font-size: 48px;"> </p>
<p>Tanbo is based on Roboto Slab Serif and is licensed under Apache 2.0</p>
<h3>Balvi Regular</h3>
<p style="font-family: 'balvi-regular'; font-size: 48px;"> </p>
<p>Balvi is based on Exo 2 and is licensed under OFL.</p>
<h3>Fira Code Zbalermorna</h3>
<pre><code style="font-family: 'fira-code-zlm'; font-size: 16px;"> </code></pre>
<p>This font is completely monospace and void of any combining ligatures, so developing with Zbalermorna text is easier. The {slaka bu} renders as `` to be able to see it (it otherwise has zero width). The full Fira Code font, plus the Zbalermorna additions are included in this font, so you can set your text editor/terminals to use this without worrying about missing other glyphs.</p>
</div>
</div>
</div>