-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (99 loc) · 4.31 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style/main.css" charset="utf-8">
<!-- <link rel="stylesheet" href="css/fonts.css" charset="utf-8"> -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css" media="screen" title="no title" charset="utf-8">
<title>fontwr</title>
</head>
<body>
<section>
<article class="presentation">
<h1 class="welcome">Welcome to <strong>fontwr</strong>, a font manager for the web</h1>
<img src="img/fontwr.svg" alt="fontwr Logo" class="logo" />
<div class="github-stats">
<a class="github-button" href="https://github.com/raphaklaus/fontwr" data-icon="octicon-star" data-style="mega" data-count-href="/raphaklaus/fontwr/stargazers" data-count-api="/repos/raphaklaus/fontwr#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star raphaklaus/fontwr on GitHub">Star</a>
<a class="github-button" href="https://github.com/raphaklaus/fontwr" data-icon="octicon-eye" data-style="mega" data-count-href="/raphaklaus/fontwr/watchers" data-count-api="/repos/raphaklaus/fontwr#subscribers_count" data-count-aria-label="# watchers on GitHub" aria-label="Watch raphaklaus/fontwr on GitHub">Watch</a>
<a class="github-button" href="https://github.com/raphaklaus/fontwr/fork" data-icon="octicon-repo-forked" data-style="mega" data-count-href="/raphaklaus/fontwr/network" data-count-api="/repos/raphaklaus/fontwr#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork raphaklaus/fontwr on GitHub">Fork</a>
</div>
<!-- <img src="img/logo.png" alt="Logo" class="logo"/> -->
</article>
<article class="about">
<h2>What is it?</h2>
<p>
<strong>fontwr</strong> is a tool that helps front-end developers
download fonts, convert them, and transform into font-face!
There are more than <strong>800 fonts</strong> available in
<a href="https://github.com/raphaklaus/fontwr-fonts/" target="_blank">our repository</a> and growing!
</p>
<p>
<code>fontwr.json</code> hold all font settings, such as font family,
font-style, and formats (woff2, woff, eot, ttf). If you download a project, just run
<code>fontwr install</code> to get all fonts. Whether is a new project, just run commands
in your terminal to setup everything!
</p>
</article>
<article class="installing">
<h2>Installing</h2>
<p>
<code>
$ npm install fontwr -g
</code>
</p>
</article>
<article class="">
<h2>Usage</h2>
<p>
<code>
$ fontwr get roboto
</code>
Fetch all Roboto fonts family, prompt user what fonts to be downloaded and what formats.
</p>
<p>
<code>
$ fontwr get opensans -g
</code>
Install the font into system's font directory. Doesn't convert and generate font-face.
</p>
<p>
<code>
$ fontwr list
</code>
List all available fonts.
</p>
<h4>It's easy! See a gif!</h4>
<img src="img/fontwr-gif.gif" alt="fontwr working in a terminal" class="working-gif"/>
<h4>fontwr.json format</h4>
<pre><code>{
"fonts": {
"Roboto-Regular": {
"family": "roboto",
"format": [".woff2", ".woff", ".eot"]
},
"OpenSans-Light": {
"family": "opensans",
"format": [".woff2", ".woff"]
}
},
"systemFonts":{
"Nexa-Light": {
"format": [".woff2"]
},
"Comic Sans MS": {
"format": [".woff2"]
}
},
"output": {
"fonts": "fonts/",
"fontface": "css/"
}
}</code></pre>
</article>
</section>
<!-- Place this tag right after the last button or just before your close body tag. -->
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>