-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
executable file
·330 lines (312 loc) · 22.7 KB
/
index.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cadson Demak Index Fonts</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="block-header">
<div class="container">
<div class="col-md-12">
<h1 id="header">
<br> Google Thai Fonts
<br>
<br>
</h1>
</div>
</div>
</div>
<div id="block-1-menu">
<div class="container">
<div class="col-md-12">
<div class="col-md-4">
<button onmouseover="this.style.color='#a6ce39'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='http://cadsondemak.github.io/sriracha/'">
<span id=block-1-header> ศรีราชา<br>Sriracha</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#e44057'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='http://cadsondemak.github.io/itim/'">
<span id=block-2-header> ไอติม<br>Itim</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#f04b23'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/pattaya/'">
<span id=block-3-header> ล็อบสเตอร์ไทย<br>LobsterThai</span>
</button>
</div>
</div>
</div>
</div>
<div id="block-2-menu">
<div class="container">
<div class="col-md-12">
<div class="col-md-4">
<button onmouseover="this.style.color='#3fa9f5'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='http://cadsondemak.github.io/chonburi/'">
<span id=block-4-header> ชลบุรี<br>Chonburi</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#ff0058'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='http://cadsondemak.github.io/maitree/'">
<span id=block-5-header> ไมตรี<br>Maitree</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#00a99d'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='http://cadsondemak.github.io/pridi/'">
<span id=block-6-header> ปรีดี<br>Pridi</span>
</button>
</div>
</div>
</div>
</div>
<div id="block-3-menu">
<div class="container">
<div class="col-md-12">
<div class="col-md-4">
<button onmouseover="this.style.color='#0045a1'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='http://cadsondemak.github.io/athiti/'">
<span id=block-7-header> อทิติ<br>Athiti</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#4a27b7'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='http://cadsondemak.github.io/mitr/'">
<span id=block-8-header> มิตร<br>Mitr</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#8c6239'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='http://cadsondemak.github.io/taviraj/'">
<span id=block-9-header> ทวิราช<br>Taviraj</span>
</button>
</div>
</div>
</div>
</div>
<div id="block-4-menu">
<div class="container">
<div class="col-md-12">
<div class="col-md-4">
<button onmouseover="this.style.color='#ff1919'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='http://cadsondemak.github.io/trirong/'">
<span id=block-10-header> ไตรรงค์<br>Trirong</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#00de00'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='http://cadsondemak.github.io/prompt/'">
<span id=block-11-header> พร้อม<br>Prompt</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#333333'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='http://cadsondemak.github.io/kanit/'">
<span id=block-12-header> คณิต<br>Kanit</span>
</button>
</div>
</div>
</div>
</div>
<div id="block-5-menu">
<div class="container">
<div class="col-md-12">
<div class="col-md-4">
<button onmouseover="this.style.color='#42210B'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/K2D/'">
<span id=block-13-header> เคทูดี<br>K2D</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#FF1D25'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Krub/'">
<span id=block-14-header> ครับ<br>Krub</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#662D91'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Sarabun/'">
<span id=block-15-header> สารบรรณ<br>Sarabun</span>
</button>
</div>
</div>
</div>
</div>
<div id="block-6-menu">
<div class="container">
<div class="col-md-12">
<div class="col-md-4">
<button onmouseover="this.style.color='#58D4FF'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Niramit/'">
<span id=block-16-header> นิรมิต<br>Niramit</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#FF6FA3'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Mali/'">
<span id=block-17-header> มะลิ<br>Mali</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#0600BB'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Koho/'">
<span id=block-18-header> กอฮอ<br>Koho</span>
</button>
</div>
</div>
</div>
</div>
<div id="block-7-menu">
<div class="container">
<div class="col-md-12">
<div class="col-md-4">
<button onmouseover="this.style.color='#B76CFF'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Kodchasan/'">
<span id=block-19-header> คชสาร<br>Kodchasan</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#C80010'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Fah-Kwang/'">
<span id=block-20-header> ฟ้ากว้าง<br>Fah-Kwang</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#D17C00'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Charmonman/'">
<span id=block-21-header> จามรมาน<br>Charmonman</span>
</button>
</div>
</div>
</div>
</div>
<div id="block-8-menu">
<div class="container">
<div class="col-md-12">
<div class="col-md-4">
<button onmouseover="this.style.color='#FFAE08'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Charm/'">
<span id=block-22-header> จาม<br>Charm</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#421BFF'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Chakra-Petch/'">
<span id=block-23-header> จักรเพชร<br>Chakra-Petch</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#FFD70D'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Bai-Jamjuree/'">
<span id=block-24-header> ใบจามจุรี<br>Bai-Jamjuree</span>
</button>
</div>
</div>
</div>
</div>
<div id="block-9-menu">
<div class="container">
<div class="col-md-12">
<div class="col-md-4">
<button onmouseover="this.style.color='#000165'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Srisakdi/'">
<span id=block-25-header> ศรีศักดิ์<br>Srisakdi</span>
</button>
</div>
<div class="col-md-4">
<button onmouseover="this.style.color='#3F653F'" onmouseout="this.style.color='#b3b3b3'" class="btn btn-default btn-lg btn-block" onclick="location.href='https://cadsondemak.github.io/Thasadith/'">
<span id=block-26-header> ธสถิต<br>Thasadith</span>
</button>
</div>
</div>
</div>
</div>
<div id="block-menu">
</div>
<div id="block-header">
<div class="container">
<div class="col-md-12">
<div class="col-md-12">
<h1 id="text">
Google 12 Thai Fonts
<br>
<br>
A web with web fonts is more beautiful, readable, accessible and open.
Google Fonts makes it quick and easy for everyone to use web fonts, including
professional designers and developers. We believe that everyone should be able
to bring quality typography to their web pages and applications.
Our goal is to create a directory of web fonts for the world to use. Our API service
makes it easy to add Google Fonts to a website in seconds. The service runs on
Google’s servers which are fast, reliable and tested. Google provides this service
free of charge.
<br>
<br>All of the fonts are Open Source. This means that you are free to share your favorites
with friends and colleagues. You can even customize them for your own use,
or collaborate with the original designer to improve them. And you can use them
in every way you want, privately or commercially — in print, on your computer,
or in your websites.
<br>
<br>
Google 13+1 Thai Fonts
<br>
<br>
In 2010, Thailand’s typography circles saw the birth of “13 National Fonts”, the result of a progressive collaboration between the Software Industry Promotion Agency (predecessor of the present Digital Economy Promotion Agency, or DEPA), the Department of Intellectual Property, and the Ministry of Information and Communication Technology. The 13 resulting Thai typefaces were all named with a “TH” tag and were destined for royalty-free distribution to the public.
<br>
<br>Although the purpose of this public-fonts initiative was to create technologically-sound digital type to set the stage for the burgeoning use of digital communication devices, the project’s output of 13 fonts was met with only a lukewarm reception; only one or two of them managed to remain popular with general users.
<br>
<br>Following that initiative, in 2016 Google Fonts came up with a new set of 12 Thai fonts which were distributed as web fonts via their website for royalty-free use by web developers and graphic designers. The fonts were designed by Thai designers with guidance from Google Fonts on the finer points of digital typography. Due to their flexibility and compliance with emerging font technologies, this new set proved popular with Thai users.
<br>
<br>Encouraged by this success, Google Fonts sought to give a new lease of life to the original 13 National Fonts. The makeover task for these largely forgotten typefaces was assigned to Cadson Demak, one of Thailand’s leading digital type foundries.
<br>
<br>To digitally “recast” the 13 typefaces, it was necessary to re-examine their typographic qualities and properties, some of which may have become irrelevant or obsolete through the passage of time. Apart from esthetics and design intent, each font was reviewed for its basic properties such as proportions, contrast, glyph outlines, weight or style variants, legibility and readability. More rigorous examination was necessary regarding the font’s compliance with relevant font-making standards including the Unicode format, potential for weight scaling, font hinting, and so on. Any carelessness in using Unicode’s Private-Use slots needed to be sorted out. In addition, the font’s Latin glyph set was also reviewed to ensure the harmonious appearance of the type when set in mixed scripts.
<br>
<br>As far as possible, the original design intent inherent in the typefaces was to be retained. This was particularly important when it came to tweaking the specimens that have already been adopted for regular use by large numbers of organizations in Government and the private sector -- for example the Sarabun family of fonts.
<br>
<br>A short description of what the makeover achieved is given below.
<br>
<br>Sarabun — In the recast version of Sarabun, a greater amount of negative space was designed into the font in order to enhance readability and to prep for any possible weight scaling in the future. Its previous Latin glyph set underwent a large measure of redrawing which resulted in a new set with much improved letterforms that suitably complement its Thai counterparts in mixed scripts.
<br>
<br>KoHo — An interesting feature of this playful-looking typeface is in its terminal loops — which are in fact shaped more like a tiny ellipse — and the way this element is orientated and joined to a stroke. In the makeover version, the degree of the loop’s orientation is made uniform along with the curves that support it. Such an aspect of uniformity is important in today’s font making, not only for rendering a typeface easier to grasp visually, but also for facilitating the scaling of its weight.
<br>
<br>Charm — A shortcoming of the original design had to do with the haphazard intertwining of ascender strokes which inevitably cluttered up the white space between lines of type. To enable better management of this space, elements above the glyph body underwent a subtle reduction in height and/or downward shift of position. With cleaner line spacing, the makeover version not only retains the charm of its original handwritten look, but will also gain wider functionality from its much improved readability.
<br>
<br>K2D — The presence of tiny white slits on the glyphs is this font’s defining feature. This design element is reminiscent of the ink trap that once was routinely employed in the crafting of metal type. The makeover of K2D involved a reduction in size and number of the original ink traps, and a building up of style variants into a family of 8 successive weights.
<br>
<br>Krub — An element that creates a semi-casual personality for the font, the disconnected loop can become a design liability with certain computer applications that cannot accurately display the negative spaces. State-of-the-art type-making software was thus employed to re-code the font to ensure accurate screen representation of all the glyphs across all major operating platforms.
<br>
<br>Niramit — Since its introduction in 2010, Niramit has met with a moderate degree of success. With its glyph design bridging the gap between classic and contemporary, Niramit has the flexibility to be both. It works well as an authoritative voice while representing a fresh look in modern context. For the makeover version, the font underwent a measure of redrawing in order to emphasize its unique shoulder design.
<br>
<br>Mali — A measure of tweaking was made to turn this childlike handwriting script into a proper font. Loops on the glyphs were enlarged and remolded for consistency of appearance, stroke outlines resized and anchor points repositioned for uniformity of the letterforms. Some of the glyphs had their terminals extended a tad longer simply to render visual balance to the characters.
<br>
<br>Kodchasan — A humanist design with round and plump letterforms reminiscent of a teenager’s handwriting. For its makeover, the glyphs were redrawn to ensure the consistency of their monoline strokes as well as to prevent the appearance of blotches when the font is set on a wide area. The recast Kodchasan takes on a cleaner look with sharper delineation of the strokes.
<br>
<br>Fah-Kwang — The extra wide glyphs of Fah-Kwang set it apart from many other typefaces in a genre that emulates the look of traditional Thai type with thick-and-thin contrast. For the makeover version, its loops were resized for better proportions and glyph contrast harmonized for each weight to render more of a “formal” look. Finally, improved tracking metrics was employed to smooth out unevenness in the original version’s letterspaces.
<br>
<br>Charmonman — Strokes with strong contrast that end in a swash are what give this font an agreeable resemblance to the traditional handwriting of the West. Charmonman’s Latin glyph set, however, did not match well with its Thai characters — a design flaw that discouraged the setting of mixed scripts whenever the font was cast. This issue was resolved in the makeover version.
<br>
<br>Chakra-Petch — Patterned on a geometric design grid, the Chakra-Petch glyphs reflect the 45-degree cutting planes on a gemstone. Some redrawing of its glyphs was necessary in order to trade off its excessive angularity for a more harmonized appearance. The result is a recast font with a modern voice and versatility of uses — for display, headlines, body text, and so on.
<br>
<br>Bai-Jamjuree — A small measure of tweaking was made to the shape of the canopy stroke of the glyph set in order to harmonize this curved element across the set. As it was the font designer’s idea to use this element as a defining feature, this design intent was thus retained in the makeover version.
<br>
<br>Srisakdi — An air of nobility emanates from this script font whose letterforms emulate centuries-old Siamese court writing, complete with a delightful slant and rapier-like flourishes. While seeking to retain these characteristics in the recast font, a couple of changes were in order. The font’s original glyphs were stretched to add height; while their flourishes made a tad shorter in order to render a more contemporary feel to the type. The making over also refitted better tracking and letter spacing to improve readability. All of this should help to equip the upgraded Srisakdi with the versatility for a wider range of typographic uses.
<br>
<br>Thasadith — A font derived from experimental dabbling with the letterforms of Srisakdi. Type designers from Cadson Demak created this face to answer the query of how a slanting font could be digitally manipulated in order to turn it into upright type. The exercise produced an optimum design with the glyphs of Srisakdi. Hours of review and tweaking followed, and the result transformed into Thasadith, the 14th member of the group.
<br>
<br>
</h1>
</div>
</div>
</div>
</div>
<footer style=background-color:#e6e6e6>
<p id="bottom">
<br>This Open Source Font project was produced in
Glyphs with Thai and Latin 4 support Vietnamese.
<br>Source files are available in Glyphs, UFO, TTF and OTF. All the
fonts were produced at Cadson Demak.
<br>Hinting and postproduction were completed at Katatrad a subsidiary
of Cadson Demak.
<br>Hinting tool supported by freetype.org using ttfautohinting version 1.4.
Google Thai Fonts Project Managed
<br>by Dave Crossland, Anuthin Wongsunkakon
and Jirayu Loetcharoenwanich.
<br>
<br>
</p>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>