This repository has been archived by the owner on Dec 4, 2017. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
88 lines (86 loc) · 4.3 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Mapbox GL Fonts</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" type="text/css">
<style>
body {
font-size: 1.6em;
}
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%, 100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}
@media (max-width: 500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
</style>
</head>
<body>
<a href="https://github.com/lukasmartinelli/mapbox-gl-free-fonts" class="github-corner">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
</a>
<div class="container">
<div class="row">
<h1>
<span>Free Mapbox GL Fonts</span>
<iframe src="https://ghbtns.com/github-btn.html?user=lukasmartinelli&repo=mapbox-gl-free-fonts&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</h1>
<p>
<a href="https://www.mapbox.com/mapbox-gl-style-spec/#glyphs">Configuring fonts in Mapbox GL</a> without using the Mapbox API is a pain and struggle.
No one should need to know how the fonts are packaged in order to use Mapbox GL without Mapbox.
This project packages the most common free fonts with <a href="https://github.com/mapbox/fontnik">fontnik</a> so you don't have to worry about <a href="https://www.mapbox.com/blog/text-signed-distance-fields/">SDL</a> and <a href="https://github.com/mapbox/mapbox-gl-js/issues/830">gzipped PBFs</a>.
</p>
<h2>Configure Mapbox GL Style JSON</h2>
<p>
Your current Mapbox GL Style JSON configuration for <code>glyphs</code> will look like this.
</p>
<pre><code>"glyphs": "mapbox://fonts/morgenkaffee/{fontstack}/{range}.pbf",</code></pre>
<p>
In order to use the fonts without a Mapbox API key edit your Mapbox GL Style JSON
and change the endpoint for <code>glyphs</code> to <code>http://glfonts.lukasmartinelli.ch/fonts/{fontstack}/{range}.pbf</code>.
</p>
<pre><code>"glyphs": "http://glfonts.lukasmartinelli.ch/fonts/{fontstack}/{range}.pbf",</code></pre>
<h2>Supported Fonts</h2>
<p>The following fonts that are available in Mapbox Studio are supported.</p>
<ul>
<li>Open Sans13Selected</li>
<li>Open Sans Regular</li>
<li>Open Sans Semibold</li>
<li>Open Sans Bold</li>
<li>Open Sans Extrabold</li>
<li>Open Sans Light</li>
<li>Open Sans Condensed Bold</li>
<li>Open Sans Italic</li>
<li>Open Sans Semibold Italic</li>
<li>Open Sans Condensed Light</li>
<li>Open Sans Bold Italic</li>
<li>Open Sans Extrabold Italic</li>
<li>Open Sans Light Italic</li>
<li>Open Sans Condensed Light Italic</li>
<li>PT Sans</li>
<li>Roboto</li>
</ul>
</div>
</div>
</body>
</html>