woff2base/index.html at main · hellogreg/woff2base · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Woff2Base: Convert .woff2 to accurate Base64 css.</title>
  <link rel="stylesheet" href="woff2base.css" rel="stylesheet" />
</head>

<body>
  <div class="page">
    <header>
      <h1>Woff2Base: Convert fonts to Base64</h1>
    </header>
    <main>
      <p><em>This simple tool converts .woff2 font files to Base64 strings to include directly in your CSS files. To use it, click the "Choose File" button and select a font from your computer. You can then copy/paste the code below into your CSS file.</em></p>
      <h2>Current Font:&nbsp;<span id="currentfont">*None*</span></h2>
      <p><label for="fontinput">Change font:</label> <input type="file" id="fontinput" name="fontinput"></p>
      <!--<p><button id="copycss">Copy the CSS code</button> <button id="copydata">Copy only raw font data</button></p>-->
      <textarea id="csscode" name="csscode" rows="12" onclick="this.select()" readonly="readonly"></textarea>
      <h2>Notes</h2>
      <ul>
      <li>Woff2Base now converts .ttf and .woff, too.</li>
      <li>If you just want the raw Base64 string, and not the CSS, you can view it in (and copy it from) your browser console.</li>
      <li><a href="https://github.com/hellogreg/woff2base">View this project on GitHub.</a></li>
      <li>This tool uses <a href="https://github.com/foliojs/fontkit">fontkit</a> to parse font names.</li>
      <li>This project was created by me, <a href="http://hellogreg.org">Greg Gibson</a>, because some of the other converters out there introduced minor errors when converting.</li>
      </ul>
    </main>
    <footer>
    </footer>
  </div>
</body>
<script src="fontkit.min.js"></script>
<script src="woff2base.js"></script>

</html>