source for lucas.co
polishing
How_to_use_webfonts.html | 230 ++++++++++
SIL Open Font License.txt | 43 ++
files.html | 13 +
fonts/abhaya-libre/How_to_use_webfonts.html | 230 ++++++++++
fonts/abhaya-libre/SIL Open Font License.txt | 43 ++
.../AbhayaLibre-Bold-demo.html | 372 +++++++++++++++
.../AbhayaLibre-Bold-webfont.woff | Bin 0 -> 26956 bytes
.../specimen_files/grid_12-825-55-15.css | 129 ++++++
.../specimen_files/specimen_stylesheet.css | 396 ++++++++++++++++
.../abhayalibre_bold_macroman/stylesheet.css | 13 +
.../AbhayaLibre-ExtraBold-demo.html | 372 +++++++++++++++
.../AbhayaLibre-ExtraBold-webfont.woff | Bin 0 -> 26816 bytes
.../specimen_files/grid_12-825-55-15.css | 129 ++++++
.../specimen_files/specimen_stylesheet.css | 396 ++++++++++++++++
.../abhayalibre_extrabold_macroman/stylesheet.css | 13 +
.../AbhayaLibre-Medium-demo.html | 372 +++++++++++++++
.../AbhayaLibre-Medium-webfont.woff | Bin 0 -> 27436 bytes
.../specimen_files/grid_12-825-55-15.css | 129 ++++++
.../specimen_files/specimen_stylesheet.css | 396 ++++++++++++++++
.../abhayalibre_medium_macroman/stylesheet.css | 13 +
.../AbhayaLibre-Regular-demo.html | 372 +++++++++++++++
.../AbhayaLibre-Regular-webfont.woff | Bin 0 -> 27024 bytes
.../specimen_files/grid_12-825-55-15.css | 129 ++++++
.../specimen_files/specimen_stylesheet.css | 396 ++++++++++++++++
.../abhayalibre_regular_macroman/stylesheet.css | 13 +
.../AbhayaLibre-SemiBold-demo.html | 372 +++++++++++++++
.../AbhayaLibre-SemiBold-webfont.woff | Bin 0 -> 27352 bytes
.../specimen_files/grid_12-825-55-15.css | 129 ++++++
.../specimen_files/specimen_stylesheet.css | 396 ++++++++++++++++
.../abhayalibre_semibold_macroman/stylesheet.css | 13 +
fonts/alegreya/Alegreya-Black.woff | Bin 0 -> 38340 bytes
fonts/alegreya/Alegreya-Black.woff2 | Bin 0 -> 26536 bytes
fonts/alegreya/Alegreya-BlackItalic.woff | Bin 0 -> 38252 bytes
fonts/alegreya/Alegreya-BlackItalic.woff2 | Bin 0 -> 26564 bytes
fonts/alegreya/Alegreya-Bold.woff | Bin 0 -> 40748 bytes
fonts/alegreya/Alegreya-Bold.woff2 | Bin 0 -> 28752 bytes
fonts/alegreya/Alegreya-BoldItalic.woff | Bin 0 -> 39968 bytes
fonts/alegreya/Alegreya-BoldItalic.woff2 | Bin 0 -> 27996 bytes
fonts/alegreya/Alegreya-Italic.woff | Bin 0 -> 40032 bytes
fonts/alegreya/Alegreya-Italic.woff2 | Bin 0 -> 27812 bytes
fonts/alegreya/Alegreya-Regular.woff | Bin 0 -> 40088 bytes
fonts/alegreya/Alegreya-Regular.woff2 | Bin 0 -> 27776 bytes
fonts/alegreya/AlegreyaSC-Black.woff | Bin 0 -> 37600 bytes
fonts/alegreya/AlegreyaSC-Black.woff2 | Bin 0 -> 25988 bytes
fonts/alegreya/AlegreyaSC-BlackItalic.woff | Bin 0 -> 38476 bytes
fonts/alegreya/AlegreyaSC-BlackItalic.woff2 | Bin 0 -> 26616 bytes
fonts/alegreya/AlegreyaSC-Bold.woff | Bin 0 -> 39484 bytes
fonts/alegreya/AlegreyaSC-Bold.woff2 | Bin 0 -> 27916 bytes
fonts/alegreya/AlegreyaSC-BoldItalic.woff | Bin 0 -> 39776 bytes
fonts/alegreya/AlegreyaSC-BoldItalic.woff2 | Bin 0 -> 27912 bytes
fonts/alegreya/AlegreyaSC-Italic.woff | Bin 0 -> 40156 bytes
fonts/alegreya/AlegreyaSC-Italic.woff2 | Bin 0 -> 27952 bytes
fonts/alegreya/AlegreyaSC-Regular.woff | Bin 0 -> 38940 bytes
fonts/alegreya/AlegreyaSC-Regular.woff2 | Bin 0 -> 27068 bytes
fonts/alegreya/SIL Open Font License.txt | 44 ++
fonts/alegreya/demo.html | 511 +++++++++++++++++++++
fonts/alegreya/stylesheet.css | 108 +++++
fonts/alice/How_to_use_webfonts.html | 230 ++++++++++
fonts/alice/SIL Open Font License.txt | 43 ++
.../alice_regular_macroman/Alice-Regular-demo.html | 372 +++++++++++++++
.../Alice-Regular-webfont.woff | Bin 0 -> 36888 bytes
.../specimen_files/grid_12-825-55-15.css | 129 ++++++
.../specimen_files/specimen_stylesheet.css | 396 ++++++++++++++++
.../alice_regular_macroman/stylesheet.css | 13 +
fonts/belda/Web Font EULA 2.0.txt | 90 ++++
fonts/belda/beldanormregular-demo.html | 391 ++++++++++++++++
fonts/belda/beldanormregular-webfont.woff | Bin 0 -> 39092 bytes
fonts/belda/beldanormregular-webfont.woff2 | Bin 0 -> 31168 bytes
fonts/belda/specimen_files/grid_12-825-55-15.css | 129 ++++++
fonts/belda/specimen_files/specimen_stylesheet.css | 392 ++++++++++++++++
fonts/belda/stylesheet.css | 33 ++
fonts/bellefair/Bellefair-Regular.woff | Bin 0 -> 33932 bytes
fonts/bellefair/Bellefair-Regular.woff2 | Bin 0 -> 24532 bytes
fonts/bellefair/SIL Open Font License.txt | 44 ++
fonts/bellefair/demo.html | 192 ++++++++
fonts/bellefair/stylesheet.css | 9 +
fonts/benne/Benne-Regular.woff | Bin 0 -> 103516 bytes
fonts/benne/Benne-Regular.woff2 | Bin 0 -> 69468 bytes
fonts/benne/demo.html | 192 ++++++++
fonts/benne/stylesheet.css | 9 +
fonts/butler/Butler-Black.woff | Bin 0 -> 25184 bytes
fonts/butler/Butler-Black.woff2 | Bin 0 -> 18604 bytes
fonts/butler/Butler-Bold.woff | Bin 0 -> 24764 bytes
fonts/butler/Butler-Bold.woff2 | Bin 0 -> 18344 bytes
fonts/butler/Butler-ExtraBold.woff | Bin 0 -> 25784 bytes
fonts/butler/Butler-ExtraBold.woff2 | Bin 0 -> 19392 bytes
fonts/butler/Butler-Light.woff | Bin 0 -> 26344 bytes
fonts/butler/Butler-Light.woff2 | Bin 0 -> 19684 bytes
fonts/butler/Butler-Medium.woff | Bin 0 -> 26180 bytes
fonts/butler/Butler-Medium.woff2 | Bin 0 -> 19576 bytes
fonts/butler/Butler-UltraLight.woff | Bin 0 -> 25200 bytes
fonts/butler/Butler-UltraLight.woff2 | Bin 0 -> 18508 bytes
fonts/butler/Butler.woff | Bin 0 -> 25592 bytes
fonts/butler/Butler.woff2 | Bin 0 -> 19220 bytes
fonts/butler/demo.html | 363 +++++++++++++++
fonts/butler/stylesheet.css | 56 +++
fonts/cardo/Cardo-Bold.woff | Bin 0 -> 191344 bytes
fonts/cardo/Cardo-Bold.woff2 | Bin 0 -> 134340 bytes
fonts/cardo/Cardo-Italic.woff | Bin 0 -> 152364 bytes
fonts/cardo/Cardo-Italic.woff2 | Bin 0 -> 106960 bytes
fonts/cardo/Cardo-Regular.woff | Bin 0 -> 223428 bytes
fonts/cardo/Cardo-Regular.woff2 | Bin 0 -> 147316 bytes
fonts/cardo/demo.html | 250 ++++++++++
fonts/cardo/stylesheet.css | 27 ++
fonts/caudex/Caudex-Bold.woff | Bin 0 -> 200444 bytes
fonts/caudex/Caudex-Bold.woff2 | Bin 0 -> 114692 bytes
fonts/caudex/Caudex-BoldItalic.woff | Bin 0 -> 237540 bytes
fonts/caudex/Caudex-BoldItalic.woff2 | Bin 0 -> 132080 bytes
fonts/caudex/Caudex-Italic.woff | Bin 0 -> 232484 bytes
fonts/caudex/Caudex-Italic.woff2 | Bin 0 -> 129044 bytes
fonts/caudex/Caudex-Regular.woff | Bin 0 -> 191680 bytes
fonts/caudex/Caudex-Regular.woff2 | Bin 0 -> 109632 bytes
fonts/caudex/demo.html | 279 +++++++++++
fonts/caudex/stylesheet.css | 36 ++
.../CHANTICL-demo.html | 372 +++++++++++++++
.../CHANTICL-webfont.woff | Bin 0 -> 29776 bytes
.../specimen_files/CHANTICL-cleartype.png | Bin 0 -> 85245 bytes
.../specimen_files/grid_12-825-55-15.css | 129 ++++++
.../specimen_files/specimen_stylesheet.css | 396 ++++++++++++++++
.../stylesheet.css | 13 +
fonts/mauren/Web Font EULA 2.0.txt | 90 ++++
fonts/mauren/mauren-light-webfont.woff | Bin 0 -> 32564 bytes
fonts/mauren/mauren-light-webfont.woff2 | Bin 0 -> 26188 bytes
fonts/mauren/mauren-regular-webfont.woff | Bin 0 -> 32596 bytes
fonts/mauren/mauren-regular-webfont.woff2 | Bin 0 -> 26140 bytes
fonts/mauren/mauren-thin-webfont.woff | Bin 0 -> 31504 bytes
fonts/mauren/mauren-thin-webfont.woff2 | Bin 0 -> 24996 bytes
fonts/old_standard/OldStandardTT-Bold.woff | Bin 0 -> 137708 bytes
fonts/old_standard/OldStandardTT-Bold.woff2 | Bin 0 -> 99768 bytes
fonts/old_standard/OldStandardTT-Italic.woff | Bin 0 -> 155892 bytes
fonts/old_standard/OldStandardTT-Italic.woff2 | Bin 0 -> 113908 bytes
fonts/old_standard/OldStandardTT-Regular.woff | Bin 0 -> 145288 bytes
fonts/old_standard/OldStandardTT-Regular.woff2 | Bin 0 -> 105868 bytes
fonts/old_standard/demo.html | 250 ++++++++++
fonts/old_standard/stylesheet.css | 27 ++
fonts/seshat/Seshat-demo.html | 372 +++++++++++++++
fonts/seshat/Seshat-webfont.woff | Bin 0 -> 27228 bytes
fonts/seshat/specimen_files/grid_12-825-55-15.css | 129 ++++++
.../seshat/specimen_files/specimen_stylesheet.css | 396 ++++++++++++++++
fonts/seshat/stylesheet.css | 13 +
index.html | 3 +-
main.js | 4 +-
styles.css | 15 +-
143 files changed, 11646 insertions(+), 10 deletions(-)
diff --git a/How_to_use_webfonts.html b/How_to_use_webfonts.html
new file mode 100644
index 0000000..653499c
--- /dev/null
+++ b/How_to_use_webfonts.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
+
+ <style type="text/css" media="screen">
+ /*-- RESET ------*/
+ html, body, div, span, applet, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ a, abbr, acronym, address, big, cite, code,
+ del, dfn, em, font, img, ins, kbd, q, s, samp,
+ small, strike, strong, sub, sup, tt, var,
+ b, u, i, center, dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend, table,
+ caption, tbody, tfoot, thead, tr, th, td
+ {margin: 0;padding: 0;border: 0;outline: 0;
+ font-size: 100%;vertical-align: baseline;
+ background: transparent;}
+ body {line-height: 1;}
+ ol, ul {list-style: none;}
+ blockquote, q {quotes: none;}
+ blockquote:before, blockquote:after,
+ q:before, q:after {content: ''; content: none;}
+ :focus {outline: 0;}
+ ins {text-decoration: none;}
+ del {text-decoration: line-through;}
+ table {border-collapse: collapse;border-spacing: 0;}
+
+ /*-- GRID -----*/
+ .section {margin-bottom: 18px;
+ }
+ .section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
+ .section {*zoom: 1;}
+
+ .section .firstcolumn,
+ .section .firstcol {margin-left: 0;}
+
+ .grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
+ {margin-left: 15px;float: left;display: inline; overflow: hidden;}
+ .width5, .grid5, .span-5 {width: 335px;}
+ .width5_2cols,.grid5_2cols {width: 160px;}
+ .width5_3cols,.grid5_3cols {width: 101px;}
+ .width5_4cols,.grid5_4cols {width: 72px;}
+ .input_width5 {width: 329px;}
+
+ .width6, .grid6, .span-6 {width: 405px;}
+ .width6_4cols,.grid6_4cols {width: 90px;}
+ .input_width6 {width: 399px;}
+
+ .width7, .grid7, .span-7 {width: 475px;}
+ .width7_2cols,.grid7_2cols {width: 230px;}
+ .width7_3cols,.grid7_3cols {width: 148px;}
+ .width7_4cols,.grid7_4cols {width: 107px;}
+ .input_width7 {width: 469px;}
+
+ /*-- STYLES -----*/
+ body {
+ color: #000;
+ background-color: #dcdcdc;
+ font: 13px Arial, sans-serif;
+ }
+
+ a {
+ text-decoration: none;
+ color: #1883ba;
+ }
+
+ h1{
+ font-size: 32px;
+ font-weight: normal;
+ font-style: normal;
+ margin-bottom: 18px;
+ }
+
+ h2{
+ font-size: 18px;
+ }
+
+ #container {
+ width: 865px;
+ margin: 0px auto;
+ }
+
+
+
+ #header {
+ height:109px;
+ font-size: 36px;
+ background-color: #000;
+ color: #fff;
+ text-indent:-9999px;
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAABtCAMAAAAhztx9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRFzen3mNLwDCc17fj8GVRwUbXlLprOrNzyesbrEjtOZb3oJXulP63iAAAA////MqfgopnD5wAABSNJREFUeNrs2u1yqyAQBmBARATU+7/bo6CRTwMp7ZnJvPurjUbrU1gWkGyIyiAgABWoQAUqUIEKASpQgQpUoAIVAlSgAhWoQAUqxJdSCbYsHFQ1MS/Lr1h9IRU7qBZQVVNpUL0PDao2K1BVJ/ZjKORdyb6SSiwLc0VDT6uvohKcMS72H/gyn0VDx7Lhq6hsM2LiyFZ6404KrSobzuawWoQ4pRhyVZnKdj7b/djMO1btX0V197m9UbHe5cJ3jYB7Wj873TwL1FUVw+CR1DEHrMT6jct+59Ke1qD6nwGqn1HpTATJQPN9rGGcR+1caC1y17oOPl/XSDoRQiiV4/2ZumMML6zKh4z/UXLUfTX+iNL93hOl6dmPVGxJwkuUevY+5yJc/WAiLQvZvTSSxnXeSNY7hul6gnUNPvaecA0PEek99/4Bvc8b4qc/vhDQ0qF0l59QiTk6osOFIvYZFQ2ffM1S7UFMnmr1RSKqdTCPVHKIb9KFSqTHeEB1TCvaqWKpItVttZatYqr42UMqmt6jjYqHoQNF96vQ0YpQbqn2RSWuS7kdlStc77NPeuaoUVHiU+3Zy8Vk//uT97w0PERKVK8vZaik07luLvebN1I9zLK8OYPDEcFvoVXaJ3W6oTLF/0qTe+jN2Hw25pqGOS6xyhLVKktUo0Wm4ajQgUokPUz7XfDqY6KV6vhzTe6GIdVmhvv3ODcPd+PJUK2qQDUlkM0jYL4KjiHOdhZR+cNgFVUxP0RUfvOLqeh9KEflD4PeV8ekTXWimjMLsF6XOxDmqOH1pZJlKlWmIiQYOzdyf5VmBsguVGmjCvi0zfjhqNiXSn1GZRMSyVGRJOf3odK5HW6vmLJU0TZcda6SP6SSD1Sun00ZqiFKYz2p2Fsqt1WiW0fAdRrfU9EyFSmndXKWBDKhMvFVPqFifvAHKnE/+Unlii/RQGWGc3ay11DKPFB5HnHJ/VAskPO/caX2m+o4c/gpVa5W59lttZTKlvTnMFhFdVY3V7EsS1Q0X1cZJW3FdeXnHJX1OU8Iqcj/pPJnOHVU8Yw1N0UxzoMUJzavDpalMvcwWKC6Z1H076i8yrSS6pxTkCG0UuWJXlkqT+Va7vQLVNVpXeSoXGWqm6iupOO3HVVePkjmuOP2TOXSGS3nql+nSkfAV7l1WDVTnY805qgGb5T0p8vRkF+gcqlOFkfA0V6LdKNaKqm2M7V/QGUfRaUrC1SV5rw0zM4lqmsYfKyraBeqqmo96JjsI6rp9deq8gzNpzJhDVukOofBx2q9E1XFHDBe6PuEirZS2T57T+XKVNaUPM4BO1FVrCzw6Oyfd8Aaqm3wTyxT3QVccWWhE1XFehWPGdupxjCtV1HJpwVjEo8ZT+tVnagqVkF53GFrqILZn927IVsbVZB0lJ+A4nqchlTJKmgvqvdr6wGVYHVUZJikm/sZ5ZbJZSuV8pY6g2opmbqQ9WFt3U2RulC93bHhaY+toIrryWlrpdq8tmgz1zAVqNwKfdolvehC9XYfkL+tWiuo6NZONXqNka7BYg3JzM2f9gE7Ub3ZXU5qCV1DJQOradw+oHL1pcmtwZPMuPEwV2/ZXY7fUUhaln1nYc69s5B9aSE9S+cmy9S+saDCfSZVeokgefHAvt9gXpOUaXqdl1xhTN5ZGF/vLJimRRgEqEAFKlCBClQIUIEKVKACFahAhQAVqEAFKlCBCgEqUIEKVKACFQJUoAIVqEAFKgSoQAUqUIEKVKBCgApUfx3/BBgAeuw63hnBp0AAAAAASUVORK5CYII=) no-repeat left center;
+ background-color: #31a7e0;
+
+ }
+
+ #main_content {
+ background-color: #fff;
+ padding: 20px 20px 20px;
+ }
+
+
+ #footer p {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 50px;
+ color: #333;
+ font: 10px Arial, sans-serif;
+ }
+ code {
+ white-space: pre;
+ background-color: #eee;
+ display: block;
+ padding: 10px;
+ margin-bottom: 18px;
+ overflow: auto;
+ }
+
+ .box {
+ padding: 18px;
+ margin-bottom: 18px;
+ background: #eee;
+ }
+ .bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
+
+
+
+ p{
+ line-height: 1.2em;
+ margin-bottom: 18px;
+ font: 13px Arial, sans-serif;
+ }
+
+
+
+ h3{
+ font-size: 15px;
+ margin-top: 18px;
+ }
+
+ .sidebar p{
+ font-size: 12px;
+ line-height: 1.4em;
+ }
+
+ </style>
+
+<title>How to Use Webfonts</title>
+
+</head>
+
+<body>
+<div id="container">
+ <div id="header">
+ Fontspring
+ </div>
+ <div id="main_content">
+ <div class="section">
+ <div class="grid7 firstcol">
+ <h1>Installing Webfonts</h1>
+
+ <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+ <h2>1. Upload your webfonts</h2>
+ <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+ <h2>2. Include the webfont stylesheet</h2>
+ <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{
+ font-family: 'MyWebFont';
+ src: url('WebFont.eot');
+ src: url('WebFont.eot?iefix') format('eot'),
+ url('WebFont.woff') format('woff'),
+ url('WebFont.ttf') format('truetype'),
+ url('WebFont.svg#webfont') format('svg');
+}
+</code>
+ <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+ <code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
+
+ <h2>3. Modify your own stylesheet</h2>
+ <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'MyWebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+ </div>
+
+ <div class="grid5 sidebar">
+ <div class="box">
+ <h2>Troubleshooting<br />Font-Face Problems</h2>
+ <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+ <h3>Fonts not showing in any browser</h3>
+
+ <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+ <h3>Fonts not loading in iPhone or iPad</h3>
+
+ <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+ <h3>Fonts not loading in Firefox</h3>
+
+ <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+ <h3>Fonts not loading in IE</h3>
+
+ <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+ <h3>Fonts not loading in IE9</h3>
+
+ <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+
+</div>
+</body>
+</html>
diff --git a/SIL Open Font License.txt b/SIL Open Font License.txt
new file mode 100644
index 0000000..6873bd6
--- /dev/null
+++ b/SIL Open Font License.txt
@@ -0,0 +1,43 @@
+Copyright (c) 2013-2016 Abhaya Libre Project Authors (https://github.com/mooniak/abhaya-libre-font).
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
\ No newline at end of file
diff --git a/files.html b/files.html
index e69de29..e7bff0e 100644
--- a/files.html
+++ b/files.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<link rel="stylesheet" href="/styles.css">
+<!-- <script src="/main.js"></script> -->
+</head>
+<body>
+<!-- <a id="files" href="https://lucas.co/files.html">Files</a> -->
+<!-- <div id="mode"></div> -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/fonts/abhaya-libre/How_to_use_webfonts.html b/fonts/abhaya-libre/How_to_use_webfonts.html
new file mode 100644
index 0000000..653499c
--- /dev/null
+++ b/fonts/abhaya-libre/How_to_use_webfonts.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
+
+ <style type="text/css" media="screen">
+ /*-- RESET ------*/
+ html, body, div, span, applet, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ a, abbr, acronym, address, big, cite, code,
+ del, dfn, em, font, img, ins, kbd, q, s, samp,
+ small, strike, strong, sub, sup, tt, var,
+ b, u, i, center, dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend, table,
+ caption, tbody, tfoot, thead, tr, th, td
+ {margin: 0;padding: 0;border: 0;outline: 0;
+ font-size: 100%;vertical-align: baseline;
+ background: transparent;}
+ body {line-height: 1;}
+ ol, ul {list-style: none;}
+ blockquote, q {quotes: none;}
+ blockquote:before, blockquote:after,
+ q:before, q:after {content: ''; content: none;}
+ :focus {outline: 0;}
+ ins {text-decoration: none;}
+ del {text-decoration: line-through;}
+ table {border-collapse: collapse;border-spacing: 0;}
+
+ /*-- GRID -----*/
+ .section {margin-bottom: 18px;
+ }
+ .section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
+ .section {*zoom: 1;}
+
+ .section .firstcolumn,
+ .section .firstcol {margin-left: 0;}
+
+ .grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
+ {margin-left: 15px;float: left;display: inline; overflow: hidden;}
+ .width5, .grid5, .span-5 {width: 335px;}
+ .width5_2cols,.grid5_2cols {width: 160px;}
+ .width5_3cols,.grid5_3cols {width: 101px;}
+ .width5_4cols,.grid5_4cols {width: 72px;}
+ .input_width5 {width: 329px;}
+
+ .width6, .grid6, .span-6 {width: 405px;}
+ .width6_4cols,.grid6_4cols {width: 90px;}
+ .input_width6 {width: 399px;}
+
+ .width7, .grid7, .span-7 {width: 475px;}
+ .width7_2cols,.grid7_2cols {width: 230px;}
+ .width7_3cols,.grid7_3cols {width: 148px;}
+ .width7_4cols,.grid7_4cols {width: 107px;}
+ .input_width7 {width: 469px;}
+
+ /*-- STYLES -----*/
+ body {
+ color: #000;
+ background-color: #dcdcdc;
+ font: 13px Arial, sans-serif;
+ }
+
+ a {
+ text-decoration: none;
+ color: #1883ba;
+ }
+
+ h1{
+ font-size: 32px;
+ font-weight: normal;
+ font-style: normal;
+ margin-bottom: 18px;
+ }
+
+ h2{
+ font-size: 18px;
+ }
+
+ #container {
+ width: 865px;
+ margin: 0px auto;
+ }
+
+
+
+ #header {
+ height:109px;
+ font-size: 36px;
+ background-color: #000;
+ color: #fff;
+ text-indent:-9999px;
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAABtCAMAAAAhztx9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRFzen3mNLwDCc17fj8GVRwUbXlLprOrNzyesbrEjtOZb3oJXulP63iAAAA////MqfgopnD5wAABSNJREFUeNrs2u1yqyAQBmBARATU+7/bo6CRTwMp7ZnJvPurjUbrU1gWkGyIyiAgABWoQAUqUIEKASpQgQpUoAIVAlSgAhWoQAUqxJdSCbYsHFQ1MS/Lr1h9IRU7qBZQVVNpUL0PDao2K1BVJ/ZjKORdyb6SSiwLc0VDT6uvohKcMS72H/gyn0VDx7Lhq6hsM2LiyFZ6404KrSobzuawWoQ4pRhyVZnKdj7b/djMO1btX0V197m9UbHe5cJ3jYB7Wj873TwL1FUVw+CR1DEHrMT6jct+59Ke1qD6nwGqn1HpTATJQPN9rGGcR+1caC1y17oOPl/XSDoRQiiV4/2ZumMML6zKh4z/UXLUfTX+iNL93hOl6dmPVGxJwkuUevY+5yJc/WAiLQvZvTSSxnXeSNY7hul6gnUNPvaecA0PEek99/4Bvc8b4qc/vhDQ0qF0l59QiTk6osOFIvYZFQ2ffM1S7UFMnmr1RSKqdTCPVHKIb9KFSqTHeEB1TCvaqWKpItVttZatYqr42UMqmt6jjYqHoQNF96vQ0YpQbqn2RSWuS7kdlStc77NPeuaoUVHiU+3Zy8Vk//uT97w0PERKVK8vZaik07luLvebN1I9zLK8OYPDEcFvoVXaJ3W6oTLF/0qTe+jN2Hw25pqGOS6xyhLVKktUo0Wm4ajQgUokPUz7XfDqY6KV6vhzTe6GIdVmhvv3ODcPd+PJUK2qQDUlkM0jYL4KjiHOdhZR+cNgFVUxP0RUfvOLqeh9KEflD4PeV8ekTXWimjMLsF6XOxDmqOH1pZJlKlWmIiQYOzdyf5VmBsguVGmjCvi0zfjhqNiXSn1GZRMSyVGRJOf3odK5HW6vmLJU0TZcda6SP6SSD1Sun00ZqiFKYz2p2Fsqt1WiW0fAdRrfU9EyFSmndXKWBDKhMvFVPqFifvAHKnE/+Unlii/RQGWGc3ay11DKPFB5HnHJ/VAskPO/caX2m+o4c/gpVa5W59lttZTKlvTnMFhFdVY3V7EsS1Q0X1cZJW3FdeXnHJX1OU8Iqcj/pPJnOHVU8Yw1N0UxzoMUJzavDpalMvcwWKC6Z1H076i8yrSS6pxTkCG0UuWJXlkqT+Va7vQLVNVpXeSoXGWqm6iupOO3HVVePkjmuOP2TOXSGS3nql+nSkfAV7l1WDVTnY805qgGb5T0p8vRkF+gcqlOFkfA0V6LdKNaKqm2M7V/QGUfRaUrC1SV5rw0zM4lqmsYfKyraBeqqmo96JjsI6rp9deq8gzNpzJhDVukOofBx2q9E1XFHDBe6PuEirZS2T57T+XKVNaUPM4BO1FVrCzw6Oyfd8Aaqm3wTyxT3QVccWWhE1XFehWPGdupxjCtV1HJpwVjEo8ZT+tVnagqVkF53GFrqILZn927IVsbVZB0lJ+A4nqchlTJKmgvqvdr6wGVYHVUZJikm/sZ5ZbJZSuV8pY6g2opmbqQ9WFt3U2RulC93bHhaY+toIrryWlrpdq8tmgz1zAVqNwKfdolvehC9XYfkL+tWiuo6NZONXqNka7BYg3JzM2f9gE7Ub3ZXU5qCV1DJQOradw+oHL1pcmtwZPMuPEwV2/ZXY7fUUhaln1nYc69s5B9aSE9S+cmy9S+saDCfSZVeokgefHAvt9gXpOUaXqdl1xhTN5ZGF/vLJimRRgEqEAFKlCBClQIUIEKVKACFahAhQAVqEAFKlCBCgEqUIEKVKACFQJUoAIVqEAFKgSoQAUqUIEKVKBCgApUfx3/BBgAeuw63hnBp0AAAAAASUVORK5CYII=) no-repeat left center;
+ background-color: #31a7e0;
+
+ }
+
+ #main_content {
+ background-color: #fff;
+ padding: 20px 20px 20px;
+ }
+
+
+ #footer p {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 50px;
+ color: #333;
+ font: 10px Arial, sans-serif;
+ }
+ code {
+ white-space: pre;
+ background-color: #eee;
+ display: block;
+ padding: 10px;
+ margin-bottom: 18px;
+ overflow: auto;
+ }
+
+ .box {
+ padding: 18px;
+ margin-bottom: 18px;
+ background: #eee;
+ }
+ .bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
+
+
+
+ p{
+ line-height: 1.2em;
+ margin-bottom: 18px;
+ font: 13px Arial, sans-serif;
+ }
+
+
+
+ h3{
+ font-size: 15px;
+ margin-top: 18px;
+ }
+
+ .sidebar p{
+ font-size: 12px;
+ line-height: 1.4em;
+ }
+
+ </style>
+
+<title>How to Use Webfonts</title>
+
+</head>
+
+<body>
+<div id="container">
+ <div id="header">
+ Fontspring
+ </div>
+ <div id="main_content">
+ <div class="section">
+ <div class="grid7 firstcol">
+ <h1>Installing Webfonts</h1>
+
+ <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+ <h2>1. Upload your webfonts</h2>
+ <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+ <h2>2. Include the webfont stylesheet</h2>
+ <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{
+ font-family: 'MyWebFont';
+ src: url('WebFont.eot');
+ src: url('WebFont.eot?iefix') format('eot'),
+ url('WebFont.woff') format('woff'),
+ url('WebFont.ttf') format('truetype'),
+ url('WebFont.svg#webfont') format('svg');
+}
+</code>
+ <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+ <code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
+
+ <h2>3. Modify your own stylesheet</h2>
+ <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'MyWebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+ </div>
+
+ <div class="grid5 sidebar">
+ <div class="box">
+ <h2>Troubleshooting<br />Font-Face Problems</h2>
+ <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+ <h3>Fonts not showing in any browser</h3>
+
+ <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+ <h3>Fonts not loading in iPhone or iPad</h3>
+
+ <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+ <h3>Fonts not loading in Firefox</h3>
+
+ <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+ <h3>Fonts not loading in IE</h3>
+
+ <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+ <h3>Fonts not loading in IE9</h3>
+
+ <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+
+</div>
+</body>
+</html>
diff --git a/fonts/abhaya-libre/SIL Open Font License.txt b/fonts/abhaya-libre/SIL Open Font License.txt
new file mode 100644
index 0000000..6873bd6
--- /dev/null
+++ b/fonts/abhaya-libre/SIL Open Font License.txt
@@ -0,0 +1,43 @@
+Copyright (c) 2013-2016 Abhaya Libre Project Authors (https://github.com/mooniak/abhaya-libre-font).
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
\ No newline at end of file
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/AbhayaLibre-Bold-demo.html b/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/AbhayaLibre-Bold-demo.html
new file mode 100644
index 0000000..84467e0
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/AbhayaLibre-Bold-demo.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript">
+ (function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
+ if(typeof param.defaultContent=="number")
+ {var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
+ $(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
+ function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
+ {$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
+ $(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
+ </script>
+ <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
+
+ <style type="text/css">
+ body{
+ font-family: 'abhaya_librebold';
+ }
+</style>
+
+<title>Abhaya Libre Bold Specimen</title>
+
+
+ <script type="text/javascript" charset="utf-8">
+ $(document).ready(function() {
+ $('#container').easyTabs({defaultContent:1});
+ });
+ </script>
+</head>
+
+<body>
+<div id="container">
+ <div id="header">
+ Abhaya Libre Bold </div>
+ <ul class="tabs">
+ <li><a href="#specimen">Specimen</a></li>
+ <li><a href="#layout">Sample Layout</a></li>
+ <li><a href="#installing">Installing Webfonts</a></li>
+
+ </ul>
+
+ <div id="main_content">
+
+
+ <div id="specimen">
+
+ <div class="section">
+ <div class="grid12 firstcol">
+ <div class="huge">AaBb</div>
+ </div>
+ </div>
+
+ <div class="section">
+ <div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
+ </div>
+ <div class="section">
+ <div class="grid12 firstcol">
+ <table class="sample_table">
+ <tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ </table>
+
+ </div>
+
+ </div>
+
+
+
+ <div class="section" id="bodycomparison">
+
+
+ <div id="xheight">
+ <div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
+ <div class="fontbody" style="z-index:1">
+ body<span>Abhaya Libre Bold</span>
+ </div>
+ <div class="arialbody" style="z-index:1">
+ body<span>Arial</span>
+ </div>
+ <div class="verdanabody" style="z-index:1">
+ body<span>Verdana</span>
+ </div>
+ <div class="georgiabody" style="z-index:1">
+ body<span>Georgia</span>
+ </div>
+
+
+
+ </div>
+
+
+ <div class="section psample psample_row1" id="">
+
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+ <div class="section psample psample_row2" id="">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row4" id="">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+
+
+
+ <div class="section psample psample_row1 fullreverse">
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row2 fullreverse">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+
+
+
+ </div>
+
+ <div id="layout">
+
+ <div class="section">
+
+ <div class="grid12 firstcol">
+ <h1>Lorem Ipsum Dolor</h1>
+ <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+ <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+ </div>
+ </div>
+ <div class="section">
+ <div class="grid8 firstcol">
+ <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+ <h3>Pellentesque ornare sem</h3>
+
+ <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+ <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+ <h3>Cras mattis consectetur</h3>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+ <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+
+ <div class="grid4 sidebar">
+
+ <div class="box reverse">
+ <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+ </div>
+
+ <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+ <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+ </div>
+ </div>
+
+ </div>
+
+
+
+
+
+
+
+
+
+ <div id="specs">
+
+ </div>
+
+ <div id="installing">
+ <div class="section">
+ <div class="grid7 firstcol">
+ <h1>Installing Webfonts</h1>
+
+ <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+ <h2>1. Upload your webfonts</h2>
+ <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+ <h2>2. Include the webfont stylesheet</h2>
+ <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{
+ font-family: 'MyWebFont';
+ src: url('WebFont.eot');
+ src: url('WebFont.eot?iefix') format('eot'),
+ url('WebFont.woff') format('woff'),
+ url('WebFont.ttf') format('truetype'),
+ url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+ <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+ <code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
+
+ <h2>3. Modify your own stylesheet</h2>
+ <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'MyWebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+ </div>
+
+ <div class="grid5 sidebar">
+ <div class="box">
+ <h2>Troubleshooting<br />Font-Face Problems</h2>
+ <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+ <h3>Fonts not showing in any browser</h3>
+
+ <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+ <h3>Fonts not loading in iPhone or iPad</h3>
+
+ <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+ <h3>Fonts not loading in Firefox</h3>
+
+ <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+ <h3>Fonts not loading in IE</h3>
+
+ <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+ <h3>Fonts not loading in IE9</h3>
+
+ <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+ <div id="footer">
+ <p>©2010-2011 Fontspring. All rights reserved.</p>
+ </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/AbhayaLibre-Bold-webfont.woff b/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/AbhayaLibre-Bold-webfont.woff
new file mode 100644
index 0000000..8743ff4
Binary files /dev/null and b/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/AbhayaLibre-Bold-webfont.woff differ
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/specimen_files/grid_12-825-55-15.css b/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/specimen_files/grid_12-825-55-15.css
new file mode 100644
index 0000000..3d6aef7
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/specimen_files/grid_12-825-55-15.css
@@ -0,0 +1,129 @@
+/*Notes about grid:
+Columns: 12
+Grid Width: 825px
+Column Width: 55px
+Gutter Width: 15px
+-------------------------------*/
+
+
+
+.section {margin-bottom: 18px;
+}
+.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
+.section {*zoom: 1;}
+
+.section .firstcolumn,
+.section .firstcol {margin-left: 0;}
+
+
+/* Border on left hand side of a column. */
+.border {
+ padding-left: 7px;
+ margin-left: 7px;
+ border-left: 1px solid #eee;
+}
+
+/* Border with more whitespace, spans one column. */
+.colborder {
+ padding-left: 42px;
+ margin-left: 42px;
+ border-left: 1px solid #eee;
+}
+
+
+
+/* The Grid Classes */
+.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
+{margin-left: 15px;float: left;display: inline; overflow: hidden;}
+
+
+.width1, .grid1, .span-1 {width: 55px;}
+.width1_2cols,.grid1_2cols {width: 20px;}
+.width1_3cols,.grid1_3cols {width: 8px;}
+.width1_4cols,.grid1_4cols {width: 2px;}
+.input_width1 {width: 49px;}
+
+.width2, .grid2, .span-2 {width: 125px;}
+.width2_3cols,.grid2_3cols {width: 31px;}
+.width2_4cols,.grid2_4cols {width: 20px;}
+.input_width2 {width: 119px;}
+
+.width3, .grid3, .span-3 {width: 195px;}
+.width3_2cols,.grid3_2cols {width: 90px;}
+.width3_4cols,.grid3_4cols {width: 37px;}
+.input_width3 {width: 189px;}
+
+.width4, .grid4, .span-4 {width: 265px;}
+.width4_3cols,.grid4_3cols {width: 78px;}
+.input_width4 {width: 259px;}
+
+.width5, .grid5, .span-5 {width: 335px;}
+.width5_2cols,.grid5_2cols {width: 160px;}
+.width5_3cols,.grid5_3cols {width: 101px;}
+.width5_4cols,.grid5_4cols {width: 72px;}
+.input_width5 {width: 329px;}
+
+.width6, .grid6, .span-6 {width: 405px;}
+.width6_4cols,.grid6_4cols {width: 90px;}
+.input_width6 {width: 399px;}
+
+.width7, .grid7, .span-7 {width: 475px;}
+.width7_2cols,.grid7_2cols {width: 230px;}
+.width7_3cols,.grid7_3cols {width: 148px;}
+.width7_4cols,.grid7_4cols {width: 107px;}
+.input_width7 {width: 469px;}
+
+.width8, .grid8, .span-8 {width: 545px;}
+.width8_3cols,.grid8_3cols {width: 171px;}
+.input_width8 {width: 539px;}
+
+.width9, .grid9, .span-9 {width: 615px;}
+.width9_2cols,.grid9_2cols {width: 300px;}
+.width9_4cols,.grid9_4cols {width: 142px;}
+.input_width9 {width: 609px;}
+
+.width10, .grid10, .span-10 {width: 685px;}
+.width10_3cols,.grid10_3cols {width: 218px;}
+.width10_4cols,.grid10_4cols {width: 160px;}
+.input_width10 {width: 679px;}
+
+.width11, .grid11, .span-11 {width: 755px;}
+.width11_2cols,.grid11_2cols {width: 370px;}
+.width11_3cols,.grid11_3cols {width: 241px;}
+.width11_4cols,.grid11_4cols {width: 177px;}
+.input_width11 {width: 749px;}
+
+.width12, .grid12, .span-12 {width: 825px;}
+.input_width12 {width: 819px;}
+
+/* Subdivided grid spaces */
+.emptycols_left1, .prepend-1 {padding-left: 70px;}
+.emptycols_right1, .append-1 {padding-right: 70px;}
+.emptycols_left2, .prepend-2 {padding-left: 140px;}
+.emptycols_right2, .append-2 {padding-right: 140px;}
+.emptycols_left3, .prepend-3 {padding-left: 210px;}
+.emptycols_right3, .append-3 {padding-right: 210px;}
+.emptycols_left4, .prepend-4 {padding-left: 280px;}
+.emptycols_right4, .append-4 {padding-right: 280px;}
+.emptycols_left5, .prepend-5 {padding-left: 350px;}
+.emptycols_right5, .append-5 {padding-right: 350px;}
+.emptycols_left6, .prepend-6 {padding-left: 420px;}
+.emptycols_right6, .append-6 {padding-right: 420px;}
+.emptycols_left7, .prepend-7 {padding-left: 490px;}
+.emptycols_right7, .append-7 {padding-right: 490px;}
+.emptycols_left8, .prepend-8 {padding-left: 560px;}
+.emptycols_right8, .append-8 {padding-right: 560px;}
+.emptycols_left9, .prepend-9 {padding-left: 630px;}
+.emptycols_right9, .append-9 {padding-right: 630px;}
+.emptycols_left10, .prepend-10 {padding-left: 700px;}
+.emptycols_right10, .append-10 {padding-right: 700px;}
+.emptycols_left11, .prepend-11 {padding-left: 770px;}
+.emptycols_right11, .append-11 {padding-right: 770px;}
+.pull-1 {margin-left: -70px;}
+.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
+.pull-2 {margin-left: -140px;}
+.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
+.pull-3 {margin-left: -210px;}
+.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
+.pull-4 {margin-left: -280px;}
+.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
\ No newline at end of file
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/specimen_files/specimen_stylesheet.css b/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/specimen_files/specimen_stylesheet.css
new file mode 100644
index 0000000..aecc43c
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/specimen_files/specimen_stylesheet.css
@@ -0,0 +1,396 @@
+@import url('grid_12-825-55-15.css');
+
+/*
+ CSS Reset by Eric Meyer - Released under Public Domain
+ http://meyerweb.com/eric/tools/css/reset/
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, table,
+caption, tbody, tfoot, thead, tr, th, td
+ {margin: 0;padding: 0;border: 0;outline: 0;
+ font-size: 100%;vertical-align: baseline;
+ background: transparent;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after,
+q:before, q:after {content: ''; content: none;}
+:focus {outline: 0;}
+ins {text-decoration: none;}
+del {text-decoration: line-through;}
+table {border-collapse: collapse;border-spacing: 0;}
+
+
+
+
+body {
+ color: #000;
+ background-color: #dcdcdc;
+}
+
+a {
+ text-decoration: none;
+ color: #1883ba;
+}
+
+h1{
+ font-size: 32px;
+ font-weight: normal;
+ font-style: normal;
+ margin-bottom: 18px;
+}
+
+h2{
+ font-size: 18px;
+}
+
+#container {
+ width: 865px;
+ margin: 0px auto;
+}
+
+
+#header {
+ padding: 20px;
+ font-size: 36px;
+ background-color: #000;
+ color: #fff;
+}
+
+#header span {
+ color: #666;
+}
+#main_content {
+ background-color: #fff;
+ padding: 60px 20px 20px;
+}
+
+
+#footer p {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 50px;
+ color: #333;
+ font: 10px Arial, sans-serif;
+}
+
+.tabs {
+ width: 100%;
+ height: 31px;
+ background-color: #444;
+}
+.tabs li {
+ float: left;
+ margin: 0;
+ overflow: hidden;
+ background-color: #444;
+}
+.tabs li a {
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ font: bold 11px/11px 'Arial';
+ text-transform: uppercase;
+ padding: 10px 15px;
+ border-right: 1px solid #fff;
+}
+
+.tabs li a:hover {
+ background-color: #00b3ff;
+
+}
+
+.tabs li.active a {
+ color: #000;
+ background-color: #fff;
+}
+
+
+
+div.huge {
+
+ font-size: 300px;
+ line-height: 1em;
+ padding: 0;
+ letter-spacing: -.02em;
+ overflow: hidden;
+}
+div.glyph_range {
+ font-size: 72px;
+ line-height: 1.1em;
+}
+
+.size10{ font-size: 10px; }
+.size11{ font-size: 11px; }
+.size12{ font-size: 12px; }
+.size13{ font-size: 13px; }
+.size14{ font-size: 14px; }
+.size16{ font-size: 16px; }
+.size18{ font-size: 18px; }
+.size20{ font-size: 20px; }
+.size24{ font-size: 24px; }
+.size30{ font-size: 30px; }
+.size36{ font-size: 36px; }
+.size48{ font-size: 48px; }
+.size60{ font-size: 60px; }
+.size72{ font-size: 72px; }
+.size90{ font-size: 90px; }
+
+
+.psample_row1 { height: 120px;}
+.psample_row1 { height: 120px;}
+.psample_row2 { height: 160px;}
+.psample_row3 { height: 160px;}
+.psample_row4 { height: 160px;}
+
+.psample {
+ overflow: hidden;
+ position: relative;
+}
+.psample p {
+ line-height: 1.3em;
+ display: block;
+ overflow: hidden;
+ margin: 0;
+}
+
+.psample span {
+ margin-right: .5em;
+}
+
+.white_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
+ position: absolute;
+ bottom: 0;
+}
+.black_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
+ position: absolute;
+ bottom: 0;
+}
+.fullreverse {
+ background: #000 !important;
+ color: #fff !important;
+ margin-left: -20px;
+ padding-left: 20px;
+ margin-right: -20px;
+ padding-right: 20px;
+ padding: 20px;
+ margin-bottom:0;
+}
+
+
+.sample_table td {
+ padding-top: 3px;
+ padding-bottom:5px;
+ padding-left: 5px;
+ vertical-align: middle;
+ line-height: 1.2em;
+}
+
+.sample_table td:first-child {
+ background-color: #eee;
+ text-align: right;
+ padding-right: 5px;
+ padding-left: 0;
+ padding: 5px;
+ font: 11px/12px "Courier New", Courier, mono;
+}
+
+code {
+ white-space: pre;
+ background-color: #eee;
+ display: block;
+ padding: 10px;
+ margin-bottom: 18px;
+ overflow: auto;
+}
+
+
+.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
+
+.box {
+ padding: 18px;
+ margin-bottom: 18px;
+ background: #eee;
+}
+
+.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
+
+#bodycomparison {
+ position: relative;
+ overflow: hidden;
+ font-size: 72px;
+ height: 90px;
+ white-space: nowrap;
+}
+
+#bodycomparison div{
+ font-size: 72px;
+ line-height: 90px;
+ display: inline;
+ margin: 0 15px 0 0;
+ padding: 0;
+}
+
+#bodycomparison div span{
+ font: 10px Arial;
+ position: absolute;
+ left: 0;
+}
+#xheight {
+ float: none;
+ position: absolute;
+ color: #d9f3ff;
+ font-size: 72px;
+ line-height: 90px;
+}
+
+.fontbody {
+ position: relative;
+}
+.arialbody{
+ font-family: Arial;
+ position: relative;
+}
+.verdanabody{
+ font-family: Verdana;
+ position: relative;
+}
+.georgiabody{
+ font-family: Georgia;
+ position: relative;
+}
+
+/* @group Layout page
+ */
+
+#layout h1 {
+ font-size: 36px;
+ line-height: 42px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h2 {
+ font-size: 24px;
+ line-height: 23px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h3 {
+ font-size: 22px;
+ line-height: 1.4em;
+ margin-top: 1em;
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+#layout p.byline {
+ font-size: 12px;
+ margin-top: 18px;
+ line-height: 12px;
+ margin-bottom: 0;
+}
+#layout p {
+ font-size: 14px;
+ line-height: 21px;
+ margin-bottom: .5em;
+}
+
+#layout p.large{
+ font-size: 18px;
+ line-height: 26px;
+}
+
+#layout .sidebar p{
+ font-size: 12px;
+ line-height: 1.4em;
+}
+
+#layout p.caption {
+ font-size: 10px;
+ margin-top: -16px;
+ margin-bottom: 18px;
+}
+
+/* @end */
+
+/* @group Glyphs */
+
+#glyph_chart div{
+ background-color: #d9f3ff;
+ color: black;
+ float: left;
+ font-size: 36px;
+ height: 1.2em;
+ line-height: 1.2em;
+ margin-bottom: 1px;
+ margin-right: 1px;
+ text-align: center;
+ width: 1.2em;
+ position: relative;
+ padding: .6em .2em .2em;
+}
+
+#glyph_chart div p {
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: block;
+ text-align: center;
+ font: bold 9px Arial, sans-serif;
+ background-color: #3a768f;
+ width: 100%;
+ color: #fff;
+ padding: 2px 0;
+}
+
+
+#glyphs h1 {
+ font-family: Arial, sans-serif;
+}
+/* @end */
+
+/* @group Installing */
+
+#installing {
+ font: 13px Arial, sans-serif;
+}
+
+#installing p,
+#glyphs p{
+ line-height: 1.2em;
+ margin-bottom: 18px;
+ font: 13px Arial, sans-serif;
+}
+
+
+
+#installing h3{
+ font-size: 15px;
+ margin-top: 18px;
+}
+
+/* @end */
+
+#rendering h1 {
+ font-family: Arial, sans-serif;
+}
+.render_table td {
+ font: 11px "Courier New", Courier, mono;
+ vertical-align: middle;
+}
+
+
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/stylesheet.css b/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/stylesheet.css
new file mode 100644
index 0000000..a0ba661
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_bold_macroman/stylesheet.css
@@ -0,0 +1,13 @@
+@font-face {
+ font-family: 'abhaya_librebold';
+ src: url('AbhayaLibre-Bold-webfont.eot');
+ src: url('AbhayaLibre-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+ url('AbhayaLibre-Bold-webfont.woff2') format('woff2'),
+ url('AbhayaLibre-Bold-webfont.woff') format('woff'),
+ url('AbhayaLibre-Bold-webfont.ttf') format('truetype'),
+ url('AbhayaLibre-Bold-webfont.svg#abhaya_librebold') format('svg');
+ font-weight: normal;
+ font-style: normal;
+
+}
+
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/AbhayaLibre-ExtraBold-demo.html b/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/AbhayaLibre-ExtraBold-demo.html
new file mode 100644
index 0000000..8227ba3
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/AbhayaLibre-ExtraBold-demo.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript">
+ (function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
+ if(typeof param.defaultContent=="number")
+ {var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
+ $(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
+ function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
+ {$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
+ $(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
+ </script>
+ <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
+
+ <style type="text/css">
+ body{
+ font-family: 'abhaya_libreextrabold';
+ }
+</style>
+
+<title>Abhaya Libre ExtraBold Specimen</title>
+
+
+ <script type="text/javascript" charset="utf-8">
+ $(document).ready(function() {
+ $('#container').easyTabs({defaultContent:1});
+ });
+ </script>
+</head>
+
+<body>
+<div id="container">
+ <div id="header">
+ Abhaya Libre ExtraBold </div>
+ <ul class="tabs">
+ <li><a href="#specimen">Specimen</a></li>
+ <li><a href="#layout">Sample Layout</a></li>
+ <li><a href="#installing">Installing Webfonts</a></li>
+
+ </ul>
+
+ <div id="main_content">
+
+
+ <div id="specimen">
+
+ <div class="section">
+ <div class="grid12 firstcol">
+ <div class="huge">AaBb</div>
+ </div>
+ </div>
+
+ <div class="section">
+ <div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
+ </div>
+ <div class="section">
+ <div class="grid12 firstcol">
+ <table class="sample_table">
+ <tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ </table>
+
+ </div>
+
+ </div>
+
+
+
+ <div class="section" id="bodycomparison">
+
+
+ <div id="xheight">
+ <div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
+ <div class="fontbody" style="z-index:1">
+ body<span>Abhaya Libre ExtraBold</span>
+ </div>
+ <div class="arialbody" style="z-index:1">
+ body<span>Arial</span>
+ </div>
+ <div class="verdanabody" style="z-index:1">
+ body<span>Verdana</span>
+ </div>
+ <div class="georgiabody" style="z-index:1">
+ body<span>Georgia</span>
+ </div>
+
+
+
+ </div>
+
+
+ <div class="section psample psample_row1" id="">
+
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+ <div class="section psample psample_row2" id="">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row4" id="">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+
+
+
+ <div class="section psample psample_row1 fullreverse">
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row2 fullreverse">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+
+
+
+ </div>
+
+ <div id="layout">
+
+ <div class="section">
+
+ <div class="grid12 firstcol">
+ <h1>Lorem Ipsum Dolor</h1>
+ <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+ <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+ </div>
+ </div>
+ <div class="section">
+ <div class="grid8 firstcol">
+ <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+ <h3>Pellentesque ornare sem</h3>
+
+ <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+ <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+ <h3>Cras mattis consectetur</h3>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+ <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+
+ <div class="grid4 sidebar">
+
+ <div class="box reverse">
+ <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+ </div>
+
+ <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+ <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+ </div>
+ </div>
+
+ </div>
+
+
+
+
+
+
+
+
+
+ <div id="specs">
+
+ </div>
+
+ <div id="installing">
+ <div class="section">
+ <div class="grid7 firstcol">
+ <h1>Installing Webfonts</h1>
+
+ <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+ <h2>1. Upload your webfonts</h2>
+ <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+ <h2>2. Include the webfont stylesheet</h2>
+ <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{
+ font-family: 'MyWebFont';
+ src: url('WebFont.eot');
+ src: url('WebFont.eot?iefix') format('eot'),
+ url('WebFont.woff') format('woff'),
+ url('WebFont.ttf') format('truetype'),
+ url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+ <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+ <code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
+
+ <h2>3. Modify your own stylesheet</h2>
+ <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'MyWebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+ </div>
+
+ <div class="grid5 sidebar">
+ <div class="box">
+ <h2>Troubleshooting<br />Font-Face Problems</h2>
+ <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+ <h3>Fonts not showing in any browser</h3>
+
+ <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+ <h3>Fonts not loading in iPhone or iPad</h3>
+
+ <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+ <h3>Fonts not loading in Firefox</h3>
+
+ <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+ <h3>Fonts not loading in IE</h3>
+
+ <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+ <h3>Fonts not loading in IE9</h3>
+
+ <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+ <div id="footer">
+ <p>©2010-2011 Fontspring. All rights reserved.</p>
+ </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/AbhayaLibre-ExtraBold-webfont.woff b/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/AbhayaLibre-ExtraBold-webfont.woff
new file mode 100644
index 0000000..139e689
Binary files /dev/null and b/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/AbhayaLibre-ExtraBold-webfont.woff differ
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/specimen_files/grid_12-825-55-15.css b/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/specimen_files/grid_12-825-55-15.css
new file mode 100644
index 0000000..3d6aef7
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/specimen_files/grid_12-825-55-15.css
@@ -0,0 +1,129 @@
+/*Notes about grid:
+Columns: 12
+Grid Width: 825px
+Column Width: 55px
+Gutter Width: 15px
+-------------------------------*/
+
+
+
+.section {margin-bottom: 18px;
+}
+.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
+.section {*zoom: 1;}
+
+.section .firstcolumn,
+.section .firstcol {margin-left: 0;}
+
+
+/* Border on left hand side of a column. */
+.border {
+ padding-left: 7px;
+ margin-left: 7px;
+ border-left: 1px solid #eee;
+}
+
+/* Border with more whitespace, spans one column. */
+.colborder {
+ padding-left: 42px;
+ margin-left: 42px;
+ border-left: 1px solid #eee;
+}
+
+
+
+/* The Grid Classes */
+.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
+{margin-left: 15px;float: left;display: inline; overflow: hidden;}
+
+
+.width1, .grid1, .span-1 {width: 55px;}
+.width1_2cols,.grid1_2cols {width: 20px;}
+.width1_3cols,.grid1_3cols {width: 8px;}
+.width1_4cols,.grid1_4cols {width: 2px;}
+.input_width1 {width: 49px;}
+
+.width2, .grid2, .span-2 {width: 125px;}
+.width2_3cols,.grid2_3cols {width: 31px;}
+.width2_4cols,.grid2_4cols {width: 20px;}
+.input_width2 {width: 119px;}
+
+.width3, .grid3, .span-3 {width: 195px;}
+.width3_2cols,.grid3_2cols {width: 90px;}
+.width3_4cols,.grid3_4cols {width: 37px;}
+.input_width3 {width: 189px;}
+
+.width4, .grid4, .span-4 {width: 265px;}
+.width4_3cols,.grid4_3cols {width: 78px;}
+.input_width4 {width: 259px;}
+
+.width5, .grid5, .span-5 {width: 335px;}
+.width5_2cols,.grid5_2cols {width: 160px;}
+.width5_3cols,.grid5_3cols {width: 101px;}
+.width5_4cols,.grid5_4cols {width: 72px;}
+.input_width5 {width: 329px;}
+
+.width6, .grid6, .span-6 {width: 405px;}
+.width6_4cols,.grid6_4cols {width: 90px;}
+.input_width6 {width: 399px;}
+
+.width7, .grid7, .span-7 {width: 475px;}
+.width7_2cols,.grid7_2cols {width: 230px;}
+.width7_3cols,.grid7_3cols {width: 148px;}
+.width7_4cols,.grid7_4cols {width: 107px;}
+.input_width7 {width: 469px;}
+
+.width8, .grid8, .span-8 {width: 545px;}
+.width8_3cols,.grid8_3cols {width: 171px;}
+.input_width8 {width: 539px;}
+
+.width9, .grid9, .span-9 {width: 615px;}
+.width9_2cols,.grid9_2cols {width: 300px;}
+.width9_4cols,.grid9_4cols {width: 142px;}
+.input_width9 {width: 609px;}
+
+.width10, .grid10, .span-10 {width: 685px;}
+.width10_3cols,.grid10_3cols {width: 218px;}
+.width10_4cols,.grid10_4cols {width: 160px;}
+.input_width10 {width: 679px;}
+
+.width11, .grid11, .span-11 {width: 755px;}
+.width11_2cols,.grid11_2cols {width: 370px;}
+.width11_3cols,.grid11_3cols {width: 241px;}
+.width11_4cols,.grid11_4cols {width: 177px;}
+.input_width11 {width: 749px;}
+
+.width12, .grid12, .span-12 {width: 825px;}
+.input_width12 {width: 819px;}
+
+/* Subdivided grid spaces */
+.emptycols_left1, .prepend-1 {padding-left: 70px;}
+.emptycols_right1, .append-1 {padding-right: 70px;}
+.emptycols_left2, .prepend-2 {padding-left: 140px;}
+.emptycols_right2, .append-2 {padding-right: 140px;}
+.emptycols_left3, .prepend-3 {padding-left: 210px;}
+.emptycols_right3, .append-3 {padding-right: 210px;}
+.emptycols_left4, .prepend-4 {padding-left: 280px;}
+.emptycols_right4, .append-4 {padding-right: 280px;}
+.emptycols_left5, .prepend-5 {padding-left: 350px;}
+.emptycols_right5, .append-5 {padding-right: 350px;}
+.emptycols_left6, .prepend-6 {padding-left: 420px;}
+.emptycols_right6, .append-6 {padding-right: 420px;}
+.emptycols_left7, .prepend-7 {padding-left: 490px;}
+.emptycols_right7, .append-7 {padding-right: 490px;}
+.emptycols_left8, .prepend-8 {padding-left: 560px;}
+.emptycols_right8, .append-8 {padding-right: 560px;}
+.emptycols_left9, .prepend-9 {padding-left: 630px;}
+.emptycols_right9, .append-9 {padding-right: 630px;}
+.emptycols_left10, .prepend-10 {padding-left: 700px;}
+.emptycols_right10, .append-10 {padding-right: 700px;}
+.emptycols_left11, .prepend-11 {padding-left: 770px;}
+.emptycols_right11, .append-11 {padding-right: 770px;}
+.pull-1 {margin-left: -70px;}
+.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
+.pull-2 {margin-left: -140px;}
+.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
+.pull-3 {margin-left: -210px;}
+.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
+.pull-4 {margin-left: -280px;}
+.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
\ No newline at end of file
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/specimen_files/specimen_stylesheet.css b/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/specimen_files/specimen_stylesheet.css
new file mode 100644
index 0000000..aecc43c
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/specimen_files/specimen_stylesheet.css
@@ -0,0 +1,396 @@
+@import url('grid_12-825-55-15.css');
+
+/*
+ CSS Reset by Eric Meyer - Released under Public Domain
+ http://meyerweb.com/eric/tools/css/reset/
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, table,
+caption, tbody, tfoot, thead, tr, th, td
+ {margin: 0;padding: 0;border: 0;outline: 0;
+ font-size: 100%;vertical-align: baseline;
+ background: transparent;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after,
+q:before, q:after {content: ''; content: none;}
+:focus {outline: 0;}
+ins {text-decoration: none;}
+del {text-decoration: line-through;}
+table {border-collapse: collapse;border-spacing: 0;}
+
+
+
+
+body {
+ color: #000;
+ background-color: #dcdcdc;
+}
+
+a {
+ text-decoration: none;
+ color: #1883ba;
+}
+
+h1{
+ font-size: 32px;
+ font-weight: normal;
+ font-style: normal;
+ margin-bottom: 18px;
+}
+
+h2{
+ font-size: 18px;
+}
+
+#container {
+ width: 865px;
+ margin: 0px auto;
+}
+
+
+#header {
+ padding: 20px;
+ font-size: 36px;
+ background-color: #000;
+ color: #fff;
+}
+
+#header span {
+ color: #666;
+}
+#main_content {
+ background-color: #fff;
+ padding: 60px 20px 20px;
+}
+
+
+#footer p {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 50px;
+ color: #333;
+ font: 10px Arial, sans-serif;
+}
+
+.tabs {
+ width: 100%;
+ height: 31px;
+ background-color: #444;
+}
+.tabs li {
+ float: left;
+ margin: 0;
+ overflow: hidden;
+ background-color: #444;
+}
+.tabs li a {
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ font: bold 11px/11px 'Arial';
+ text-transform: uppercase;
+ padding: 10px 15px;
+ border-right: 1px solid #fff;
+}
+
+.tabs li a:hover {
+ background-color: #00b3ff;
+
+}
+
+.tabs li.active a {
+ color: #000;
+ background-color: #fff;
+}
+
+
+
+div.huge {
+
+ font-size: 300px;
+ line-height: 1em;
+ padding: 0;
+ letter-spacing: -.02em;
+ overflow: hidden;
+}
+div.glyph_range {
+ font-size: 72px;
+ line-height: 1.1em;
+}
+
+.size10{ font-size: 10px; }
+.size11{ font-size: 11px; }
+.size12{ font-size: 12px; }
+.size13{ font-size: 13px; }
+.size14{ font-size: 14px; }
+.size16{ font-size: 16px; }
+.size18{ font-size: 18px; }
+.size20{ font-size: 20px; }
+.size24{ font-size: 24px; }
+.size30{ font-size: 30px; }
+.size36{ font-size: 36px; }
+.size48{ font-size: 48px; }
+.size60{ font-size: 60px; }
+.size72{ font-size: 72px; }
+.size90{ font-size: 90px; }
+
+
+.psample_row1 { height: 120px;}
+.psample_row1 { height: 120px;}
+.psample_row2 { height: 160px;}
+.psample_row3 { height: 160px;}
+.psample_row4 { height: 160px;}
+
+.psample {
+ overflow: hidden;
+ position: relative;
+}
+.psample p {
+ line-height: 1.3em;
+ display: block;
+ overflow: hidden;
+ margin: 0;
+}
+
+.psample span {
+ margin-right: .5em;
+}
+
+.white_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
+ position: absolute;
+ bottom: 0;
+}
+.black_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
+ position: absolute;
+ bottom: 0;
+}
+.fullreverse {
+ background: #000 !important;
+ color: #fff !important;
+ margin-left: -20px;
+ padding-left: 20px;
+ margin-right: -20px;
+ padding-right: 20px;
+ padding: 20px;
+ margin-bottom:0;
+}
+
+
+.sample_table td {
+ padding-top: 3px;
+ padding-bottom:5px;
+ padding-left: 5px;
+ vertical-align: middle;
+ line-height: 1.2em;
+}
+
+.sample_table td:first-child {
+ background-color: #eee;
+ text-align: right;
+ padding-right: 5px;
+ padding-left: 0;
+ padding: 5px;
+ font: 11px/12px "Courier New", Courier, mono;
+}
+
+code {
+ white-space: pre;
+ background-color: #eee;
+ display: block;
+ padding: 10px;
+ margin-bottom: 18px;
+ overflow: auto;
+}
+
+
+.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
+
+.box {
+ padding: 18px;
+ margin-bottom: 18px;
+ background: #eee;
+}
+
+.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
+
+#bodycomparison {
+ position: relative;
+ overflow: hidden;
+ font-size: 72px;
+ height: 90px;
+ white-space: nowrap;
+}
+
+#bodycomparison div{
+ font-size: 72px;
+ line-height: 90px;
+ display: inline;
+ margin: 0 15px 0 0;
+ padding: 0;
+}
+
+#bodycomparison div span{
+ font: 10px Arial;
+ position: absolute;
+ left: 0;
+}
+#xheight {
+ float: none;
+ position: absolute;
+ color: #d9f3ff;
+ font-size: 72px;
+ line-height: 90px;
+}
+
+.fontbody {
+ position: relative;
+}
+.arialbody{
+ font-family: Arial;
+ position: relative;
+}
+.verdanabody{
+ font-family: Verdana;
+ position: relative;
+}
+.georgiabody{
+ font-family: Georgia;
+ position: relative;
+}
+
+/* @group Layout page
+ */
+
+#layout h1 {
+ font-size: 36px;
+ line-height: 42px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h2 {
+ font-size: 24px;
+ line-height: 23px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h3 {
+ font-size: 22px;
+ line-height: 1.4em;
+ margin-top: 1em;
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+#layout p.byline {
+ font-size: 12px;
+ margin-top: 18px;
+ line-height: 12px;
+ margin-bottom: 0;
+}
+#layout p {
+ font-size: 14px;
+ line-height: 21px;
+ margin-bottom: .5em;
+}
+
+#layout p.large{
+ font-size: 18px;
+ line-height: 26px;
+}
+
+#layout .sidebar p{
+ font-size: 12px;
+ line-height: 1.4em;
+}
+
+#layout p.caption {
+ font-size: 10px;
+ margin-top: -16px;
+ margin-bottom: 18px;
+}
+
+/* @end */
+
+/* @group Glyphs */
+
+#glyph_chart div{
+ background-color: #d9f3ff;
+ color: black;
+ float: left;
+ font-size: 36px;
+ height: 1.2em;
+ line-height: 1.2em;
+ margin-bottom: 1px;
+ margin-right: 1px;
+ text-align: center;
+ width: 1.2em;
+ position: relative;
+ padding: .6em .2em .2em;
+}
+
+#glyph_chart div p {
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: block;
+ text-align: center;
+ font: bold 9px Arial, sans-serif;
+ background-color: #3a768f;
+ width: 100%;
+ color: #fff;
+ padding: 2px 0;
+}
+
+
+#glyphs h1 {
+ font-family: Arial, sans-serif;
+}
+/* @end */
+
+/* @group Installing */
+
+#installing {
+ font: 13px Arial, sans-serif;
+}
+
+#installing p,
+#glyphs p{
+ line-height: 1.2em;
+ margin-bottom: 18px;
+ font: 13px Arial, sans-serif;
+}
+
+
+
+#installing h3{
+ font-size: 15px;
+ margin-top: 18px;
+}
+
+/* @end */
+
+#rendering h1 {
+ font-family: Arial, sans-serif;
+}
+.render_table td {
+ font: 11px "Courier New", Courier, mono;
+ vertical-align: middle;
+}
+
+
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/stylesheet.css b/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/stylesheet.css
new file mode 100644
index 0000000..6d08122
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_extrabold_macroman/stylesheet.css
@@ -0,0 +1,13 @@
+@font-face {
+ font-family: 'abhaya_libreextrabold';
+ src: url('AbhayaLibre-ExtraBold-webfont.eot');
+ src: url('AbhayaLibre-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
+ url('AbhayaLibre-ExtraBold-webfont.woff2') format('woff2'),
+ url('AbhayaLibre-ExtraBold-webfont.woff') format('woff'),
+ url('AbhayaLibre-ExtraBold-webfont.ttf') format('truetype'),
+ url('AbhayaLibre-ExtraBold-webfont.svg#abhaya_libreextrabold') format('svg');
+ font-weight: normal;
+ font-style: normal;
+
+}
+
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/AbhayaLibre-Medium-demo.html b/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/AbhayaLibre-Medium-demo.html
new file mode 100644
index 0000000..edfb8c7
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/AbhayaLibre-Medium-demo.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript">
+ (function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
+ if(typeof param.defaultContent=="number")
+ {var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
+ $(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
+ function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
+ {$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
+ $(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
+ </script>
+ <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
+
+ <style type="text/css">
+ body{
+ font-family: 'abhaya_libremedium';
+ }
+</style>
+
+<title>Abhaya Libre Medium Specimen</title>
+
+
+ <script type="text/javascript" charset="utf-8">
+ $(document).ready(function() {
+ $('#container').easyTabs({defaultContent:1});
+ });
+ </script>
+</head>
+
+<body>
+<div id="container">
+ <div id="header">
+ Abhaya Libre Medium </div>
+ <ul class="tabs">
+ <li><a href="#specimen">Specimen</a></li>
+ <li><a href="#layout">Sample Layout</a></li>
+ <li><a href="#installing">Installing Webfonts</a></li>
+
+ </ul>
+
+ <div id="main_content">
+
+
+ <div id="specimen">
+
+ <div class="section">
+ <div class="grid12 firstcol">
+ <div class="huge">AaBb</div>
+ </div>
+ </div>
+
+ <div class="section">
+ <div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
+ </div>
+ <div class="section">
+ <div class="grid12 firstcol">
+ <table class="sample_table">
+ <tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ </table>
+
+ </div>
+
+ </div>
+
+
+
+ <div class="section" id="bodycomparison">
+
+
+ <div id="xheight">
+ <div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
+ <div class="fontbody" style="z-index:1">
+ body<span>Abhaya Libre Medium</span>
+ </div>
+ <div class="arialbody" style="z-index:1">
+ body<span>Arial</span>
+ </div>
+ <div class="verdanabody" style="z-index:1">
+ body<span>Verdana</span>
+ </div>
+ <div class="georgiabody" style="z-index:1">
+ body<span>Georgia</span>
+ </div>
+
+
+
+ </div>
+
+
+ <div class="section psample psample_row1" id="">
+
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+ <div class="section psample psample_row2" id="">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row4" id="">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+
+
+
+ <div class="section psample psample_row1 fullreverse">
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row2 fullreverse">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+
+
+
+ </div>
+
+ <div id="layout">
+
+ <div class="section">
+
+ <div class="grid12 firstcol">
+ <h1>Lorem Ipsum Dolor</h1>
+ <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+ <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+ </div>
+ </div>
+ <div class="section">
+ <div class="grid8 firstcol">
+ <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+ <h3>Pellentesque ornare sem</h3>
+
+ <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+ <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+ <h3>Cras mattis consectetur</h3>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+ <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+
+ <div class="grid4 sidebar">
+
+ <div class="box reverse">
+ <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+ </div>
+
+ <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+ <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+ </div>
+ </div>
+
+ </div>
+
+
+
+
+
+
+
+
+
+ <div id="specs">
+
+ </div>
+
+ <div id="installing">
+ <div class="section">
+ <div class="grid7 firstcol">
+ <h1>Installing Webfonts</h1>
+
+ <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+ <h2>1. Upload your webfonts</h2>
+ <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+ <h2>2. Include the webfont stylesheet</h2>
+ <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{
+ font-family: 'MyWebFont';
+ src: url('WebFont.eot');
+ src: url('WebFont.eot?iefix') format('eot'),
+ url('WebFont.woff') format('woff'),
+ url('WebFont.ttf') format('truetype'),
+ url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+ <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+ <code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
+
+ <h2>3. Modify your own stylesheet</h2>
+ <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'MyWebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+ </div>
+
+ <div class="grid5 sidebar">
+ <div class="box">
+ <h2>Troubleshooting<br />Font-Face Problems</h2>
+ <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+ <h3>Fonts not showing in any browser</h3>
+
+ <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+ <h3>Fonts not loading in iPhone or iPad</h3>
+
+ <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+ <h3>Fonts not loading in Firefox</h3>
+
+ <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+ <h3>Fonts not loading in IE</h3>
+
+ <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+ <h3>Fonts not loading in IE9</h3>
+
+ <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+ <div id="footer">
+ <p>©2010-2011 Fontspring. All rights reserved.</p>
+ </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/AbhayaLibre-Medium-webfont.woff b/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/AbhayaLibre-Medium-webfont.woff
new file mode 100644
index 0000000..6348c70
Binary files /dev/null and b/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/AbhayaLibre-Medium-webfont.woff differ
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/specimen_files/grid_12-825-55-15.css b/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/specimen_files/grid_12-825-55-15.css
new file mode 100644
index 0000000..3d6aef7
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/specimen_files/grid_12-825-55-15.css
@@ -0,0 +1,129 @@
+/*Notes about grid:
+Columns: 12
+Grid Width: 825px
+Column Width: 55px
+Gutter Width: 15px
+-------------------------------*/
+
+
+
+.section {margin-bottom: 18px;
+}
+.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
+.section {*zoom: 1;}
+
+.section .firstcolumn,
+.section .firstcol {margin-left: 0;}
+
+
+/* Border on left hand side of a column. */
+.border {
+ padding-left: 7px;
+ margin-left: 7px;
+ border-left: 1px solid #eee;
+}
+
+/* Border with more whitespace, spans one column. */
+.colborder {
+ padding-left: 42px;
+ margin-left: 42px;
+ border-left: 1px solid #eee;
+}
+
+
+
+/* The Grid Classes */
+.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
+{margin-left: 15px;float: left;display: inline; overflow: hidden;}
+
+
+.width1, .grid1, .span-1 {width: 55px;}
+.width1_2cols,.grid1_2cols {width: 20px;}
+.width1_3cols,.grid1_3cols {width: 8px;}
+.width1_4cols,.grid1_4cols {width: 2px;}
+.input_width1 {width: 49px;}
+
+.width2, .grid2, .span-2 {width: 125px;}
+.width2_3cols,.grid2_3cols {width: 31px;}
+.width2_4cols,.grid2_4cols {width: 20px;}
+.input_width2 {width: 119px;}
+
+.width3, .grid3, .span-3 {width: 195px;}
+.width3_2cols,.grid3_2cols {width: 90px;}
+.width3_4cols,.grid3_4cols {width: 37px;}
+.input_width3 {width: 189px;}
+
+.width4, .grid4, .span-4 {width: 265px;}
+.width4_3cols,.grid4_3cols {width: 78px;}
+.input_width4 {width: 259px;}
+
+.width5, .grid5, .span-5 {width: 335px;}
+.width5_2cols,.grid5_2cols {width: 160px;}
+.width5_3cols,.grid5_3cols {width: 101px;}
+.width5_4cols,.grid5_4cols {width: 72px;}
+.input_width5 {width: 329px;}
+
+.width6, .grid6, .span-6 {width: 405px;}
+.width6_4cols,.grid6_4cols {width: 90px;}
+.input_width6 {width: 399px;}
+
+.width7, .grid7, .span-7 {width: 475px;}
+.width7_2cols,.grid7_2cols {width: 230px;}
+.width7_3cols,.grid7_3cols {width: 148px;}
+.width7_4cols,.grid7_4cols {width: 107px;}
+.input_width7 {width: 469px;}
+
+.width8, .grid8, .span-8 {width: 545px;}
+.width8_3cols,.grid8_3cols {width: 171px;}
+.input_width8 {width: 539px;}
+
+.width9, .grid9, .span-9 {width: 615px;}
+.width9_2cols,.grid9_2cols {width: 300px;}
+.width9_4cols,.grid9_4cols {width: 142px;}
+.input_width9 {width: 609px;}
+
+.width10, .grid10, .span-10 {width: 685px;}
+.width10_3cols,.grid10_3cols {width: 218px;}
+.width10_4cols,.grid10_4cols {width: 160px;}
+.input_width10 {width: 679px;}
+
+.width11, .grid11, .span-11 {width: 755px;}
+.width11_2cols,.grid11_2cols {width: 370px;}
+.width11_3cols,.grid11_3cols {width: 241px;}
+.width11_4cols,.grid11_4cols {width: 177px;}
+.input_width11 {width: 749px;}
+
+.width12, .grid12, .span-12 {width: 825px;}
+.input_width12 {width: 819px;}
+
+/* Subdivided grid spaces */
+.emptycols_left1, .prepend-1 {padding-left: 70px;}
+.emptycols_right1, .append-1 {padding-right: 70px;}
+.emptycols_left2, .prepend-2 {padding-left: 140px;}
+.emptycols_right2, .append-2 {padding-right: 140px;}
+.emptycols_left3, .prepend-3 {padding-left: 210px;}
+.emptycols_right3, .append-3 {padding-right: 210px;}
+.emptycols_left4, .prepend-4 {padding-left: 280px;}
+.emptycols_right4, .append-4 {padding-right: 280px;}
+.emptycols_left5, .prepend-5 {padding-left: 350px;}
+.emptycols_right5, .append-5 {padding-right: 350px;}
+.emptycols_left6, .prepend-6 {padding-left: 420px;}
+.emptycols_right6, .append-6 {padding-right: 420px;}
+.emptycols_left7, .prepend-7 {padding-left: 490px;}
+.emptycols_right7, .append-7 {padding-right: 490px;}
+.emptycols_left8, .prepend-8 {padding-left: 560px;}
+.emptycols_right8, .append-8 {padding-right: 560px;}
+.emptycols_left9, .prepend-9 {padding-left: 630px;}
+.emptycols_right9, .append-9 {padding-right: 630px;}
+.emptycols_left10, .prepend-10 {padding-left: 700px;}
+.emptycols_right10, .append-10 {padding-right: 700px;}
+.emptycols_left11, .prepend-11 {padding-left: 770px;}
+.emptycols_right11, .append-11 {padding-right: 770px;}
+.pull-1 {margin-left: -70px;}
+.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
+.pull-2 {margin-left: -140px;}
+.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
+.pull-3 {margin-left: -210px;}
+.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
+.pull-4 {margin-left: -280px;}
+.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
\ No newline at end of file
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/specimen_files/specimen_stylesheet.css b/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/specimen_files/specimen_stylesheet.css
new file mode 100644
index 0000000..aecc43c
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/specimen_files/specimen_stylesheet.css
@@ -0,0 +1,396 @@
+@import url('grid_12-825-55-15.css');
+
+/*
+ CSS Reset by Eric Meyer - Released under Public Domain
+ http://meyerweb.com/eric/tools/css/reset/
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, table,
+caption, tbody, tfoot, thead, tr, th, td
+ {margin: 0;padding: 0;border: 0;outline: 0;
+ font-size: 100%;vertical-align: baseline;
+ background: transparent;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after,
+q:before, q:after {content: ''; content: none;}
+:focus {outline: 0;}
+ins {text-decoration: none;}
+del {text-decoration: line-through;}
+table {border-collapse: collapse;border-spacing: 0;}
+
+
+
+
+body {
+ color: #000;
+ background-color: #dcdcdc;
+}
+
+a {
+ text-decoration: none;
+ color: #1883ba;
+}
+
+h1{
+ font-size: 32px;
+ font-weight: normal;
+ font-style: normal;
+ margin-bottom: 18px;
+}
+
+h2{
+ font-size: 18px;
+}
+
+#container {
+ width: 865px;
+ margin: 0px auto;
+}
+
+
+#header {
+ padding: 20px;
+ font-size: 36px;
+ background-color: #000;
+ color: #fff;
+}
+
+#header span {
+ color: #666;
+}
+#main_content {
+ background-color: #fff;
+ padding: 60px 20px 20px;
+}
+
+
+#footer p {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 50px;
+ color: #333;
+ font: 10px Arial, sans-serif;
+}
+
+.tabs {
+ width: 100%;
+ height: 31px;
+ background-color: #444;
+}
+.tabs li {
+ float: left;
+ margin: 0;
+ overflow: hidden;
+ background-color: #444;
+}
+.tabs li a {
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ font: bold 11px/11px 'Arial';
+ text-transform: uppercase;
+ padding: 10px 15px;
+ border-right: 1px solid #fff;
+}
+
+.tabs li a:hover {
+ background-color: #00b3ff;
+
+}
+
+.tabs li.active a {
+ color: #000;
+ background-color: #fff;
+}
+
+
+
+div.huge {
+
+ font-size: 300px;
+ line-height: 1em;
+ padding: 0;
+ letter-spacing: -.02em;
+ overflow: hidden;
+}
+div.glyph_range {
+ font-size: 72px;
+ line-height: 1.1em;
+}
+
+.size10{ font-size: 10px; }
+.size11{ font-size: 11px; }
+.size12{ font-size: 12px; }
+.size13{ font-size: 13px; }
+.size14{ font-size: 14px; }
+.size16{ font-size: 16px; }
+.size18{ font-size: 18px; }
+.size20{ font-size: 20px; }
+.size24{ font-size: 24px; }
+.size30{ font-size: 30px; }
+.size36{ font-size: 36px; }
+.size48{ font-size: 48px; }
+.size60{ font-size: 60px; }
+.size72{ font-size: 72px; }
+.size90{ font-size: 90px; }
+
+
+.psample_row1 { height: 120px;}
+.psample_row1 { height: 120px;}
+.psample_row2 { height: 160px;}
+.psample_row3 { height: 160px;}
+.psample_row4 { height: 160px;}
+
+.psample {
+ overflow: hidden;
+ position: relative;
+}
+.psample p {
+ line-height: 1.3em;
+ display: block;
+ overflow: hidden;
+ margin: 0;
+}
+
+.psample span {
+ margin-right: .5em;
+}
+
+.white_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
+ position: absolute;
+ bottom: 0;
+}
+.black_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
+ position: absolute;
+ bottom: 0;
+}
+.fullreverse {
+ background: #000 !important;
+ color: #fff !important;
+ margin-left: -20px;
+ padding-left: 20px;
+ margin-right: -20px;
+ padding-right: 20px;
+ padding: 20px;
+ margin-bottom:0;
+}
+
+
+.sample_table td {
+ padding-top: 3px;
+ padding-bottom:5px;
+ padding-left: 5px;
+ vertical-align: middle;
+ line-height: 1.2em;
+}
+
+.sample_table td:first-child {
+ background-color: #eee;
+ text-align: right;
+ padding-right: 5px;
+ padding-left: 0;
+ padding: 5px;
+ font: 11px/12px "Courier New", Courier, mono;
+}
+
+code {
+ white-space: pre;
+ background-color: #eee;
+ display: block;
+ padding: 10px;
+ margin-bottom: 18px;
+ overflow: auto;
+}
+
+
+.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
+
+.box {
+ padding: 18px;
+ margin-bottom: 18px;
+ background: #eee;
+}
+
+.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
+
+#bodycomparison {
+ position: relative;
+ overflow: hidden;
+ font-size: 72px;
+ height: 90px;
+ white-space: nowrap;
+}
+
+#bodycomparison div{
+ font-size: 72px;
+ line-height: 90px;
+ display: inline;
+ margin: 0 15px 0 0;
+ padding: 0;
+}
+
+#bodycomparison div span{
+ font: 10px Arial;
+ position: absolute;
+ left: 0;
+}
+#xheight {
+ float: none;
+ position: absolute;
+ color: #d9f3ff;
+ font-size: 72px;
+ line-height: 90px;
+}
+
+.fontbody {
+ position: relative;
+}
+.arialbody{
+ font-family: Arial;
+ position: relative;
+}
+.verdanabody{
+ font-family: Verdana;
+ position: relative;
+}
+.georgiabody{
+ font-family: Georgia;
+ position: relative;
+}
+
+/* @group Layout page
+ */
+
+#layout h1 {
+ font-size: 36px;
+ line-height: 42px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h2 {
+ font-size: 24px;
+ line-height: 23px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h3 {
+ font-size: 22px;
+ line-height: 1.4em;
+ margin-top: 1em;
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+#layout p.byline {
+ font-size: 12px;
+ margin-top: 18px;
+ line-height: 12px;
+ margin-bottom: 0;
+}
+#layout p {
+ font-size: 14px;
+ line-height: 21px;
+ margin-bottom: .5em;
+}
+
+#layout p.large{
+ font-size: 18px;
+ line-height: 26px;
+}
+
+#layout .sidebar p{
+ font-size: 12px;
+ line-height: 1.4em;
+}
+
+#layout p.caption {
+ font-size: 10px;
+ margin-top: -16px;
+ margin-bottom: 18px;
+}
+
+/* @end */
+
+/* @group Glyphs */
+
+#glyph_chart div{
+ background-color: #d9f3ff;
+ color: black;
+ float: left;
+ font-size: 36px;
+ height: 1.2em;
+ line-height: 1.2em;
+ margin-bottom: 1px;
+ margin-right: 1px;
+ text-align: center;
+ width: 1.2em;
+ position: relative;
+ padding: .6em .2em .2em;
+}
+
+#glyph_chart div p {
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: block;
+ text-align: center;
+ font: bold 9px Arial, sans-serif;
+ background-color: #3a768f;
+ width: 100%;
+ color: #fff;
+ padding: 2px 0;
+}
+
+
+#glyphs h1 {
+ font-family: Arial, sans-serif;
+}
+/* @end */
+
+/* @group Installing */
+
+#installing {
+ font: 13px Arial, sans-serif;
+}
+
+#installing p,
+#glyphs p{
+ line-height: 1.2em;
+ margin-bottom: 18px;
+ font: 13px Arial, sans-serif;
+}
+
+
+
+#installing h3{
+ font-size: 15px;
+ margin-top: 18px;
+}
+
+/* @end */
+
+#rendering h1 {
+ font-family: Arial, sans-serif;
+}
+.render_table td {
+ font: 11px "Courier New", Courier, mono;
+ vertical-align: middle;
+}
+
+
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/stylesheet.css b/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/stylesheet.css
new file mode 100644
index 0000000..4362543
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_medium_macroman/stylesheet.css
@@ -0,0 +1,13 @@
+@font-face {
+ font-family: 'abhaya_libremedium';
+ src: url('AbhayaLibre-Medium-webfont.eot');
+ src: url('AbhayaLibre-Medium-webfont.eot?#iefix') format('embedded-opentype'),
+ url('AbhayaLibre-Medium-webfont.woff2') format('woff2'),
+ url('AbhayaLibre-Medium-webfont.woff') format('woff'),
+ url('AbhayaLibre-Medium-webfont.ttf') format('truetype'),
+ url('AbhayaLibre-Medium-webfont.svg#abhaya_libremedium') format('svg');
+ font-weight: normal;
+ font-style: normal;
+
+}
+
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/AbhayaLibre-Regular-demo.html b/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/AbhayaLibre-Regular-demo.html
new file mode 100644
index 0000000..12a4c36
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/AbhayaLibre-Regular-demo.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript">
+ (function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
+ if(typeof param.defaultContent=="number")
+ {var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
+ $(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
+ function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
+ {$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
+ $(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
+ </script>
+ <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
+
+ <style type="text/css">
+ body{
+ font-family: 'abhaya_libreregular';
+ }
+</style>
+
+<title>Abhaya Libre Regular Specimen</title>
+
+
+ <script type="text/javascript" charset="utf-8">
+ $(document).ready(function() {
+ $('#container').easyTabs({defaultContent:1});
+ });
+ </script>
+</head>
+
+<body>
+<div id="container">
+ <div id="header">
+ Abhaya Libre Regular </div>
+ <ul class="tabs">
+ <li><a href="#specimen">Specimen</a></li>
+ <li><a href="#layout">Sample Layout</a></li>
+ <li><a href="#installing">Installing Webfonts</a></li>
+
+ </ul>
+
+ <div id="main_content">
+
+
+ <div id="specimen">
+
+ <div class="section">
+ <div class="grid12 firstcol">
+ <div class="huge">AaBb</div>
+ </div>
+ </div>
+
+ <div class="section">
+ <div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
+ </div>
+ <div class="section">
+ <div class="grid12 firstcol">
+ <table class="sample_table">
+ <tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ </table>
+
+ </div>
+
+ </div>
+
+
+
+ <div class="section" id="bodycomparison">
+
+
+ <div id="xheight">
+ <div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
+ <div class="fontbody" style="z-index:1">
+ body<span>Abhaya Libre Regular</span>
+ </div>
+ <div class="arialbody" style="z-index:1">
+ body<span>Arial</span>
+ </div>
+ <div class="verdanabody" style="z-index:1">
+ body<span>Verdana</span>
+ </div>
+ <div class="georgiabody" style="z-index:1">
+ body<span>Georgia</span>
+ </div>
+
+
+
+ </div>
+
+
+ <div class="section psample psample_row1" id="">
+
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+ <div class="section psample psample_row2" id="">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row4" id="">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+
+
+
+ <div class="section psample psample_row1 fullreverse">
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row2 fullreverse">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+
+
+
+ </div>
+
+ <div id="layout">
+
+ <div class="section">
+
+ <div class="grid12 firstcol">
+ <h1>Lorem Ipsum Dolor</h1>
+ <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+ <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+ </div>
+ </div>
+ <div class="section">
+ <div class="grid8 firstcol">
+ <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+ <h3>Pellentesque ornare sem</h3>
+
+ <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+ <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+ <h3>Cras mattis consectetur</h3>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+ <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+
+ <div class="grid4 sidebar">
+
+ <div class="box reverse">
+ <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+ </div>
+
+ <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+ <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+ </div>
+ </div>
+
+ </div>
+
+
+
+
+
+
+
+
+
+ <div id="specs">
+
+ </div>
+
+ <div id="installing">
+ <div class="section">
+ <div class="grid7 firstcol">
+ <h1>Installing Webfonts</h1>
+
+ <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+ <h2>1. Upload your webfonts</h2>
+ <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+ <h2>2. Include the webfont stylesheet</h2>
+ <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{
+ font-family: 'MyWebFont';
+ src: url('WebFont.eot');
+ src: url('WebFont.eot?iefix') format('eot'),
+ url('WebFont.woff') format('woff'),
+ url('WebFont.ttf') format('truetype'),
+ url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+ <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+ <code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
+
+ <h2>3. Modify your own stylesheet</h2>
+ <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'MyWebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+ </div>
+
+ <div class="grid5 sidebar">
+ <div class="box">
+ <h2>Troubleshooting<br />Font-Face Problems</h2>
+ <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+ <h3>Fonts not showing in any browser</h3>
+
+ <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+ <h3>Fonts not loading in iPhone or iPad</h3>
+
+ <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+ <h3>Fonts not loading in Firefox</h3>
+
+ <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+ <h3>Fonts not loading in IE</h3>
+
+ <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+ <h3>Fonts not loading in IE9</h3>
+
+ <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+ <div id="footer">
+ <p>©2010-2011 Fontspring. All rights reserved.</p>
+ </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/AbhayaLibre-Regular-webfont.woff b/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/AbhayaLibre-Regular-webfont.woff
new file mode 100644
index 0000000..d661813
Binary files /dev/null and b/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/AbhayaLibre-Regular-webfont.woff differ
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/specimen_files/grid_12-825-55-15.css b/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/specimen_files/grid_12-825-55-15.css
new file mode 100644
index 0000000..3d6aef7
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/specimen_files/grid_12-825-55-15.css
@@ -0,0 +1,129 @@
+/*Notes about grid:
+Columns: 12
+Grid Width: 825px
+Column Width: 55px
+Gutter Width: 15px
+-------------------------------*/
+
+
+
+.section {margin-bottom: 18px;
+}
+.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
+.section {*zoom: 1;}
+
+.section .firstcolumn,
+.section .firstcol {margin-left: 0;}
+
+
+/* Border on left hand side of a column. */
+.border {
+ padding-left: 7px;
+ margin-left: 7px;
+ border-left: 1px solid #eee;
+}
+
+/* Border with more whitespace, spans one column. */
+.colborder {
+ padding-left: 42px;
+ margin-left: 42px;
+ border-left: 1px solid #eee;
+}
+
+
+
+/* The Grid Classes */
+.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
+{margin-left: 15px;float: left;display: inline; overflow: hidden;}
+
+
+.width1, .grid1, .span-1 {width: 55px;}
+.width1_2cols,.grid1_2cols {width: 20px;}
+.width1_3cols,.grid1_3cols {width: 8px;}
+.width1_4cols,.grid1_4cols {width: 2px;}
+.input_width1 {width: 49px;}
+
+.width2, .grid2, .span-2 {width: 125px;}
+.width2_3cols,.grid2_3cols {width: 31px;}
+.width2_4cols,.grid2_4cols {width: 20px;}
+.input_width2 {width: 119px;}
+
+.width3, .grid3, .span-3 {width: 195px;}
+.width3_2cols,.grid3_2cols {width: 90px;}
+.width3_4cols,.grid3_4cols {width: 37px;}
+.input_width3 {width: 189px;}
+
+.width4, .grid4, .span-4 {width: 265px;}
+.width4_3cols,.grid4_3cols {width: 78px;}
+.input_width4 {width: 259px;}
+
+.width5, .grid5, .span-5 {width: 335px;}
+.width5_2cols,.grid5_2cols {width: 160px;}
+.width5_3cols,.grid5_3cols {width: 101px;}
+.width5_4cols,.grid5_4cols {width: 72px;}
+.input_width5 {width: 329px;}
+
+.width6, .grid6, .span-6 {width: 405px;}
+.width6_4cols,.grid6_4cols {width: 90px;}
+.input_width6 {width: 399px;}
+
+.width7, .grid7, .span-7 {width: 475px;}
+.width7_2cols,.grid7_2cols {width: 230px;}
+.width7_3cols,.grid7_3cols {width: 148px;}
+.width7_4cols,.grid7_4cols {width: 107px;}
+.input_width7 {width: 469px;}
+
+.width8, .grid8, .span-8 {width: 545px;}
+.width8_3cols,.grid8_3cols {width: 171px;}
+.input_width8 {width: 539px;}
+
+.width9, .grid9, .span-9 {width: 615px;}
+.width9_2cols,.grid9_2cols {width: 300px;}
+.width9_4cols,.grid9_4cols {width: 142px;}
+.input_width9 {width: 609px;}
+
+.width10, .grid10, .span-10 {width: 685px;}
+.width10_3cols,.grid10_3cols {width: 218px;}
+.width10_4cols,.grid10_4cols {width: 160px;}
+.input_width10 {width: 679px;}
+
+.width11, .grid11, .span-11 {width: 755px;}
+.width11_2cols,.grid11_2cols {width: 370px;}
+.width11_3cols,.grid11_3cols {width: 241px;}
+.width11_4cols,.grid11_4cols {width: 177px;}
+.input_width11 {width: 749px;}
+
+.width12, .grid12, .span-12 {width: 825px;}
+.input_width12 {width: 819px;}
+
+/* Subdivided grid spaces */
+.emptycols_left1, .prepend-1 {padding-left: 70px;}
+.emptycols_right1, .append-1 {padding-right: 70px;}
+.emptycols_left2, .prepend-2 {padding-left: 140px;}
+.emptycols_right2, .append-2 {padding-right: 140px;}
+.emptycols_left3, .prepend-3 {padding-left: 210px;}
+.emptycols_right3, .append-3 {padding-right: 210px;}
+.emptycols_left4, .prepend-4 {padding-left: 280px;}
+.emptycols_right4, .append-4 {padding-right: 280px;}
+.emptycols_left5, .prepend-5 {padding-left: 350px;}
+.emptycols_right5, .append-5 {padding-right: 350px;}
+.emptycols_left6, .prepend-6 {padding-left: 420px;}
+.emptycols_right6, .append-6 {padding-right: 420px;}
+.emptycols_left7, .prepend-7 {padding-left: 490px;}
+.emptycols_right7, .append-7 {padding-right: 490px;}
+.emptycols_left8, .prepend-8 {padding-left: 560px;}
+.emptycols_right8, .append-8 {padding-right: 560px;}
+.emptycols_left9, .prepend-9 {padding-left: 630px;}
+.emptycols_right9, .append-9 {padding-right: 630px;}
+.emptycols_left10, .prepend-10 {padding-left: 700px;}
+.emptycols_right10, .append-10 {padding-right: 700px;}
+.emptycols_left11, .prepend-11 {padding-left: 770px;}
+.emptycols_right11, .append-11 {padding-right: 770px;}
+.pull-1 {margin-left: -70px;}
+.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
+.pull-2 {margin-left: -140px;}
+.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
+.pull-3 {margin-left: -210px;}
+.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
+.pull-4 {margin-left: -280px;}
+.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
\ No newline at end of file
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/specimen_files/specimen_stylesheet.css b/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/specimen_files/specimen_stylesheet.css
new file mode 100644
index 0000000..aecc43c
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/specimen_files/specimen_stylesheet.css
@@ -0,0 +1,396 @@
+@import url('grid_12-825-55-15.css');
+
+/*
+ CSS Reset by Eric Meyer - Released under Public Domain
+ http://meyerweb.com/eric/tools/css/reset/
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, table,
+caption, tbody, tfoot, thead, tr, th, td
+ {margin: 0;padding: 0;border: 0;outline: 0;
+ font-size: 100%;vertical-align: baseline;
+ background: transparent;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after,
+q:before, q:after {content: ''; content: none;}
+:focus {outline: 0;}
+ins {text-decoration: none;}
+del {text-decoration: line-through;}
+table {border-collapse: collapse;border-spacing: 0;}
+
+
+
+
+body {
+ color: #000;
+ background-color: #dcdcdc;
+}
+
+a {
+ text-decoration: none;
+ color: #1883ba;
+}
+
+h1{
+ font-size: 32px;
+ font-weight: normal;
+ font-style: normal;
+ margin-bottom: 18px;
+}
+
+h2{
+ font-size: 18px;
+}
+
+#container {
+ width: 865px;
+ margin: 0px auto;
+}
+
+
+#header {
+ padding: 20px;
+ font-size: 36px;
+ background-color: #000;
+ color: #fff;
+}
+
+#header span {
+ color: #666;
+}
+#main_content {
+ background-color: #fff;
+ padding: 60px 20px 20px;
+}
+
+
+#footer p {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 50px;
+ color: #333;
+ font: 10px Arial, sans-serif;
+}
+
+.tabs {
+ width: 100%;
+ height: 31px;
+ background-color: #444;
+}
+.tabs li {
+ float: left;
+ margin: 0;
+ overflow: hidden;
+ background-color: #444;
+}
+.tabs li a {
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ font: bold 11px/11px 'Arial';
+ text-transform: uppercase;
+ padding: 10px 15px;
+ border-right: 1px solid #fff;
+}
+
+.tabs li a:hover {
+ background-color: #00b3ff;
+
+}
+
+.tabs li.active a {
+ color: #000;
+ background-color: #fff;
+}
+
+
+
+div.huge {
+
+ font-size: 300px;
+ line-height: 1em;
+ padding: 0;
+ letter-spacing: -.02em;
+ overflow: hidden;
+}
+div.glyph_range {
+ font-size: 72px;
+ line-height: 1.1em;
+}
+
+.size10{ font-size: 10px; }
+.size11{ font-size: 11px; }
+.size12{ font-size: 12px; }
+.size13{ font-size: 13px; }
+.size14{ font-size: 14px; }
+.size16{ font-size: 16px; }
+.size18{ font-size: 18px; }
+.size20{ font-size: 20px; }
+.size24{ font-size: 24px; }
+.size30{ font-size: 30px; }
+.size36{ font-size: 36px; }
+.size48{ font-size: 48px; }
+.size60{ font-size: 60px; }
+.size72{ font-size: 72px; }
+.size90{ font-size: 90px; }
+
+
+.psample_row1 { height: 120px;}
+.psample_row1 { height: 120px;}
+.psample_row2 { height: 160px;}
+.psample_row3 { height: 160px;}
+.psample_row4 { height: 160px;}
+
+.psample {
+ overflow: hidden;
+ position: relative;
+}
+.psample p {
+ line-height: 1.3em;
+ display: block;
+ overflow: hidden;
+ margin: 0;
+}
+
+.psample span {
+ margin-right: .5em;
+}
+
+.white_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
+ position: absolute;
+ bottom: 0;
+}
+.black_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
+ position: absolute;
+ bottom: 0;
+}
+.fullreverse {
+ background: #000 !important;
+ color: #fff !important;
+ margin-left: -20px;
+ padding-left: 20px;
+ margin-right: -20px;
+ padding-right: 20px;
+ padding: 20px;
+ margin-bottom:0;
+}
+
+
+.sample_table td {
+ padding-top: 3px;
+ padding-bottom:5px;
+ padding-left: 5px;
+ vertical-align: middle;
+ line-height: 1.2em;
+}
+
+.sample_table td:first-child {
+ background-color: #eee;
+ text-align: right;
+ padding-right: 5px;
+ padding-left: 0;
+ padding: 5px;
+ font: 11px/12px "Courier New", Courier, mono;
+}
+
+code {
+ white-space: pre;
+ background-color: #eee;
+ display: block;
+ padding: 10px;
+ margin-bottom: 18px;
+ overflow: auto;
+}
+
+
+.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
+
+.box {
+ padding: 18px;
+ margin-bottom: 18px;
+ background: #eee;
+}
+
+.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
+
+#bodycomparison {
+ position: relative;
+ overflow: hidden;
+ font-size: 72px;
+ height: 90px;
+ white-space: nowrap;
+}
+
+#bodycomparison div{
+ font-size: 72px;
+ line-height: 90px;
+ display: inline;
+ margin: 0 15px 0 0;
+ padding: 0;
+}
+
+#bodycomparison div span{
+ font: 10px Arial;
+ position: absolute;
+ left: 0;
+}
+#xheight {
+ float: none;
+ position: absolute;
+ color: #d9f3ff;
+ font-size: 72px;
+ line-height: 90px;
+}
+
+.fontbody {
+ position: relative;
+}
+.arialbody{
+ font-family: Arial;
+ position: relative;
+}
+.verdanabody{
+ font-family: Verdana;
+ position: relative;
+}
+.georgiabody{
+ font-family: Georgia;
+ position: relative;
+}
+
+/* @group Layout page
+ */
+
+#layout h1 {
+ font-size: 36px;
+ line-height: 42px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h2 {
+ font-size: 24px;
+ line-height: 23px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h3 {
+ font-size: 22px;
+ line-height: 1.4em;
+ margin-top: 1em;
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+#layout p.byline {
+ font-size: 12px;
+ margin-top: 18px;
+ line-height: 12px;
+ margin-bottom: 0;
+}
+#layout p {
+ font-size: 14px;
+ line-height: 21px;
+ margin-bottom: .5em;
+}
+
+#layout p.large{
+ font-size: 18px;
+ line-height: 26px;
+}
+
+#layout .sidebar p{
+ font-size: 12px;
+ line-height: 1.4em;
+}
+
+#layout p.caption {
+ font-size: 10px;
+ margin-top: -16px;
+ margin-bottom: 18px;
+}
+
+/* @end */
+
+/* @group Glyphs */
+
+#glyph_chart div{
+ background-color: #d9f3ff;
+ color: black;
+ float: left;
+ font-size: 36px;
+ height: 1.2em;
+ line-height: 1.2em;
+ margin-bottom: 1px;
+ margin-right: 1px;
+ text-align: center;
+ width: 1.2em;
+ position: relative;
+ padding: .6em .2em .2em;
+}
+
+#glyph_chart div p {
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: block;
+ text-align: center;
+ font: bold 9px Arial, sans-serif;
+ background-color: #3a768f;
+ width: 100%;
+ color: #fff;
+ padding: 2px 0;
+}
+
+
+#glyphs h1 {
+ font-family: Arial, sans-serif;
+}
+/* @end */
+
+/* @group Installing */
+
+#installing {
+ font: 13px Arial, sans-serif;
+}
+
+#installing p,
+#glyphs p{
+ line-height: 1.2em;
+ margin-bottom: 18px;
+ font: 13px Arial, sans-serif;
+}
+
+
+
+#installing h3{
+ font-size: 15px;
+ margin-top: 18px;
+}
+
+/* @end */
+
+#rendering h1 {
+ font-family: Arial, sans-serif;
+}
+.render_table td {
+ font: 11px "Courier New", Courier, mono;
+ vertical-align: middle;
+}
+
+
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/stylesheet.css b/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/stylesheet.css
new file mode 100644
index 0000000..d3bb309
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_regular_macroman/stylesheet.css
@@ -0,0 +1,13 @@
+@font-face {
+ font-family: 'abhaya_libreregular';
+ src: url('AbhayaLibre-Regular-webfont.eot');
+ src: url('AbhayaLibre-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+ url('AbhayaLibre-Regular-webfont.woff2') format('woff2'),
+ url('AbhayaLibre-Regular-webfont.woff') format('woff'),
+ url('AbhayaLibre-Regular-webfont.ttf') format('truetype'),
+ url('AbhayaLibre-Regular-webfont.svg#abhaya_libreregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+
+}
+
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/AbhayaLibre-SemiBold-demo.html b/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/AbhayaLibre-SemiBold-demo.html
new file mode 100644
index 0000000..dca3c4c
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/AbhayaLibre-SemiBold-demo.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript">
+ (function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
+ if(typeof param.defaultContent=="number")
+ {var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
+ $(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
+ function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
+ {$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
+ $(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
+ </script>
+ <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
+
+ <style type="text/css">
+ body{
+ font-family: 'abhaya_libresemibold';
+ }
+</style>
+
+<title>Abhaya Libre SemiBold Specimen</title>
+
+
+ <script type="text/javascript" charset="utf-8">
+ $(document).ready(function() {
+ $('#container').easyTabs({defaultContent:1});
+ });
+ </script>
+</head>
+
+<body>
+<div id="container">
+ <div id="header">
+ Abhaya Libre SemiBold </div>
+ <ul class="tabs">
+ <li><a href="#specimen">Specimen</a></li>
+ <li><a href="#layout">Sample Layout</a></li>
+ <li><a href="#installing">Installing Webfonts</a></li>
+
+ </ul>
+
+ <div id="main_content">
+
+
+ <div id="specimen">
+
+ <div class="section">
+ <div class="grid12 firstcol">
+ <div class="huge">AaBb</div>
+ </div>
+ </div>
+
+ <div class="section">
+ <div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
+ </div>
+ <div class="section">
+ <div class="grid12 firstcol">
+ <table class="sample_table">
+ <tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ </table>
+
+ </div>
+
+ </div>
+
+
+
+ <div class="section" id="bodycomparison">
+
+
+ <div id="xheight">
+ <div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
+ <div class="fontbody" style="z-index:1">
+ body<span>Abhaya Libre SemiBold</span>
+ </div>
+ <div class="arialbody" style="z-index:1">
+ body<span>Arial</span>
+ </div>
+ <div class="verdanabody" style="z-index:1">
+ body<span>Verdana</span>
+ </div>
+ <div class="georgiabody" style="z-index:1">
+ body<span>Georgia</span>
+ </div>
+
+
+
+ </div>
+
+
+ <div class="section psample psample_row1" id="">
+
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+ <div class="section psample psample_row2" id="">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row4" id="">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+
+
+
+ <div class="section psample psample_row1 fullreverse">
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row2 fullreverse">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+
+
+
+ </div>
+
+ <div id="layout">
+
+ <div class="section">
+
+ <div class="grid12 firstcol">
+ <h1>Lorem Ipsum Dolor</h1>
+ <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+ <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+ </div>
+ </div>
+ <div class="section">
+ <div class="grid8 firstcol">
+ <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+ <h3>Pellentesque ornare sem</h3>
+
+ <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+ <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+ <h3>Cras mattis consectetur</h3>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+ <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+
+ <div class="grid4 sidebar">
+
+ <div class="box reverse">
+ <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+ </div>
+
+ <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+ <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+ </div>
+ </div>
+
+ </div>
+
+
+
+
+
+
+
+
+
+ <div id="specs">
+
+ </div>
+
+ <div id="installing">
+ <div class="section">
+ <div class="grid7 firstcol">
+ <h1>Installing Webfonts</h1>
+
+ <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+ <h2>1. Upload your webfonts</h2>
+ <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+ <h2>2. Include the webfont stylesheet</h2>
+ <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{
+ font-family: 'MyWebFont';
+ src: url('WebFont.eot');
+ src: url('WebFont.eot?iefix') format('eot'),
+ url('WebFont.woff') format('woff'),
+ url('WebFont.ttf') format('truetype'),
+ url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+ <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+ <code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
+
+ <h2>3. Modify your own stylesheet</h2>
+ <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'MyWebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+ </div>
+
+ <div class="grid5 sidebar">
+ <div class="box">
+ <h2>Troubleshooting<br />Font-Face Problems</h2>
+ <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+ <h3>Fonts not showing in any browser</h3>
+
+ <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+ <h3>Fonts not loading in iPhone or iPad</h3>
+
+ <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+ <h3>Fonts not loading in Firefox</h3>
+
+ <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+ <h3>Fonts not loading in IE</h3>
+
+ <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+ <h3>Fonts not loading in IE9</h3>
+
+ <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+ <div id="footer">
+ <p>©2010-2011 Fontspring. All rights reserved.</p>
+ </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/AbhayaLibre-SemiBold-webfont.woff b/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/AbhayaLibre-SemiBold-webfont.woff
new file mode 100644
index 0000000..58d78f7
Binary files /dev/null and b/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/AbhayaLibre-SemiBold-webfont.woff differ
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/specimen_files/grid_12-825-55-15.css b/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/specimen_files/grid_12-825-55-15.css
new file mode 100644
index 0000000..3d6aef7
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/specimen_files/grid_12-825-55-15.css
@@ -0,0 +1,129 @@
+/*Notes about grid:
+Columns: 12
+Grid Width: 825px
+Column Width: 55px
+Gutter Width: 15px
+-------------------------------*/
+
+
+
+.section {margin-bottom: 18px;
+}
+.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
+.section {*zoom: 1;}
+
+.section .firstcolumn,
+.section .firstcol {margin-left: 0;}
+
+
+/* Border on left hand side of a column. */
+.border {
+ padding-left: 7px;
+ margin-left: 7px;
+ border-left: 1px solid #eee;
+}
+
+/* Border with more whitespace, spans one column. */
+.colborder {
+ padding-left: 42px;
+ margin-left: 42px;
+ border-left: 1px solid #eee;
+}
+
+
+
+/* The Grid Classes */
+.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
+{margin-left: 15px;float: left;display: inline; overflow: hidden;}
+
+
+.width1, .grid1, .span-1 {width: 55px;}
+.width1_2cols,.grid1_2cols {width: 20px;}
+.width1_3cols,.grid1_3cols {width: 8px;}
+.width1_4cols,.grid1_4cols {width: 2px;}
+.input_width1 {width: 49px;}
+
+.width2, .grid2, .span-2 {width: 125px;}
+.width2_3cols,.grid2_3cols {width: 31px;}
+.width2_4cols,.grid2_4cols {width: 20px;}
+.input_width2 {width: 119px;}
+
+.width3, .grid3, .span-3 {width: 195px;}
+.width3_2cols,.grid3_2cols {width: 90px;}
+.width3_4cols,.grid3_4cols {width: 37px;}
+.input_width3 {width: 189px;}
+
+.width4, .grid4, .span-4 {width: 265px;}
+.width4_3cols,.grid4_3cols {width: 78px;}
+.input_width4 {width: 259px;}
+
+.width5, .grid5, .span-5 {width: 335px;}
+.width5_2cols,.grid5_2cols {width: 160px;}
+.width5_3cols,.grid5_3cols {width: 101px;}
+.width5_4cols,.grid5_4cols {width: 72px;}
+.input_width5 {width: 329px;}
+
+.width6, .grid6, .span-6 {width: 405px;}
+.width6_4cols,.grid6_4cols {width: 90px;}
+.input_width6 {width: 399px;}
+
+.width7, .grid7, .span-7 {width: 475px;}
+.width7_2cols,.grid7_2cols {width: 230px;}
+.width7_3cols,.grid7_3cols {width: 148px;}
+.width7_4cols,.grid7_4cols {width: 107px;}
+.input_width7 {width: 469px;}
+
+.width8, .grid8, .span-8 {width: 545px;}
+.width8_3cols,.grid8_3cols {width: 171px;}
+.input_width8 {width: 539px;}
+
+.width9, .grid9, .span-9 {width: 615px;}
+.width9_2cols,.grid9_2cols {width: 300px;}
+.width9_4cols,.grid9_4cols {width: 142px;}
+.input_width9 {width: 609px;}
+
+.width10, .grid10, .span-10 {width: 685px;}
+.width10_3cols,.grid10_3cols {width: 218px;}
+.width10_4cols,.grid10_4cols {width: 160px;}
+.input_width10 {width: 679px;}
+
+.width11, .grid11, .span-11 {width: 755px;}
+.width11_2cols,.grid11_2cols {width: 370px;}
+.width11_3cols,.grid11_3cols {width: 241px;}
+.width11_4cols,.grid11_4cols {width: 177px;}
+.input_width11 {width: 749px;}
+
+.width12, .grid12, .span-12 {width: 825px;}
+.input_width12 {width: 819px;}
+
+/* Subdivided grid spaces */
+.emptycols_left1, .prepend-1 {padding-left: 70px;}
+.emptycols_right1, .append-1 {padding-right: 70px;}
+.emptycols_left2, .prepend-2 {padding-left: 140px;}
+.emptycols_right2, .append-2 {padding-right: 140px;}
+.emptycols_left3, .prepend-3 {padding-left: 210px;}
+.emptycols_right3, .append-3 {padding-right: 210px;}
+.emptycols_left4, .prepend-4 {padding-left: 280px;}
+.emptycols_right4, .append-4 {padding-right: 280px;}
+.emptycols_left5, .prepend-5 {padding-left: 350px;}
+.emptycols_right5, .append-5 {padding-right: 350px;}
+.emptycols_left6, .prepend-6 {padding-left: 420px;}
+.emptycols_right6, .append-6 {padding-right: 420px;}
+.emptycols_left7, .prepend-7 {padding-left: 490px;}
+.emptycols_right7, .append-7 {padding-right: 490px;}
+.emptycols_left8, .prepend-8 {padding-left: 560px;}
+.emptycols_right8, .append-8 {padding-right: 560px;}
+.emptycols_left9, .prepend-9 {padding-left: 630px;}
+.emptycols_right9, .append-9 {padding-right: 630px;}
+.emptycols_left10, .prepend-10 {padding-left: 700px;}
+.emptycols_right10, .append-10 {padding-right: 700px;}
+.emptycols_left11, .prepend-11 {padding-left: 770px;}
+.emptycols_right11, .append-11 {padding-right: 770px;}
+.pull-1 {margin-left: -70px;}
+.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
+.pull-2 {margin-left: -140px;}
+.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
+.pull-3 {margin-left: -210px;}
+.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
+.pull-4 {margin-left: -280px;}
+.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
\ No newline at end of file
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/specimen_files/specimen_stylesheet.css b/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/specimen_files/specimen_stylesheet.css
new file mode 100644
index 0000000..aecc43c
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/specimen_files/specimen_stylesheet.css
@@ -0,0 +1,396 @@
+@import url('grid_12-825-55-15.css');
+
+/*
+ CSS Reset by Eric Meyer - Released under Public Domain
+ http://meyerweb.com/eric/tools/css/reset/
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, table,
+caption, tbody, tfoot, thead, tr, th, td
+ {margin: 0;padding: 0;border: 0;outline: 0;
+ font-size: 100%;vertical-align: baseline;
+ background: transparent;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after,
+q:before, q:after {content: ''; content: none;}
+:focus {outline: 0;}
+ins {text-decoration: none;}
+del {text-decoration: line-through;}
+table {border-collapse: collapse;border-spacing: 0;}
+
+
+
+
+body {
+ color: #000;
+ background-color: #dcdcdc;
+}
+
+a {
+ text-decoration: none;
+ color: #1883ba;
+}
+
+h1{
+ font-size: 32px;
+ font-weight: normal;
+ font-style: normal;
+ margin-bottom: 18px;
+}
+
+h2{
+ font-size: 18px;
+}
+
+#container {
+ width: 865px;
+ margin: 0px auto;
+}
+
+
+#header {
+ padding: 20px;
+ font-size: 36px;
+ background-color: #000;
+ color: #fff;
+}
+
+#header span {
+ color: #666;
+}
+#main_content {
+ background-color: #fff;
+ padding: 60px 20px 20px;
+}
+
+
+#footer p {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 50px;
+ color: #333;
+ font: 10px Arial, sans-serif;
+}
+
+.tabs {
+ width: 100%;
+ height: 31px;
+ background-color: #444;
+}
+.tabs li {
+ float: left;
+ margin: 0;
+ overflow: hidden;
+ background-color: #444;
+}
+.tabs li a {
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ font: bold 11px/11px 'Arial';
+ text-transform: uppercase;
+ padding: 10px 15px;
+ border-right: 1px solid #fff;
+}
+
+.tabs li a:hover {
+ background-color: #00b3ff;
+
+}
+
+.tabs li.active a {
+ color: #000;
+ background-color: #fff;
+}
+
+
+
+div.huge {
+
+ font-size: 300px;
+ line-height: 1em;
+ padding: 0;
+ letter-spacing: -.02em;
+ overflow: hidden;
+}
+div.glyph_range {
+ font-size: 72px;
+ line-height: 1.1em;
+}
+
+.size10{ font-size: 10px; }
+.size11{ font-size: 11px; }
+.size12{ font-size: 12px; }
+.size13{ font-size: 13px; }
+.size14{ font-size: 14px; }
+.size16{ font-size: 16px; }
+.size18{ font-size: 18px; }
+.size20{ font-size: 20px; }
+.size24{ font-size: 24px; }
+.size30{ font-size: 30px; }
+.size36{ font-size: 36px; }
+.size48{ font-size: 48px; }
+.size60{ font-size: 60px; }
+.size72{ font-size: 72px; }
+.size90{ font-size: 90px; }
+
+
+.psample_row1 { height: 120px;}
+.psample_row1 { height: 120px;}
+.psample_row2 { height: 160px;}
+.psample_row3 { height: 160px;}
+.psample_row4 { height: 160px;}
+
+.psample {
+ overflow: hidden;
+ position: relative;
+}
+.psample p {
+ line-height: 1.3em;
+ display: block;
+ overflow: hidden;
+ margin: 0;
+}
+
+.psample span {
+ margin-right: .5em;
+}
+
+.white_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
+ position: absolute;
+ bottom: 0;
+}
+.black_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
+ position: absolute;
+ bottom: 0;
+}
+.fullreverse {
+ background: #000 !important;
+ color: #fff !important;
+ margin-left: -20px;
+ padding-left: 20px;
+ margin-right: -20px;
+ padding-right: 20px;
+ padding: 20px;
+ margin-bottom:0;
+}
+
+
+.sample_table td {
+ padding-top: 3px;
+ padding-bottom:5px;
+ padding-left: 5px;
+ vertical-align: middle;
+ line-height: 1.2em;
+}
+
+.sample_table td:first-child {
+ background-color: #eee;
+ text-align: right;
+ padding-right: 5px;
+ padding-left: 0;
+ padding: 5px;
+ font: 11px/12px "Courier New", Courier, mono;
+}
+
+code {
+ white-space: pre;
+ background-color: #eee;
+ display: block;
+ padding: 10px;
+ margin-bottom: 18px;
+ overflow: auto;
+}
+
+
+.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
+
+.box {
+ padding: 18px;
+ margin-bottom: 18px;
+ background: #eee;
+}
+
+.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
+
+#bodycomparison {
+ position: relative;
+ overflow: hidden;
+ font-size: 72px;
+ height: 90px;
+ white-space: nowrap;
+}
+
+#bodycomparison div{
+ font-size: 72px;
+ line-height: 90px;
+ display: inline;
+ margin: 0 15px 0 0;
+ padding: 0;
+}
+
+#bodycomparison div span{
+ font: 10px Arial;
+ position: absolute;
+ left: 0;
+}
+#xheight {
+ float: none;
+ position: absolute;
+ color: #d9f3ff;
+ font-size: 72px;
+ line-height: 90px;
+}
+
+.fontbody {
+ position: relative;
+}
+.arialbody{
+ font-family: Arial;
+ position: relative;
+}
+.verdanabody{
+ font-family: Verdana;
+ position: relative;
+}
+.georgiabody{
+ font-family: Georgia;
+ position: relative;
+}
+
+/* @group Layout page
+ */
+
+#layout h1 {
+ font-size: 36px;
+ line-height: 42px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h2 {
+ font-size: 24px;
+ line-height: 23px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h3 {
+ font-size: 22px;
+ line-height: 1.4em;
+ margin-top: 1em;
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+#layout p.byline {
+ font-size: 12px;
+ margin-top: 18px;
+ line-height: 12px;
+ margin-bottom: 0;
+}
+#layout p {
+ font-size: 14px;
+ line-height: 21px;
+ margin-bottom: .5em;
+}
+
+#layout p.large{
+ font-size: 18px;
+ line-height: 26px;
+}
+
+#layout .sidebar p{
+ font-size: 12px;
+ line-height: 1.4em;
+}
+
+#layout p.caption {
+ font-size: 10px;
+ margin-top: -16px;
+ margin-bottom: 18px;
+}
+
+/* @end */
+
+/* @group Glyphs */
+
+#glyph_chart div{
+ background-color: #d9f3ff;
+ color: black;
+ float: left;
+ font-size: 36px;
+ height: 1.2em;
+ line-height: 1.2em;
+ margin-bottom: 1px;
+ margin-right: 1px;
+ text-align: center;
+ width: 1.2em;
+ position: relative;
+ padding: .6em .2em .2em;
+}
+
+#glyph_chart div p {
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: block;
+ text-align: center;
+ font: bold 9px Arial, sans-serif;
+ background-color: #3a768f;
+ width: 100%;
+ color: #fff;
+ padding: 2px 0;
+}
+
+
+#glyphs h1 {
+ font-family: Arial, sans-serif;
+}
+/* @end */
+
+/* @group Installing */
+
+#installing {
+ font: 13px Arial, sans-serif;
+}
+
+#installing p,
+#glyphs p{
+ line-height: 1.2em;
+ margin-bottom: 18px;
+ font: 13px Arial, sans-serif;
+}
+
+
+
+#installing h3{
+ font-size: 15px;
+ margin-top: 18px;
+}
+
+/* @end */
+
+#rendering h1 {
+ font-family: Arial, sans-serif;
+}
+.render_table td {
+ font: 11px "Courier New", Courier, mono;
+ vertical-align: middle;
+}
+
+
diff --git a/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/stylesheet.css b/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/stylesheet.css
new file mode 100644
index 0000000..c19954e
--- /dev/null
+++ b/fonts/abhaya-libre/web fonts/abhayalibre_semibold_macroman/stylesheet.css
@@ -0,0 +1,13 @@
+@font-face {
+ font-family: 'abhaya_libresemibold';
+ src: url('AbhayaLibre-SemiBold-webfont.eot');
+ src: url('AbhayaLibre-SemiBold-webfont.eot?#iefix') format('embedded-opentype'),
+ url('AbhayaLibre-SemiBold-webfont.woff2') format('woff2'),
+ url('AbhayaLibre-SemiBold-webfont.woff') format('woff'),
+ url('AbhayaLibre-SemiBold-webfont.ttf') format('truetype'),
+ url('AbhayaLibre-SemiBold-webfont.svg#abhaya_libresemibold') format('svg');
+ font-weight: normal;
+ font-style: normal;
+
+}
+
diff --git a/fonts/alegreya/Alegreya-Black.woff b/fonts/alegreya/Alegreya-Black.woff
new file mode 100644
index 0000000..0598993
Binary files /dev/null and b/fonts/alegreya/Alegreya-Black.woff differ
diff --git a/fonts/alegreya/Alegreya-Black.woff2 b/fonts/alegreya/Alegreya-Black.woff2
new file mode 100644
index 0000000..fa06867
Binary files /dev/null and b/fonts/alegreya/Alegreya-Black.woff2 differ
diff --git a/fonts/alegreya/Alegreya-BlackItalic.woff b/fonts/alegreya/Alegreya-BlackItalic.woff
new file mode 100644
index 0000000..d42fb75
Binary files /dev/null and b/fonts/alegreya/Alegreya-BlackItalic.woff differ
diff --git a/fonts/alegreya/Alegreya-BlackItalic.woff2 b/fonts/alegreya/Alegreya-BlackItalic.woff2
new file mode 100644
index 0000000..58d7051
Binary files /dev/null and b/fonts/alegreya/Alegreya-BlackItalic.woff2 differ
diff --git a/fonts/alegreya/Alegreya-Bold.woff b/fonts/alegreya/Alegreya-Bold.woff
new file mode 100644
index 0000000..66df414
Binary files /dev/null and b/fonts/alegreya/Alegreya-Bold.woff differ
diff --git a/fonts/alegreya/Alegreya-Bold.woff2 b/fonts/alegreya/Alegreya-Bold.woff2
new file mode 100644
index 0000000..8868127
Binary files /dev/null and b/fonts/alegreya/Alegreya-Bold.woff2 differ
diff --git a/fonts/alegreya/Alegreya-BoldItalic.woff b/fonts/alegreya/Alegreya-BoldItalic.woff
new file mode 100644
index 0000000..3a54a63
Binary files /dev/null and b/fonts/alegreya/Alegreya-BoldItalic.woff differ
diff --git a/fonts/alegreya/Alegreya-BoldItalic.woff2 b/fonts/alegreya/Alegreya-BoldItalic.woff2
new file mode 100644
index 0000000..c243e29
Binary files /dev/null and b/fonts/alegreya/Alegreya-BoldItalic.woff2 differ
diff --git a/fonts/alegreya/Alegreya-Italic.woff b/fonts/alegreya/Alegreya-Italic.woff
new file mode 100644
index 0000000..f4b0e68
Binary files /dev/null and b/fonts/alegreya/Alegreya-Italic.woff differ
diff --git a/fonts/alegreya/Alegreya-Italic.woff2 b/fonts/alegreya/Alegreya-Italic.woff2
new file mode 100644
index 0000000..6348832
Binary files /dev/null and b/fonts/alegreya/Alegreya-Italic.woff2 differ
diff --git a/fonts/alegreya/Alegreya-Regular.woff b/fonts/alegreya/Alegreya-Regular.woff
new file mode 100644
index 0000000..4db3e03
Binary files /dev/null and b/fonts/alegreya/Alegreya-Regular.woff differ
diff --git a/fonts/alegreya/Alegreya-Regular.woff2 b/fonts/alegreya/Alegreya-Regular.woff2
new file mode 100644
index 0000000..fab0060
Binary files /dev/null and b/fonts/alegreya/Alegreya-Regular.woff2 differ
diff --git a/fonts/alegreya/AlegreyaSC-Black.woff b/fonts/alegreya/AlegreyaSC-Black.woff
new file mode 100644
index 0000000..1f12584
Binary files /dev/null and b/fonts/alegreya/AlegreyaSC-Black.woff differ
diff --git a/fonts/alegreya/AlegreyaSC-Black.woff2 b/fonts/alegreya/AlegreyaSC-Black.woff2
new file mode 100644
index 0000000..050bb8e
Binary files /dev/null and b/fonts/alegreya/AlegreyaSC-Black.woff2 differ
diff --git a/fonts/alegreya/AlegreyaSC-BlackItalic.woff b/fonts/alegreya/AlegreyaSC-BlackItalic.woff
new file mode 100644
index 0000000..d3bc989
Binary files /dev/null and b/fonts/alegreya/AlegreyaSC-BlackItalic.woff differ
diff --git a/fonts/alegreya/AlegreyaSC-BlackItalic.woff2 b/fonts/alegreya/AlegreyaSC-BlackItalic.woff2
new file mode 100644
index 0000000..c83e936
Binary files /dev/null and b/fonts/alegreya/AlegreyaSC-BlackItalic.woff2 differ
diff --git a/fonts/alegreya/AlegreyaSC-Bold.woff b/fonts/alegreya/AlegreyaSC-Bold.woff
new file mode 100644
index 0000000..8363530
Binary files /dev/null and b/fonts/alegreya/AlegreyaSC-Bold.woff differ
diff --git a/fonts/alegreya/AlegreyaSC-Bold.woff2 b/fonts/alegreya/AlegreyaSC-Bold.woff2
new file mode 100644
index 0000000..61d3b70
Binary files /dev/null and b/fonts/alegreya/AlegreyaSC-Bold.woff2 differ
diff --git a/fonts/alegreya/AlegreyaSC-BoldItalic.woff b/fonts/alegreya/AlegreyaSC-BoldItalic.woff
new file mode 100644
index 0000000..e9f559b
Binary files /dev/null and b/fonts/alegreya/AlegreyaSC-BoldItalic.woff differ
diff --git a/fonts/alegreya/AlegreyaSC-BoldItalic.woff2 b/fonts/alegreya/AlegreyaSC-BoldItalic.woff2
new file mode 100644
index 0000000..9ded7a2
Binary files /dev/null and b/fonts/alegreya/AlegreyaSC-BoldItalic.woff2 differ
diff --git a/fonts/alegreya/AlegreyaSC-Italic.woff b/fonts/alegreya/AlegreyaSC-Italic.woff
new file mode 100644
index 0000000..d5076ee
Binary files /dev/null and b/fonts/alegreya/AlegreyaSC-Italic.woff differ
diff --git a/fonts/alegreya/AlegreyaSC-Italic.woff2 b/fonts/alegreya/AlegreyaSC-Italic.woff2
new file mode 100644
index 0000000..4055fa2
Binary files /dev/null and b/fonts/alegreya/AlegreyaSC-Italic.woff2 differ
diff --git a/fonts/alegreya/AlegreyaSC-Regular.woff b/fonts/alegreya/AlegreyaSC-Regular.woff
new file mode 100644
index 0000000..4cb7dd4
Binary files /dev/null and b/fonts/alegreya/AlegreyaSC-Regular.woff differ
diff --git a/fonts/alegreya/AlegreyaSC-Regular.woff2 b/fonts/alegreya/AlegreyaSC-Regular.woff2
new file mode 100644
index 0000000..4aa99d0
Binary files /dev/null and b/fonts/alegreya/AlegreyaSC-Regular.woff2 differ
diff --git a/fonts/alegreya/SIL Open Font License.txt b/fonts/alegreya/SIL Open Font License.txt
new file mode 100644
index 0000000..8abf613
--- /dev/null
+++ b/fonts/alegreya/SIL Open Font License.txt
@@ -0,0 +1,44 @@
+Copyright (c) 2011, Juan Pablo del Peral (juan@huertatipografica.com.ar),
+with Reserved Font Names "Alegreya" "Alegreya SC"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
\ No newline at end of file
diff --git a/fonts/alegreya/demo.html b/fonts/alegreya/demo.html
new file mode 100644
index 0000000..ee84cc2
--- /dev/null
+++ b/fonts/alegreya/demo.html
@@ -0,0 +1,511 @@
+<!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">
+ <meta name="robots" content="noindex, noarchive">
+ <meta name="format-detection" content="telephone=no">
+ <title>Transfonter demo</title>
+ <link href="stylesheet.css" rel="stylesheet">
+ <style>
+ /*
+ http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+ */
+ html, body, div, span, applet, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ a, abbr, acronym, address, big, cite, code,
+ del, dfn, em, img, ins, kbd, q, s, samp,
+ small, strike, strong, sub, sup, tt, var,
+ b, u, i, center,
+ dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend,
+ table, caption, tbody, tfoot, thead, tr, th, td,
+ article, aside, canvas, details, embed,
+ figure, figcaption, footer, header, hgroup,
+ menu, nav, output, ruby, section, summary,
+ time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ }
+ /* HTML5 display-role reset for older browsers */
+ article, aside, details, figcaption, figure,
+ footer, header, hgroup, menu, nav, section {
+ display: block;
+ }
+ body {
+ line-height: 1;
+ }
+ ol, ul {
+ list-style: none;
+ }
+ blockquote, q {
+ quotes: none;
+ }
+ blockquote:before, blockquote:after,
+ q:before, q:after {
+ content: '';
+ content: none;
+ }
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+ /* demo styles */
+ body {
+ background: #f0f0f0;
+ color: #000;
+ }
+ .page {
+ background: #fff;
+ width: 920px;
+ margin: 0 auto;
+ padding: 20px 20px 0 20px;
+ overflow: hidden;
+ }
+ .font-container {
+ overflow-x: auto;
+ overflow-y: hidden;
+ margin-bottom: 40px;
+ line-height: 1.3;
+ white-space: nowrap;
+ padding-bottom: 5px;
+ }
+ h1 {
+ position: relative;
+ background: #444;
+ font-size: 32px;
+ color: #fff;
+ padding: 10px 20px;
+ margin: 0 -20px 12px -20px;
+ }
+ .letters {
+ font-size: 25px;
+ margin-bottom: 20px;
+ }
+ .s10:before {
+ content: '10px';
+ }
+ .s11:before {
+ content: '11px';
+ }
+ .s12:before {
+ content: '12px';
+ }
+ .s14:before {
+ content: '14px';
+ }
+ .s18:before {
+ content: '18px';
+ }
+ .s24:before {
+ content: '24px';
+ }
+ .s30:before {
+ content: '30px';
+ }
+ .s36:before {
+ content: '36px';
+ }
+ .s48:before {
+ content: '48px';
+ }
+ .s60:before {
+ content: '60px';
+ }
+ .s72:before {
+ content: '72px';
+ }
+ .s10:before, .s11:before, .s12:before, .s14:before,
+ .s18:before, .s24:before, .s30:before, .s36:before,
+ .s48:before, .s60:before, .s72:before {
+ font-family: Arial, sans-serif;
+ font-size: 10px;
+ font-weight: normal;
+ font-style: normal;
+ color: #999;
+ padding-right: 6px;
+ }
+ pre {
+ display: block;
+ padding: 9px;
+ margin: 0 0 12px;
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+ font-size: 13px;
+ line-height: 1.428571429;
+ color: #333;
+ font-weight: normal;
+ font-style: normal;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
+ overflow-x: auto;
+ border-radius: 4px;
+ }
+ /* responsive */
+ @media (max-width: 959px) {
+ .page {
+ width: auto;
+ margin: 0;
+ }
+ }
+ </style>
+</head>
+<body>
+<div class="page">
+ <div class="demo">
+ <h1 style="font-family: 'Alegreya'; font-weight: 900; font-style: normal;">Alegreya Black</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Alegreya';
+ font-weight: 900;
+ font-style: normal;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Alegreya-Black.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Alegreya'; font-weight: 900; font-style: normal;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Alegreya'; font-weight: bold; font-style: italic;">Alegreya Bold Italic</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Alegreya';
+ font-weight: bold;
+ font-style: italic;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Alegreya-BoldItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Alegreya'; font-weight: bold; font-style: italic;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Alegreya SC'; font-weight: normal; font-style: normal;">Alegreya SC</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Alegreya SC';
+ font-weight: normal;
+ font-style: normal;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="AlegreyaSC-Regular.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Alegreya SC'; font-weight: normal; font-style: normal;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Alegreya'; font-weight: normal; font-style: italic;">Alegreya Italic</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Alegreya';
+ font-weight: normal;
+ font-style: italic;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Alegreya-Italic.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Alegreya'; font-weight: normal; font-style: italic;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Alegreya SC'; font-weight: 900; font-style: italic;">Alegreya SC Black Italic</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Alegreya SC';
+ font-weight: 900;
+ font-style: italic;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="AlegreyaSC-BlackItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Alegreya SC'; font-weight: 900; font-style: italic;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Alegreya SC'; font-weight: normal; font-style: italic;">Alegreya SC Italic</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Alegreya SC';
+ font-weight: normal;
+ font-style: italic;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="AlegreyaSC-Italic.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Alegreya SC'; font-weight: normal; font-style: italic;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Alegreya SC'; font-weight: bold; font-style: italic;">Alegreya SC Bold Italic</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Alegreya SC';
+ font-weight: bold;
+ font-style: italic;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="AlegreyaSC-BoldItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Alegreya SC'; font-weight: bold; font-style: italic;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Alegreya'; font-weight: normal; font-style: normal;">Alegreya</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Alegreya';
+ font-weight: normal;
+ font-style: normal;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Alegreya-Regular.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Alegreya'; font-weight: normal; font-style: normal;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Alegreya SC'; font-weight: bold; font-style: normal;">Alegreya SC Bold</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Alegreya SC';
+ font-weight: bold;
+ font-style: normal;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="AlegreyaSC-Bold.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Alegreya SC'; font-weight: bold; font-style: normal;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Alegreya'; font-weight: 900; font-style: italic;">Alegreya Black Italic</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Alegreya';
+ font-weight: 900;
+ font-style: italic;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Alegreya-BlackItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Alegreya'; font-weight: 900; font-style: italic;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Alegreya SC'; font-weight: 900; font-style: normal;">Alegreya SC Black</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Alegreya SC';
+ font-weight: 900;
+ font-style: normal;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="AlegreyaSC-Black.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Alegreya SC'; font-weight: 900; font-style: normal;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Alegreya'; font-weight: bold; font-style: normal;">Alegreya Bold</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Alegreya';
+ font-weight: bold;
+ font-style: normal;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Alegreya-Bold.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Alegreya'; font-weight: bold; font-style: normal;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+</div>
+</body>
+</html>
diff --git a/fonts/alegreya/stylesheet.css b/fonts/alegreya/stylesheet.css
new file mode 100644
index 0000000..1afddcf
--- /dev/null
+++ b/fonts/alegreya/stylesheet.css
@@ -0,0 +1,108 @@
+@font-face {
+ font-family: 'Alegreya';
+ src: url('Alegreya-Black.woff2') format('woff2'),
+ url('Alegreya-Black.woff') format('woff');
+ font-weight: 900;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Alegreya';
+ src: url('Alegreya-BoldItalic.woff2') format('woff2'),
+ url('Alegreya-BoldItalic.woff') format('woff');
+ font-weight: bold;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Alegreya SC';
+ src: url('AlegreyaSC-Regular.woff2') format('woff2'),
+ url('AlegreyaSC-Regular.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Alegreya';
+ src: url('Alegreya-Italic.woff2') format('woff2'),
+ url('Alegreya-Italic.woff') format('woff');
+ font-weight: normal;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Alegreya SC';
+ src: url('AlegreyaSC-BlackItalic.woff2') format('woff2'),
+ url('AlegreyaSC-BlackItalic.woff') format('woff');
+ font-weight: 900;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Alegreya SC';
+ src: url('AlegreyaSC-Italic.woff2') format('woff2'),
+ url('AlegreyaSC-Italic.woff') format('woff');
+ font-weight: normal;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Alegreya SC';
+ src: url('AlegreyaSC-BoldItalic.woff2') format('woff2'),
+ url('AlegreyaSC-BoldItalic.woff') format('woff');
+ font-weight: bold;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Alegreya';
+ src: url('Alegreya-Regular.woff2') format('woff2'),
+ url('Alegreya-Regular.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Alegreya SC';
+ src: url('AlegreyaSC-Bold.woff2') format('woff2'),
+ url('AlegreyaSC-Bold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Alegreya';
+ src: url('Alegreya-BlackItalic.woff2') format('woff2'),
+ url('Alegreya-BlackItalic.woff') format('woff');
+ font-weight: 900;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Alegreya SC';
+ src: url('AlegreyaSC-Black.woff2') format('woff2'),
+ url('AlegreyaSC-Black.woff') format('woff');
+ font-weight: 900;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Alegreya';
+ src: url('Alegreya-Bold.woff2') format('woff2'),
+ url('Alegreya-Bold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
+}
+
diff --git a/fonts/alice/How_to_use_webfonts.html b/fonts/alice/How_to_use_webfonts.html
new file mode 100644
index 0000000..653499c
--- /dev/null
+++ b/fonts/alice/How_to_use_webfonts.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
+
+ <style type="text/css" media="screen">
+ /*-- RESET ------*/
+ html, body, div, span, applet, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ a, abbr, acronym, address, big, cite, code,
+ del, dfn, em, font, img, ins, kbd, q, s, samp,
+ small, strike, strong, sub, sup, tt, var,
+ b, u, i, center, dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend, table,
+ caption, tbody, tfoot, thead, tr, th, td
+ {margin: 0;padding: 0;border: 0;outline: 0;
+ font-size: 100%;vertical-align: baseline;
+ background: transparent;}
+ body {line-height: 1;}
+ ol, ul {list-style: none;}
+ blockquote, q {quotes: none;}
+ blockquote:before, blockquote:after,
+ q:before, q:after {content: ''; content: none;}
+ :focus {outline: 0;}
+ ins {text-decoration: none;}
+ del {text-decoration: line-through;}
+ table {border-collapse: collapse;border-spacing: 0;}
+
+ /*-- GRID -----*/
+ .section {margin-bottom: 18px;
+ }
+ .section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
+ .section {*zoom: 1;}
+
+ .section .firstcolumn,
+ .section .firstcol {margin-left: 0;}
+
+ .grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
+ {margin-left: 15px;float: left;display: inline; overflow: hidden;}
+ .width5, .grid5, .span-5 {width: 335px;}
+ .width5_2cols,.grid5_2cols {width: 160px;}
+ .width5_3cols,.grid5_3cols {width: 101px;}
+ .width5_4cols,.grid5_4cols {width: 72px;}
+ .input_width5 {width: 329px;}
+
+ .width6, .grid6, .span-6 {width: 405px;}
+ .width6_4cols,.grid6_4cols {width: 90px;}
+ .input_width6 {width: 399px;}
+
+ .width7, .grid7, .span-7 {width: 475px;}
+ .width7_2cols,.grid7_2cols {width: 230px;}
+ .width7_3cols,.grid7_3cols {width: 148px;}
+ .width7_4cols,.grid7_4cols {width: 107px;}
+ .input_width7 {width: 469px;}
+
+ /*-- STYLES -----*/
+ body {
+ color: #000;
+ background-color: #dcdcdc;
+ font: 13px Arial, sans-serif;
+ }
+
+ a {
+ text-decoration: none;
+ color: #1883ba;
+ }
+
+ h1{
+ font-size: 32px;
+ font-weight: normal;
+ font-style: normal;
+ margin-bottom: 18px;
+ }
+
+ h2{
+ font-size: 18px;
+ }
+
+ #container {
+ width: 865px;
+ margin: 0px auto;
+ }
+
+
+
+ #header {
+ height:109px;
+ font-size: 36px;
+ background-color: #000;
+ color: #fff;
+ text-indent:-9999px;
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAABtCAMAAAAhztx9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRFzen3mNLwDCc17fj8GVRwUbXlLprOrNzyesbrEjtOZb3oJXulP63iAAAA////MqfgopnD5wAABSNJREFUeNrs2u1yqyAQBmBARATU+7/bo6CRTwMp7ZnJvPurjUbrU1gWkGyIyiAgABWoQAUqUIEKASpQgQpUoAIVAlSgAhWoQAUqxJdSCbYsHFQ1MS/Lr1h9IRU7qBZQVVNpUL0PDao2K1BVJ/ZjKORdyb6SSiwLc0VDT6uvohKcMS72H/gyn0VDx7Lhq6hsM2LiyFZ6404KrSobzuawWoQ4pRhyVZnKdj7b/djMO1btX0V197m9UbHe5cJ3jYB7Wj873TwL1FUVw+CR1DEHrMT6jct+59Ke1qD6nwGqn1HpTATJQPN9rGGcR+1caC1y17oOPl/XSDoRQiiV4/2ZumMML6zKh4z/UXLUfTX+iNL93hOl6dmPVGxJwkuUevY+5yJc/WAiLQvZvTSSxnXeSNY7hul6gnUNPvaecA0PEek99/4Bvc8b4qc/vhDQ0qF0l59QiTk6osOFIvYZFQ2ffM1S7UFMnmr1RSKqdTCPVHKIb9KFSqTHeEB1TCvaqWKpItVttZatYqr42UMqmt6jjYqHoQNF96vQ0YpQbqn2RSWuS7kdlStc77NPeuaoUVHiU+3Zy8Vk//uT97w0PERKVK8vZaik07luLvebN1I9zLK8OYPDEcFvoVXaJ3W6oTLF/0qTe+jN2Hw25pqGOS6xyhLVKktUo0Wm4ajQgUokPUz7XfDqY6KV6vhzTe6GIdVmhvv3ODcPd+PJUK2qQDUlkM0jYL4KjiHOdhZR+cNgFVUxP0RUfvOLqeh9KEflD4PeV8ekTXWimjMLsF6XOxDmqOH1pZJlKlWmIiQYOzdyf5VmBsguVGmjCvi0zfjhqNiXSn1GZRMSyVGRJOf3odK5HW6vmLJU0TZcda6SP6SSD1Sun00ZqiFKYz2p2Fsqt1WiW0fAdRrfU9EyFSmndXKWBDKhMvFVPqFifvAHKnE/+Unlii/RQGWGc3ay11DKPFB5HnHJ/VAskPO/caX2m+o4c/gpVa5W59lttZTKlvTnMFhFdVY3V7EsS1Q0X1cZJW3FdeXnHJX1OU8Iqcj/pPJnOHVU8Yw1N0UxzoMUJzavDpalMvcwWKC6Z1H076i8yrSS6pxTkCG0UuWJXlkqT+Va7vQLVNVpXeSoXGWqm6iupOO3HVVePkjmuOP2TOXSGS3nql+nSkfAV7l1WDVTnY805qgGb5T0p8vRkF+gcqlOFkfA0V6LdKNaKqm2M7V/QGUfRaUrC1SV5rw0zM4lqmsYfKyraBeqqmo96JjsI6rp9deq8gzNpzJhDVukOofBx2q9E1XFHDBe6PuEirZS2T57T+XKVNaUPM4BO1FVrCzw6Oyfd8Aaqm3wTyxT3QVccWWhE1XFehWPGdupxjCtV1HJpwVjEo8ZT+tVnagqVkF53GFrqILZn927IVsbVZB0lJ+A4nqchlTJKmgvqvdr6wGVYHVUZJikm/sZ5ZbJZSuV8pY6g2opmbqQ9WFt3U2RulC93bHhaY+toIrryWlrpdq8tmgz1zAVqNwKfdolvehC9XYfkL+tWiuo6NZONXqNka7BYg3JzM2f9gE7Ub3ZXU5qCV1DJQOradw+oHL1pcmtwZPMuPEwV2/ZXY7fUUhaln1nYc69s5B9aSE9S+cmy9S+saDCfSZVeokgefHAvt9gXpOUaXqdl1xhTN5ZGF/vLJimRRgEqEAFKlCBClQIUIEKVKACFahAhQAVqEAFKlCBCgEqUIEKVKACFQJUoAIVqEAFKgSoQAUqUIEKVKBCgApUfx3/BBgAeuw63hnBp0AAAAAASUVORK5CYII=) no-repeat left center;
+ background-color: #31a7e0;
+
+ }
+
+ #main_content {
+ background-color: #fff;
+ padding: 20px 20px 20px;
+ }
+
+
+ #footer p {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 50px;
+ color: #333;
+ font: 10px Arial, sans-serif;
+ }
+ code {
+ white-space: pre;
+ background-color: #eee;
+ display: block;
+ padding: 10px;
+ margin-bottom: 18px;
+ overflow: auto;
+ }
+
+ .box {
+ padding: 18px;
+ margin-bottom: 18px;
+ background: #eee;
+ }
+ .bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
+
+
+
+ p{
+ line-height: 1.2em;
+ margin-bottom: 18px;
+ font: 13px Arial, sans-serif;
+ }
+
+
+
+ h3{
+ font-size: 15px;
+ margin-top: 18px;
+ }
+
+ .sidebar p{
+ font-size: 12px;
+ line-height: 1.4em;
+ }
+
+ </style>
+
+<title>How to Use Webfonts</title>
+
+</head>
+
+<body>
+<div id="container">
+ <div id="header">
+ Fontspring
+ </div>
+ <div id="main_content">
+ <div class="section">
+ <div class="grid7 firstcol">
+ <h1>Installing Webfonts</h1>
+
+ <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+ <h2>1. Upload your webfonts</h2>
+ <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+ <h2>2. Include the webfont stylesheet</h2>
+ <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{
+ font-family: 'MyWebFont';
+ src: url('WebFont.eot');
+ src: url('WebFont.eot?iefix') format('eot'),
+ url('WebFont.woff') format('woff'),
+ url('WebFont.ttf') format('truetype'),
+ url('WebFont.svg#webfont') format('svg');
+}
+</code>
+ <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+ <code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
+
+ <h2>3. Modify your own stylesheet</h2>
+ <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'MyWebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+ </div>
+
+ <div class="grid5 sidebar">
+ <div class="box">
+ <h2>Troubleshooting<br />Font-Face Problems</h2>
+ <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+ <h3>Fonts not showing in any browser</h3>
+
+ <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+ <h3>Fonts not loading in iPhone or iPad</h3>
+
+ <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+ <h3>Fonts not loading in Firefox</h3>
+
+ <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+ <h3>Fonts not loading in IE</h3>
+
+ <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+ <h3>Fonts not loading in IE9</h3>
+
+ <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+
+</div>
+</body>
+</html>
diff --git a/fonts/alice/SIL Open Font License.txt b/fonts/alice/SIL Open Font License.txt
new file mode 100644
index 0000000..28e20a9
--- /dev/null
+++ b/fonts/alice/SIL Open Font License.txt
@@ -0,0 +1,43 @@
+Copyright 2011 The Alice Project Authors (contact@cyreal.org) with Reserved Font Name "Alice"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
\ No newline at end of file
diff --git a/fonts/alice/web fonts/alice_regular_macroman/Alice-Regular-demo.html b/fonts/alice/web fonts/alice_regular_macroman/Alice-Regular-demo.html
new file mode 100644
index 0000000..fe6f6d6
--- /dev/null
+++ b/fonts/alice/web fonts/alice_regular_macroman/Alice-Regular-demo.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript">
+ (function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
+ if(typeof param.defaultContent=="number")
+ {var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
+ $(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
+ function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
+ {$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
+ $(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
+ </script>
+ <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
+
+ <style type="text/css">
+ body{
+ font-family: 'aliceregular';
+ }
+</style>
+
+<title>Alice Regular Specimen</title>
+
+
+ <script type="text/javascript" charset="utf-8">
+ $(document).ready(function() {
+ $('#container').easyTabs({defaultContent:1});
+ });
+ </script>
+</head>
+
+<body>
+<div id="container">
+ <div id="header">
+ Alice Regular </div>
+ <ul class="tabs">
+ <li><a href="#specimen">Specimen</a></li>
+ <li><a href="#layout">Sample Layout</a></li>
+ <li><a href="#installing">Installing Webfonts</a></li>
+
+ </ul>
+
+ <div id="main_content">
+
+
+ <div id="specimen">
+
+ <div class="section">
+ <div class="grid12 firstcol">
+ <div class="huge">AaBb</div>
+ </div>
+ </div>
+
+ <div class="section">
+ <div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
+ </div>
+ <div class="section">
+ <div class="grid12 firstcol">
+ <table class="sample_table">
+ <tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ </table>
+
+ </div>
+
+ </div>
+
+
+
+ <div class="section" id="bodycomparison">
+
+
+ <div id="xheight">
+ <div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
+ <div class="fontbody" style="z-index:1">
+ body<span>Alice Regular</span>
+ </div>
+ <div class="arialbody" style="z-index:1">
+ body<span>Arial</span>
+ </div>
+ <div class="verdanabody" style="z-index:1">
+ body<span>Verdana</span>
+ </div>
+ <div class="georgiabody" style="z-index:1">
+ body<span>Georgia</span>
+ </div>
+
+
+
+ </div>
+
+
+ <div class="section psample psample_row1" id="">
+
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+ <div class="section psample psample_row2" id="">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row4" id="">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+
+
+
+ <div class="section psample psample_row1 fullreverse">
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row2 fullreverse">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+
+
+
+ </div>
+
+ <div id="layout">
+
+ <div class="section">
+
+ <div class="grid12 firstcol">
+ <h1>Lorem Ipsum Dolor</h1>
+ <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+ <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+ </div>
+ </div>
+ <div class="section">
+ <div class="grid8 firstcol">
+ <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+ <h3>Pellentesque ornare sem</h3>
+
+ <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+ <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+ <h3>Cras mattis consectetur</h3>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+ <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+
+ <div class="grid4 sidebar">
+
+ <div class="box reverse">
+ <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+ </div>
+
+ <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+ <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+ </div>
+ </div>
+
+ </div>
+
+
+
+
+
+
+
+
+
+ <div id="specs">
+
+ </div>
+
+ <div id="installing">
+ <div class="section">
+ <div class="grid7 firstcol">
+ <h1>Installing Webfonts</h1>
+
+ <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+ <h2>1. Upload your webfonts</h2>
+ <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+ <h2>2. Include the webfont stylesheet</h2>
+ <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{
+ font-family: 'MyWebFont';
+ src: url('WebFont.eot');
+ src: url('WebFont.eot?iefix') format('eot'),
+ url('WebFont.woff') format('woff'),
+ url('WebFont.ttf') format('truetype'),
+ url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+ <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+ <code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
+
+ <h2>3. Modify your own stylesheet</h2>
+ <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'MyWebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+ </div>
+
+ <div class="grid5 sidebar">
+ <div class="box">
+ <h2>Troubleshooting<br />Font-Face Problems</h2>
+ <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+ <h3>Fonts not showing in any browser</h3>
+
+ <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+ <h3>Fonts not loading in iPhone or iPad</h3>
+
+ <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+ <h3>Fonts not loading in Firefox</h3>
+
+ <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+ <h3>Fonts not loading in IE</h3>
+
+ <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+ <h3>Fonts not loading in IE9</h3>
+
+ <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+ <div id="footer">
+ <p>©2010-2011 Fontspring. All rights reserved.</p>
+ </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/fonts/alice/web fonts/alice_regular_macroman/Alice-Regular-webfont.woff b/fonts/alice/web fonts/alice_regular_macroman/Alice-Regular-webfont.woff
new file mode 100644
index 0000000..9eb750f
Binary files /dev/null and b/fonts/alice/web fonts/alice_regular_macroman/Alice-Regular-webfont.woff differ
diff --git a/fonts/alice/web fonts/alice_regular_macroman/specimen_files/grid_12-825-55-15.css b/fonts/alice/web fonts/alice_regular_macroman/specimen_files/grid_12-825-55-15.css
new file mode 100644
index 0000000..3d6aef7
--- /dev/null
+++ b/fonts/alice/web fonts/alice_regular_macroman/specimen_files/grid_12-825-55-15.css
@@ -0,0 +1,129 @@
+/*Notes about grid:
+Columns: 12
+Grid Width: 825px
+Column Width: 55px
+Gutter Width: 15px
+-------------------------------*/
+
+
+
+.section {margin-bottom: 18px;
+}
+.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
+.section {*zoom: 1;}
+
+.section .firstcolumn,
+.section .firstcol {margin-left: 0;}
+
+
+/* Border on left hand side of a column. */
+.border {
+ padding-left: 7px;
+ margin-left: 7px;
+ border-left: 1px solid #eee;
+}
+
+/* Border with more whitespace, spans one column. */
+.colborder {
+ padding-left: 42px;
+ margin-left: 42px;
+ border-left: 1px solid #eee;
+}
+
+
+
+/* The Grid Classes */
+.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
+{margin-left: 15px;float: left;display: inline; overflow: hidden;}
+
+
+.width1, .grid1, .span-1 {width: 55px;}
+.width1_2cols,.grid1_2cols {width: 20px;}
+.width1_3cols,.grid1_3cols {width: 8px;}
+.width1_4cols,.grid1_4cols {width: 2px;}
+.input_width1 {width: 49px;}
+
+.width2, .grid2, .span-2 {width: 125px;}
+.width2_3cols,.grid2_3cols {width: 31px;}
+.width2_4cols,.grid2_4cols {width: 20px;}
+.input_width2 {width: 119px;}
+
+.width3, .grid3, .span-3 {width: 195px;}
+.width3_2cols,.grid3_2cols {width: 90px;}
+.width3_4cols,.grid3_4cols {width: 37px;}
+.input_width3 {width: 189px;}
+
+.width4, .grid4, .span-4 {width: 265px;}
+.width4_3cols,.grid4_3cols {width: 78px;}
+.input_width4 {width: 259px;}
+
+.width5, .grid5, .span-5 {width: 335px;}
+.width5_2cols,.grid5_2cols {width: 160px;}
+.width5_3cols,.grid5_3cols {width: 101px;}
+.width5_4cols,.grid5_4cols {width: 72px;}
+.input_width5 {width: 329px;}
+
+.width6, .grid6, .span-6 {width: 405px;}
+.width6_4cols,.grid6_4cols {width: 90px;}
+.input_width6 {width: 399px;}
+
+.width7, .grid7, .span-7 {width: 475px;}
+.width7_2cols,.grid7_2cols {width: 230px;}
+.width7_3cols,.grid7_3cols {width: 148px;}
+.width7_4cols,.grid7_4cols {width: 107px;}
+.input_width7 {width: 469px;}
+
+.width8, .grid8, .span-8 {width: 545px;}
+.width8_3cols,.grid8_3cols {width: 171px;}
+.input_width8 {width: 539px;}
+
+.width9, .grid9, .span-9 {width: 615px;}
+.width9_2cols,.grid9_2cols {width: 300px;}
+.width9_4cols,.grid9_4cols {width: 142px;}
+.input_width9 {width: 609px;}
+
+.width10, .grid10, .span-10 {width: 685px;}
+.width10_3cols,.grid10_3cols {width: 218px;}
+.width10_4cols,.grid10_4cols {width: 160px;}
+.input_width10 {width: 679px;}
+
+.width11, .grid11, .span-11 {width: 755px;}
+.width11_2cols,.grid11_2cols {width: 370px;}
+.width11_3cols,.grid11_3cols {width: 241px;}
+.width11_4cols,.grid11_4cols {width: 177px;}
+.input_width11 {width: 749px;}
+
+.width12, .grid12, .span-12 {width: 825px;}
+.input_width12 {width: 819px;}
+
+/* Subdivided grid spaces */
+.emptycols_left1, .prepend-1 {padding-left: 70px;}
+.emptycols_right1, .append-1 {padding-right: 70px;}
+.emptycols_left2, .prepend-2 {padding-left: 140px;}
+.emptycols_right2, .append-2 {padding-right: 140px;}
+.emptycols_left3, .prepend-3 {padding-left: 210px;}
+.emptycols_right3, .append-3 {padding-right: 210px;}
+.emptycols_left4, .prepend-4 {padding-left: 280px;}
+.emptycols_right4, .append-4 {padding-right: 280px;}
+.emptycols_left5, .prepend-5 {padding-left: 350px;}
+.emptycols_right5, .append-5 {padding-right: 350px;}
+.emptycols_left6, .prepend-6 {padding-left: 420px;}
+.emptycols_right6, .append-6 {padding-right: 420px;}
+.emptycols_left7, .prepend-7 {padding-left: 490px;}
+.emptycols_right7, .append-7 {padding-right: 490px;}
+.emptycols_left8, .prepend-8 {padding-left: 560px;}
+.emptycols_right8, .append-8 {padding-right: 560px;}
+.emptycols_left9, .prepend-9 {padding-left: 630px;}
+.emptycols_right9, .append-9 {padding-right: 630px;}
+.emptycols_left10, .prepend-10 {padding-left: 700px;}
+.emptycols_right10, .append-10 {padding-right: 700px;}
+.emptycols_left11, .prepend-11 {padding-left: 770px;}
+.emptycols_right11, .append-11 {padding-right: 770px;}
+.pull-1 {margin-left: -70px;}
+.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
+.pull-2 {margin-left: -140px;}
+.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
+.pull-3 {margin-left: -210px;}
+.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
+.pull-4 {margin-left: -280px;}
+.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
\ No newline at end of file
diff --git a/fonts/alice/web fonts/alice_regular_macroman/specimen_files/specimen_stylesheet.css b/fonts/alice/web fonts/alice_regular_macroman/specimen_files/specimen_stylesheet.css
new file mode 100644
index 0000000..aecc43c
--- /dev/null
+++ b/fonts/alice/web fonts/alice_regular_macroman/specimen_files/specimen_stylesheet.css
@@ -0,0 +1,396 @@
+@import url('grid_12-825-55-15.css');
+
+/*
+ CSS Reset by Eric Meyer - Released under Public Domain
+ http://meyerweb.com/eric/tools/css/reset/
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, table,
+caption, tbody, tfoot, thead, tr, th, td
+ {margin: 0;padding: 0;border: 0;outline: 0;
+ font-size: 100%;vertical-align: baseline;
+ background: transparent;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after,
+q:before, q:after {content: ''; content: none;}
+:focus {outline: 0;}
+ins {text-decoration: none;}
+del {text-decoration: line-through;}
+table {border-collapse: collapse;border-spacing: 0;}
+
+
+
+
+body {
+ color: #000;
+ background-color: #dcdcdc;
+}
+
+a {
+ text-decoration: none;
+ color: #1883ba;
+}
+
+h1{
+ font-size: 32px;
+ font-weight: normal;
+ font-style: normal;
+ margin-bottom: 18px;
+}
+
+h2{
+ font-size: 18px;
+}
+
+#container {
+ width: 865px;
+ margin: 0px auto;
+}
+
+
+#header {
+ padding: 20px;
+ font-size: 36px;
+ background-color: #000;
+ color: #fff;
+}
+
+#header span {
+ color: #666;
+}
+#main_content {
+ background-color: #fff;
+ padding: 60px 20px 20px;
+}
+
+
+#footer p {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 50px;
+ color: #333;
+ font: 10px Arial, sans-serif;
+}
+
+.tabs {
+ width: 100%;
+ height: 31px;
+ background-color: #444;
+}
+.tabs li {
+ float: left;
+ margin: 0;
+ overflow: hidden;
+ background-color: #444;
+}
+.tabs li a {
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ font: bold 11px/11px 'Arial';
+ text-transform: uppercase;
+ padding: 10px 15px;
+ border-right: 1px solid #fff;
+}
+
+.tabs li a:hover {
+ background-color: #00b3ff;
+
+}
+
+.tabs li.active a {
+ color: #000;
+ background-color: #fff;
+}
+
+
+
+div.huge {
+
+ font-size: 300px;
+ line-height: 1em;
+ padding: 0;
+ letter-spacing: -.02em;
+ overflow: hidden;
+}
+div.glyph_range {
+ font-size: 72px;
+ line-height: 1.1em;
+}
+
+.size10{ font-size: 10px; }
+.size11{ font-size: 11px; }
+.size12{ font-size: 12px; }
+.size13{ font-size: 13px; }
+.size14{ font-size: 14px; }
+.size16{ font-size: 16px; }
+.size18{ font-size: 18px; }
+.size20{ font-size: 20px; }
+.size24{ font-size: 24px; }
+.size30{ font-size: 30px; }
+.size36{ font-size: 36px; }
+.size48{ font-size: 48px; }
+.size60{ font-size: 60px; }
+.size72{ font-size: 72px; }
+.size90{ font-size: 90px; }
+
+
+.psample_row1 { height: 120px;}
+.psample_row1 { height: 120px;}
+.psample_row2 { height: 160px;}
+.psample_row3 { height: 160px;}
+.psample_row4 { height: 160px;}
+
+.psample {
+ overflow: hidden;
+ position: relative;
+}
+.psample p {
+ line-height: 1.3em;
+ display: block;
+ overflow: hidden;
+ margin: 0;
+}
+
+.psample span {
+ margin-right: .5em;
+}
+
+.white_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
+ position: absolute;
+ bottom: 0;
+}
+.black_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
+ position: absolute;
+ bottom: 0;
+}
+.fullreverse {
+ background: #000 !important;
+ color: #fff !important;
+ margin-left: -20px;
+ padding-left: 20px;
+ margin-right: -20px;
+ padding-right: 20px;
+ padding: 20px;
+ margin-bottom:0;
+}
+
+
+.sample_table td {
+ padding-top: 3px;
+ padding-bottom:5px;
+ padding-left: 5px;
+ vertical-align: middle;
+ line-height: 1.2em;
+}
+
+.sample_table td:first-child {
+ background-color: #eee;
+ text-align: right;
+ padding-right: 5px;
+ padding-left: 0;
+ padding: 5px;
+ font: 11px/12px "Courier New", Courier, mono;
+}
+
+code {
+ white-space: pre;
+ background-color: #eee;
+ display: block;
+ padding: 10px;
+ margin-bottom: 18px;
+ overflow: auto;
+}
+
+
+.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
+
+.box {
+ padding: 18px;
+ margin-bottom: 18px;
+ background: #eee;
+}
+
+.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
+
+#bodycomparison {
+ position: relative;
+ overflow: hidden;
+ font-size: 72px;
+ height: 90px;
+ white-space: nowrap;
+}
+
+#bodycomparison div{
+ font-size: 72px;
+ line-height: 90px;
+ display: inline;
+ margin: 0 15px 0 0;
+ padding: 0;
+}
+
+#bodycomparison div span{
+ font: 10px Arial;
+ position: absolute;
+ left: 0;
+}
+#xheight {
+ float: none;
+ position: absolute;
+ color: #d9f3ff;
+ font-size: 72px;
+ line-height: 90px;
+}
+
+.fontbody {
+ position: relative;
+}
+.arialbody{
+ font-family: Arial;
+ position: relative;
+}
+.verdanabody{
+ font-family: Verdana;
+ position: relative;
+}
+.georgiabody{
+ font-family: Georgia;
+ position: relative;
+}
+
+/* @group Layout page
+ */
+
+#layout h1 {
+ font-size: 36px;
+ line-height: 42px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h2 {
+ font-size: 24px;
+ line-height: 23px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h3 {
+ font-size: 22px;
+ line-height: 1.4em;
+ margin-top: 1em;
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+#layout p.byline {
+ font-size: 12px;
+ margin-top: 18px;
+ line-height: 12px;
+ margin-bottom: 0;
+}
+#layout p {
+ font-size: 14px;
+ line-height: 21px;
+ margin-bottom: .5em;
+}
+
+#layout p.large{
+ font-size: 18px;
+ line-height: 26px;
+}
+
+#layout .sidebar p{
+ font-size: 12px;
+ line-height: 1.4em;
+}
+
+#layout p.caption {
+ font-size: 10px;
+ margin-top: -16px;
+ margin-bottom: 18px;
+}
+
+/* @end */
+
+/* @group Glyphs */
+
+#glyph_chart div{
+ background-color: #d9f3ff;
+ color: black;
+ float: left;
+ font-size: 36px;
+ height: 1.2em;
+ line-height: 1.2em;
+ margin-bottom: 1px;
+ margin-right: 1px;
+ text-align: center;
+ width: 1.2em;
+ position: relative;
+ padding: .6em .2em .2em;
+}
+
+#glyph_chart div p {
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: block;
+ text-align: center;
+ font: bold 9px Arial, sans-serif;
+ background-color: #3a768f;
+ width: 100%;
+ color: #fff;
+ padding: 2px 0;
+}
+
+
+#glyphs h1 {
+ font-family: Arial, sans-serif;
+}
+/* @end */
+
+/* @group Installing */
+
+#installing {
+ font: 13px Arial, sans-serif;
+}
+
+#installing p,
+#glyphs p{
+ line-height: 1.2em;
+ margin-bottom: 18px;
+ font: 13px Arial, sans-serif;
+}
+
+
+
+#installing h3{
+ font-size: 15px;
+ margin-top: 18px;
+}
+
+/* @end */
+
+#rendering h1 {
+ font-family: Arial, sans-serif;
+}
+.render_table td {
+ font: 11px "Courier New", Courier, mono;
+ vertical-align: middle;
+}
+
+
diff --git a/fonts/alice/web fonts/alice_regular_macroman/stylesheet.css b/fonts/alice/web fonts/alice_regular_macroman/stylesheet.css
new file mode 100644
index 0000000..5fe6b6d
--- /dev/null
+++ b/fonts/alice/web fonts/alice_regular_macroman/stylesheet.css
@@ -0,0 +1,13 @@
+@font-face {
+ font-family: 'aliceregular';
+ src: url('Alice-Regular-webfont.eot');
+ src: url('Alice-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+ url('Alice-Regular-webfont.woff2') format('woff2'),
+ url('Alice-Regular-webfont.woff') format('woff'),
+ url('Alice-Regular-webfont.ttf') format('truetype'),
+ url('Alice-Regular-webfont.svg#aliceregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+
+}
+
diff --git a/fonts/belda/Web Font EULA 2.0.txt b/fonts/belda/Web Font EULA 2.0.txt
new file mode 100644
index 0000000..8e4e443
--- /dev/null
+++ b/fonts/belda/Web Font EULA 2.0.txt
@@ -0,0 +1,90 @@
+<strong>WEBFONTS | END USER LICENSE AGREEMENT | V2.0</strong>
+
+By downloading, installing and/or embedding font software (“Fonts”) offered for license by Creative Market Labs, Inc, Fontspring, and its distributors (“Licensor”), you (“Licensee”) agree to be bound by the following terms and conditions of this End User Licensing Agreement (“EULA”):
+
+<strong>1. RIGHTS GRANTED</strong>
+Licensor grants to Licensee a perpetual, worldwide, non-exclusive and non-transferable license to install the Fonts, and create, reproduce, modify, display, and distribute artwork created with the Fonts in accordance with the terms and conditions of this EULA.
+
+<strong>1.1 Storage & Backup</strong>
+<span style="color:#6F43EE;">⬇︎</span> <strong>Server Storage</strong>
+The Licensee is permitted to upload the Fonts to a server or a cloud-based storage service that is owned, leased, or otherwise controlled by Licensee, for the purpose of storage, asset management, and retrieval by Licensee only.
+
+<span style="color:#6F43EE;">⬇︎</span> <strong>Backup</strong>
+The Licensee is permitted to make a reasonable number of backup copies of the Font for disaster recovery purposes only.
+
+<strong>1.2 Limits</strong>
+<span style="color:orange">⚠️</span> <strong>@Font-Face Only</strong>
+The Licensee is only permitted to embed the Fonts in websites using the @font-face syntax in CSS stylesheets.
+
+<span style="color:orange">⚠️</span> <strong>Ownership</strong>
+The Licensee is only permitted to embed the Fonts in websites the Licensee owns or controls.
+
+<span style="color:orange">⚠️</span> <strong>Pageview Limit</strong>
+Websites that embed the Fonts must not have a monthly combined traffic that exceeds the pageviews per month limit indicated on the applicable order receipt (“Receipt”).
+
+<strong>1.3 Rights</strong>
+<span style="color:#669900">✔</span> <strong>Multiple Websites</strong>
+The Licensee is permitted to embed the Font into more than one distinct website.
+
+<span style="color:#669900">✔</span> <strong>PDF Report Embedding</strong>
+Licensee is permitted to embed the Font in Portable Document Format (PDF) reports that the App saves or exports, provided that the reports are not sold for profit.
+
+<strong>1.4 Restrictions</strong>
+<span style="color:red">✘</span> <strong>Webfont Files Only</strong>
+The Licensee must use the provided Fonts from Licensor. Fonts designed for Websites will be in the format of WOFF OR WOFF2. Licensee is prohibited from embedding Fonts in standard desktop formats of CFF OpenType (.otf) or TrueType (.ttf).
+
+<span style="color:red">✘</span> <strong>No Source Code Distribution</strong>
+Licensee is prohibited from redistributing the Fonts with any Website’s source code.
+
+<span style="color:red">✘</span> <strong>No Typesetting Products</strong>
+Licensee is prohibited from embedding the Font in any Website that enables an End User to create custom typesetting with the Font. For example: An image editor with text features.
+
+<span style="color:red">✘</span> <strong>No Other Systems/Product Embedding</strong>
+Licensed Users are prohibited from embedding or installing the Fonts in:
+- Computer operating systems, such as Mac, Windows or Linux
+- Digital ads using CSS @font-face
+- Desktop applications, mobile apps, and other software
+- Cloud-based apps allowing third-party, End User Font usage
+- Electronic devices
+- Digital games
+- Ebooks
+- Editable templates and editable PDFs
+
+<strong>1.5 Third Parties</strong>
+The Licensee is permitted to temporarily provide the Fonts to a third-party designer or agent (“Agent”) who is working on behalf of the Licensee. All Agents of the Licensee must: (a) agree in writing to Licensee that the Fonts will be used exclusively for Licensee’s work, in accordance with the terms of this EULA; (b) destroy all copies of the Fonts upon completion and delivery of the work to Licensee; and (c) use and/or embed the Fonts only in work owned or controlled by Licensee.
+
+<strong>2. FONT MODIFICATIONS</strong>
+Licensed Users are prohibited from modifying the Fonts, or creating derivative Fonts without prior written consent from Licensor or the Font’s copyright holder except where derivative Fonts are necessary for embedding or linking in accordance with this EULA.
+
+<strong>3. COPYRIGHT</strong>
+The Fonts are protected by United States and international copyright and other laws and treaties. The copyright holder is the sole, exclusive owner of all intellectual property rights, including rights under copyright and trademark law. Licensee agrees not to use the Fonts in any manner that infringes the intellectual property rights of the copyright holder or violates the terms of this EULA. Licensee will be held legally responsible, and indemnifies Licensor, for any infringements on the copyright holder’s rights caused by failure to abide by the terms of this EULA.
+
+<strong>4. TERMINATION</strong>
+This EULA is effective until terminated. If Licensee fails to comply with any term of this EULA, Licensor may terminate the EULA with 30 days notice.
+
+<strong>5. REFUNDS AND DISCLAIMER</strong>
+At Licensee’s request, Licensor may, at its discretion, provide a refund for the Fonts if the following conditions have been met:
+- The Fonts have never been used in any published or released artwork by Licensee.
+- No more than 30 days have passed since the date of purchase, specified on the Receipt.
+- The Fonts have been completely removed or destroyed from all Licensee’s installations, servers, and backups.
+
+<strong>6. WARRANTY</strong>
+The Fonts are provided “as is.” Licensor makes no warranty of any kind, either expressed or implied, including, but not limited to the implied warranties of merchantability and fitness for a particular purpose.
+
+Licensor shall not be liable for any direct, indirect, consequential, or incidental damages (including damages from loss of business profits, business interruption, loss of business information, and the like) arising out of the use of or inability to use the product even if Licensor has been advised of the possibility of such damages.
+
+Because some U.S. states do not allow the exclusion or limitation of liability for consequential or incidental damages, the above limitation may not apply to Licensee.
+
+<strong>7. GOVERNING LAW</strong>
+This EULA is governed by the laws of the United States of America and the State of California.
+
+<strong>8. ENTIRE AGREEMENT</strong>
+This EULA, in conjunction with the Receipt that accompanies each Font licensed from Licensor, constitutes the entire agreement between Licensor and Licensee.
+
+<strong>9. AGREEMENT MODIFICATION</strong>
+The Licensor and Licensee may modify or amend this EULA when agreed to in writing.
+
+<strong>10. WAIVER</strong>
+The waiver of one breach or default hereunder shall not constitute the waiver of any subsequent breach or default.
+
+<i>©2022 Creative Market Labs, Inc.</i>
diff --git a/fonts/belda/beldanormregular-demo.html b/fonts/belda/beldanormregular-demo.html
new file mode 100644
index 0000000..d3bb1b5
--- /dev/null
+++ b/fonts/belda/beldanormregular-demo.html
@@ -0,0 +1,391 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript">
+ (function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
+ if(typeof param.defaultContent=="number")
+ {var defaultTab=$(thisId+" .tabs li:nth-child("+param.defaultContent+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
+ $(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
+ function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
+ {$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
+ $(thisId+" .tabs li").on('click',function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
+ </script>
+ <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
+
+ <style type="text/css">
+ body{
+ font-family: 'beldanormregular';
+ }
+
+ </style>
+
+ <title>Belda Regular Specimen</title>
+
+
+ <script type="text/javascript" charset="utf-8">
+ $(function() {
+ $('#container').easyTabs({defaultContent:1});
+ });
+ </script>
+</head>
+
+<body>
+<div id="container">
+ <div id="header">
+ Belda Regular </div>
+ <ul class="tabs">
+ <li><a href="#specimen">Specimen</a></li>
+ <li><a href="#layout">Sample Layout</a></li>
+ <li><a href="#glyphs">Glyphs & Languages</a></li>
+ <li><a href="#installing">Installing Webfonts</a></li>
+
+ </ul>
+
+ <div id="main_content">
+
+
+ <div id="specimen">
+
+ <div class="section">
+ <div class="grid12 firstcol">
+ <div class="huge">AaBb</div>
+ </div>
+ </div>
+
+ <div class="section">
+ <div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
+ </div>
+ <div class="section">
+ <div class="grid12 firstcol">
+ <table class="sample_table">
+ <tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ </table>
+
+ </div>
+
+ </div>
+
+
+
+ <div class="section" id="bodycomparison">
+
+
+ <div id="xheight">
+ <div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
+ <div class="fontbody" style="z-index:1">
+ body<span>Belda Regular</span>
+ </div>
+ <div class="arialbody" style="z-index:1">
+ body<span>Arial</span>
+ </div>
+ <div class="verdanabody" style="z-index:1">
+ body<span>Verdana</span>
+ </div>
+ <div class="georgiabody" style="z-index:1">
+ body<span>Georgia</span>
+ </div>
+
+
+
+ </div>
+
+
+ <div class="section psample psample_row1" id="">
+
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+ <div class="section psample psample_row2" id="">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row4" id="">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+
+
+
+ <div class="section psample psample_row1 fullreverse">
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row2 fullreverse">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+
+
+
+ </div>
+
+ <div id="layout">
+
+ <div class="section">
+
+ <div class="grid12 firstcol">
+ <h1>Lorem Ipsum Dolor</h1>
+ <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+ <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+ </div>
+ </div>
+ <div class="section">
+ <div class="grid8 firstcol">
+ <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+ <h3>Pellentesque ornare sem</h3>
+
+ <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+ <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+ <h3>Cras mattis consectetur</h3>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+ <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+
+ <div class="grid4 sidebar">
+
+ <div class="box reverse">
+ <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+ </div>
+
+ <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+ <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+ </div>
+ </div>
+
+ </div>
+
+
+
+
+
+
+ <div id="glyphs">
+ <div class="section">
+ <div class="grid12 firstcol">
+
+ <h1>Language Support</h1>
+ <p>The subset of Belda Regular in this kit supports the following languages:<br />
+
+ <em>This font does not fully support any language.</em> </p>
+ <h1>Glyph Chart</h1>
+ <p>The subset of Belda Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+ <div id="glyph_chart">
+
+ </div>
+ </div>
+
+
+ </div>
+ </div>
+
+
+ <div id="specs">
+
+ </div>
+
+ <div id="installing">
+ <div class="section">
+ <div class="grid7 firstcol">
+ <h1>Installing Webfonts</h1>
+
+ <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+ <h2>1. Upload your webfonts</h2>
+ <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+ <h2>2. Include the webfont stylesheet</h2>
+ <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{
+ font-family: 'MyWebFont';
+ src: url('WebFont.eot');
+ src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+ url('WebFont.woff') format('woff'),
+ url('WebFont.ttf') format('truetype'),
+ url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+ <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+ <code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
+
+ <h2>3. Modify your own stylesheet</h2>
+ <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+ </div>
+
+ <div class="grid5 sidebar">
+ <div class="box">
+ <h2>Troubleshooting<br />Font-Face Problems</h2>
+ <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+ <h3>Fonts not showing in any browser</h3>
+
+ <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+ <h3>Fonts not loading in iPhone or iPad</h3>
+
+ <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+ <h3>Fonts not loading in Firefox</h3>
+
+ <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+ <h3>Fonts not loading in IE</h3>
+
+ <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+ <h3>Fonts not loading in IE9</h3>
+
+ <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+ <div id="footer">
+ <p>©2010-2017 Fontspring. All rights reserved.</p>
+ </div>
+</div>
+</body>
+</html>
diff --git a/fonts/belda/beldanormregular-webfont.woff b/fonts/belda/beldanormregular-webfont.woff
new file mode 100644
index 0000000..d3129f0
Binary files /dev/null and b/fonts/belda/beldanormregular-webfont.woff differ
diff --git a/fonts/belda/beldanormregular-webfont.woff2 b/fonts/belda/beldanormregular-webfont.woff2
new file mode 100644
index 0000000..c09669c
Binary files /dev/null and b/fonts/belda/beldanormregular-webfont.woff2 differ
diff --git a/fonts/belda/specimen_files/grid_12-825-55-15.css b/fonts/belda/specimen_files/grid_12-825-55-15.css
new file mode 100644
index 0000000..3d6aef7
--- /dev/null
+++ b/fonts/belda/specimen_files/grid_12-825-55-15.css
@@ -0,0 +1,129 @@
+/*Notes about grid:
+Columns: 12
+Grid Width: 825px
+Column Width: 55px
+Gutter Width: 15px
+-------------------------------*/
+
+
+
+.section {margin-bottom: 18px;
+}
+.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
+.section {*zoom: 1;}
+
+.section .firstcolumn,
+.section .firstcol {margin-left: 0;}
+
+
+/* Border on left hand side of a column. */
+.border {
+ padding-left: 7px;
+ margin-left: 7px;
+ border-left: 1px solid #eee;
+}
+
+/* Border with more whitespace, spans one column. */
+.colborder {
+ padding-left: 42px;
+ margin-left: 42px;
+ border-left: 1px solid #eee;
+}
+
+
+
+/* The Grid Classes */
+.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
+{margin-left: 15px;float: left;display: inline; overflow: hidden;}
+
+
+.width1, .grid1, .span-1 {width: 55px;}
+.width1_2cols,.grid1_2cols {width: 20px;}
+.width1_3cols,.grid1_3cols {width: 8px;}
+.width1_4cols,.grid1_4cols {width: 2px;}
+.input_width1 {width: 49px;}
+
+.width2, .grid2, .span-2 {width: 125px;}
+.width2_3cols,.grid2_3cols {width: 31px;}
+.width2_4cols,.grid2_4cols {width: 20px;}
+.input_width2 {width: 119px;}
+
+.width3, .grid3, .span-3 {width: 195px;}
+.width3_2cols,.grid3_2cols {width: 90px;}
+.width3_4cols,.grid3_4cols {width: 37px;}
+.input_width3 {width: 189px;}
+
+.width4, .grid4, .span-4 {width: 265px;}
+.width4_3cols,.grid4_3cols {width: 78px;}
+.input_width4 {width: 259px;}
+
+.width5, .grid5, .span-5 {width: 335px;}
+.width5_2cols,.grid5_2cols {width: 160px;}
+.width5_3cols,.grid5_3cols {width: 101px;}
+.width5_4cols,.grid5_4cols {width: 72px;}
+.input_width5 {width: 329px;}
+
+.width6, .grid6, .span-6 {width: 405px;}
+.width6_4cols,.grid6_4cols {width: 90px;}
+.input_width6 {width: 399px;}
+
+.width7, .grid7, .span-7 {width: 475px;}
+.width7_2cols,.grid7_2cols {width: 230px;}
+.width7_3cols,.grid7_3cols {width: 148px;}
+.width7_4cols,.grid7_4cols {width: 107px;}
+.input_width7 {width: 469px;}
+
+.width8, .grid8, .span-8 {width: 545px;}
+.width8_3cols,.grid8_3cols {width: 171px;}
+.input_width8 {width: 539px;}
+
+.width9, .grid9, .span-9 {width: 615px;}
+.width9_2cols,.grid9_2cols {width: 300px;}
+.width9_4cols,.grid9_4cols {width: 142px;}
+.input_width9 {width: 609px;}
+
+.width10, .grid10, .span-10 {width: 685px;}
+.width10_3cols,.grid10_3cols {width: 218px;}
+.width10_4cols,.grid10_4cols {width: 160px;}
+.input_width10 {width: 679px;}
+
+.width11, .grid11, .span-11 {width: 755px;}
+.width11_2cols,.grid11_2cols {width: 370px;}
+.width11_3cols,.grid11_3cols {width: 241px;}
+.width11_4cols,.grid11_4cols {width: 177px;}
+.input_width11 {width: 749px;}
+
+.width12, .grid12, .span-12 {width: 825px;}
+.input_width12 {width: 819px;}
+
+/* Subdivided grid spaces */
+.emptycols_left1, .prepend-1 {padding-left: 70px;}
+.emptycols_right1, .append-1 {padding-right: 70px;}
+.emptycols_left2, .prepend-2 {padding-left: 140px;}
+.emptycols_right2, .append-2 {padding-right: 140px;}
+.emptycols_left3, .prepend-3 {padding-left: 210px;}
+.emptycols_right3, .append-3 {padding-right: 210px;}
+.emptycols_left4, .prepend-4 {padding-left: 280px;}
+.emptycols_right4, .append-4 {padding-right: 280px;}
+.emptycols_left5, .prepend-5 {padding-left: 350px;}
+.emptycols_right5, .append-5 {padding-right: 350px;}
+.emptycols_left6, .prepend-6 {padding-left: 420px;}
+.emptycols_right6, .append-6 {padding-right: 420px;}
+.emptycols_left7, .prepend-7 {padding-left: 490px;}
+.emptycols_right7, .append-7 {padding-right: 490px;}
+.emptycols_left8, .prepend-8 {padding-left: 560px;}
+.emptycols_right8, .append-8 {padding-right: 560px;}
+.emptycols_left9, .prepend-9 {padding-left: 630px;}
+.emptycols_right9, .append-9 {padding-right: 630px;}
+.emptycols_left10, .prepend-10 {padding-left: 700px;}
+.emptycols_right10, .append-10 {padding-right: 700px;}
+.emptycols_left11, .prepend-11 {padding-left: 770px;}
+.emptycols_right11, .append-11 {padding-right: 770px;}
+.pull-1 {margin-left: -70px;}
+.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
+.pull-2 {margin-left: -140px;}
+.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
+.pull-3 {margin-left: -210px;}
+.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
+.pull-4 {margin-left: -280px;}
+.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
\ No newline at end of file
diff --git a/fonts/belda/specimen_files/specimen_stylesheet.css b/fonts/belda/specimen_files/specimen_stylesheet.css
new file mode 100644
index 0000000..da2b49d
--- /dev/null
+++ b/fonts/belda/specimen_files/specimen_stylesheet.css
@@ -0,0 +1,392 @@
+@import url('grid_12-825-55-15.css');
+
+/*
+ CSS Reset by Eric Meyer - Released under Public Domain
+ http://meyerweb.com/eric/tools/css/reset/
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, table,
+caption, tbody, tfoot, thead, tr, th, td
+ {margin: 0;padding: 0;border: 0;outline: 0;
+ font-size: 100%;vertical-align: baseline;
+ background: transparent;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after,
+q:before, q:after {content: ''; content: none;}
+:focus {outline: 0;}
+ins {text-decoration: none;}
+del {text-decoration: line-through;}
+table {border-collapse: collapse;border-spacing: 0;}
+
+
+
+
+body {
+ color: #000;
+ background-color: #dcdcdc;
+}
+
+a {
+ text-decoration: none;
+ color: #1883ba;
+}
+
+h1{
+ font-size: 32px;
+ font-weight: normal;
+ font-style: normal;
+ margin-bottom: 18px;
+}
+
+h2{
+ font-size: 18px;
+}
+
+#container {
+ width: 865px;
+ margin: 0 auto;
+}
+
+
+#header {
+ padding: 20px;
+ font-size: 36px;
+ background-color: #002339;
+ color: #fff;
+}
+
+#header span {
+ color: #666;
+}
+#main_content {
+ background-color: #fff;
+ padding: 60px 20px 20px;
+}
+
+
+#footer p {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 50px;
+ color: #333;
+ font: 10px Arial, sans-serif;
+}
+
+.tabs {
+ width: 100%;
+ height: 31px;
+ background-color: #2f7093;
+}
+.tabs li {
+ float: left;
+ margin: 0;
+ overflow: hidden;
+ background-color: #2f7093;
+}
+.tabs li a {
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ font: bold 11px/11px 'Arial';
+ text-transform: uppercase;
+ padding: 10px 15px;
+ border-right: 1px solid #fff;
+}
+
+.tabs li a:hover {
+ background-color: #2a6484;
+
+}
+
+.tabs li.active a {
+ color: #000;
+ background-color: #fff;
+}
+
+
+
+div.huge {
+
+ font-size: 300px;
+ line-height: 1em;
+ padding: 0;
+ letter-spacing: -.02em;
+ overflow: hidden;
+}
+div.glyph_range {
+ font-size: 72px;
+ line-height: 1.1em;
+}
+
+.size10{ font-size: 10px; }
+.size11{ font-size: 11px; }
+.size12{ font-size: 12px; }
+.size13{ font-size: 13px; }
+.size14{ font-size: 14px; }
+.size16{ font-size: 16px; }
+.size18{ font-size: 18px; }
+.size20{ font-size: 20px; }
+.size24{ font-size: 24px; }
+.size30{ font-size: 30px; }
+.size36{ font-size: 36px; }
+.size48{ font-size: 48px; }
+.size60{ font-size: 60px; }
+.size72{ font-size: 72px; }
+.size90{ font-size: 90px; }
+
+
+.psample_row1 { height: 120px;}
+.psample_row1 { height: 120px;}
+.psample_row2 { height: 160px;}
+.psample_row3 { height: 160px;}
+.psample_row4 { height: 160px;}
+
+.psample {
+ overflow: hidden;
+ position: relative;
+}
+.psample p {
+ line-height: 1.3em;
+ display: block;
+ overflow: hidden;
+ margin: 0;
+}
+
+.psample span {
+ margin-right: .5em;
+}
+
+.white_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
+ position: absolute;
+ bottom: 0;
+}
+.black_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
+ position: absolute;
+ bottom: 0;
+}
+.fullreverse {
+ background: #000 !important;
+ color: #fff !important;
+ margin-left: -20px;
+ margin-right: -20px;
+ padding: 20px;
+ margin-bottom:0;
+}
+
+
+.sample_table td {
+ padding-top: 3px;
+ padding-bottom:5px;
+ padding-left: 5px;
+ vertical-align: middle;
+ line-height: 1.2em;
+}
+
+.sample_table td:first-child {
+ background-color: #eee;
+ text-align: right;
+ padding: 5px;
+ font: 11px/12px 'Courier New', Courier, mono;
+}
+
+code {
+ white-space: pre;
+ background-color: #eee;
+ display: block;
+ padding: 10px;
+ margin-bottom: 18px;
+ overflow: auto;
+}
+
+
+.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
+
+.box {
+ padding: 18px;
+ margin-bottom: 18px;
+ background: #eee;
+}
+
+.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
+
+#bodycomparison {
+ position: relative;
+ overflow: hidden;
+ font-size: 72px;
+ height: 90px;
+ white-space: nowrap;
+}
+
+#bodycomparison div{
+ font-size: 72px;
+ line-height: 90px;
+ display: inline;
+ margin: 0 15px 0 0;
+ padding: 0;
+}
+
+#bodycomparison div span{
+ font: 10px Arial;
+ position: absolute;
+ left: 0;
+}
+#xheight {
+ float: none;
+ position: absolute;
+ color: #d9f3ff;
+ font-size: 72px;
+ line-height: 90px;
+}
+
+.fontbody {
+ position: relative;
+}
+.arialbody{
+ font-family: Arial;
+ position: relative;
+}
+.verdanabody{
+ font-family: Verdana;
+ position: relative;
+}
+.georgiabody{
+ font-family: Georgia;
+ position: relative;
+}
+
+/* @group Layout page
+ */
+
+#layout h1 {
+ font-size: 36px;
+ line-height: 42px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h2 {
+ font-size: 24px;
+ line-height: 23px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h3 {
+ font-size: 22px;
+ line-height: 1.4em;
+ margin-top: 1em;
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+#layout p.byline {
+ font-size: 12px;
+ margin-top: 18px;
+ line-height: 12px;
+ margin-bottom: 0;
+}
+#layout p {
+ font-size: 14px;
+ line-height: 21px;
+ margin-bottom: .5em;
+}
+
+#layout p.large{
+ font-size: 18px;
+ line-height: 26px;
+}
+
+#layout .sidebar p{
+ font-size: 12px;
+ line-height: 1.4em;
+}
+
+#layout p.caption {
+ font-size: 10px;
+ margin-top: -16px;
+ margin-bottom: 18px;
+}
+
+/* @end */
+
+/* @group Glyphs */
+
+#glyph_chart div{
+ background-color: #d9f3ff;
+ color: black;
+ float: left;
+ font-size: 36px;
+ height: 1.2em;
+ line-height: 1.2em;
+ margin-bottom: 1px;
+ margin-right: 1px;
+ text-align: center;
+ width: 1.2em;
+ position: relative;
+ padding: .6em .2em .2em;
+}
+
+#glyph_chart div p {
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: block;
+ text-align: center;
+ font: bold 9px Arial, sans-serif;
+ background-color: #3a768f;
+ width: 100%;
+ color: #fff;
+ padding: 2px 0;
+}
+
+
+#glyphs h1 {
+ font-family: Arial, sans-serif;
+}
+/* @end */
+
+/* @group Installing */
+
+#installing {
+ font: 13px Arial, sans-serif;
+}
+
+#installing p,
+#glyphs p{
+ line-height: 1.2em;
+ margin-bottom: 18px;
+ font: 13px Arial, sans-serif;
+}
+
+
+
+#installing h3{
+ font-size: 15px;
+ margin-top: 18px;
+}
+
+/* @end */
+
+#rendering h1 {
+ font-family: Arial, sans-serif;
+}
+.render_table td {
+ font: 11px 'Courier New', Courier, mono;
+ vertical-align: middle;
+}
+
+
diff --git a/fonts/belda/stylesheet.css b/fonts/belda/stylesheet.css
new file mode 100644
index 0000000..507def6
--- /dev/null
+++ b/fonts/belda/stylesheet.css
@@ -0,0 +1,33 @@
+/*!
+ * Web Fonts from Fontspring.com
+ *
+ * All OpenType features and all extended glyphs have been removed.
+ * Fully installable fonts can be purchased at https://www.fontspring.com
+ *
+ * The fonts included in this stylesheet are subject to the End User License you purchased
+ * from Fontspring. The fonts are protected under domestic and international trademark and
+ * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
+ * distributing this font software.
+ *
+ * (c) 2010-2023 Fontspring
+ *
+ *
+ *
+ *
+ * The fonts included are copyrighted by the vendor listed below.
+ *
+ * Vendor: Insigne Design
+ * License URL: https://www.fontspring.com/licenses/insigne/webfont
+ *
+ *
+ */
+
+@font-face {
+ font-family: 'beldanormregular';
+ src: url('beldanormregular-webfont.woff2') format('woff2'),
+ url('beldanormregular-webfont.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+
+}
+
diff --git a/fonts/bellefair/Bellefair-Regular.woff b/fonts/bellefair/Bellefair-Regular.woff
new file mode 100644
index 0000000..e9b0807
Binary files /dev/null and b/fonts/bellefair/Bellefair-Regular.woff differ
diff --git a/fonts/bellefair/Bellefair-Regular.woff2 b/fonts/bellefair/Bellefair-Regular.woff2
new file mode 100644
index 0000000..9fd672b
Binary files /dev/null and b/fonts/bellefair/Bellefair-Regular.woff2 differ
diff --git a/fonts/bellefair/SIL Open Font License.txt b/fonts/bellefair/SIL Open Font License.txt
new file mode 100644
index 0000000..566628d
--- /dev/null
+++ b/fonts/bellefair/SIL Open Font License.txt
@@ -0,0 +1,44 @@
+Copyright 2015 The Bellefair Project Authors (https://github.com/shinntype/bellefair)
+
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
\ No newline at end of file
diff --git a/fonts/bellefair/demo.html b/fonts/bellefair/demo.html
new file mode 100644
index 0000000..14f6dbf
--- /dev/null
+++ b/fonts/bellefair/demo.html
@@ -0,0 +1,192 @@
+<!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">
+ <meta name="robots" content="noindex, noarchive">
+ <meta name="format-detection" content="telephone=no">
+ <title>Transfonter demo</title>
+ <link href="stylesheet.css" rel="stylesheet">
+ <style>
+ /*
+ http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+ */
+ html, body, div, span, applet, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ a, abbr, acronym, address, big, cite, code,
+ del, dfn, em, img, ins, kbd, q, s, samp,
+ small, strike, strong, sub, sup, tt, var,
+ b, u, i, center,
+ dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend,
+ table, caption, tbody, tfoot, thead, tr, th, td,
+ article, aside, canvas, details, embed,
+ figure, figcaption, footer, header, hgroup,
+ menu, nav, output, ruby, section, summary,
+ time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ }
+ /* HTML5 display-role reset for older browsers */
+ article, aside, details, figcaption, figure,
+ footer, header, hgroup, menu, nav, section {
+ display: block;
+ }
+ body {
+ line-height: 1;
+ }
+ ol, ul {
+ list-style: none;
+ }
+ blockquote, q {
+ quotes: none;
+ }
+ blockquote:before, blockquote:after,
+ q:before, q:after {
+ content: '';
+ content: none;
+ }
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+ /* demo styles */
+ body {
+ background: #f0f0f0;
+ color: #000;
+ }
+ .page {
+ background: #fff;
+ width: 920px;
+ margin: 0 auto;
+ padding: 20px 20px 0 20px;
+ overflow: hidden;
+ }
+ .font-container {
+ overflow-x: auto;
+ overflow-y: hidden;
+ margin-bottom: 40px;
+ line-height: 1.3;
+ white-space: nowrap;
+ padding-bottom: 5px;
+ }
+ h1 {
+ position: relative;
+ background: #444;
+ font-size: 32px;
+ color: #fff;
+ padding: 10px 20px;
+ margin: 0 -20px 12px -20px;
+ }
+ .letters {
+ font-size: 25px;
+ margin-bottom: 20px;
+ }
+ .s10:before {
+ content: '10px';
+ }
+ .s11:before {
+ content: '11px';
+ }
+ .s12:before {
+ content: '12px';
+ }
+ .s14:before {
+ content: '14px';
+ }
+ .s18:before {
+ content: '18px';
+ }
+ .s24:before {
+ content: '24px';
+ }
+ .s30:before {
+ content: '30px';
+ }
+ .s36:before {
+ content: '36px';
+ }
+ .s48:before {
+ content: '48px';
+ }
+ .s60:before {
+ content: '60px';
+ }
+ .s72:before {
+ content: '72px';
+ }
+ .s10:before, .s11:before, .s12:before, .s14:before,
+ .s18:before, .s24:before, .s30:before, .s36:before,
+ .s48:before, .s60:before, .s72:before {
+ font-family: Arial, sans-serif;
+ font-size: 10px;
+ font-weight: normal;
+ font-style: normal;
+ color: #999;
+ padding-right: 6px;
+ }
+ pre {
+ display: block;
+ padding: 9px;
+ margin: 0 0 12px;
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+ font-size: 13px;
+ line-height: 1.428571429;
+ color: #333;
+ font-weight: normal;
+ font-style: normal;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
+ overflow-x: auto;
+ border-radius: 4px;
+ }
+ /* responsive */
+ @media (max-width: 959px) {
+ .page {
+ width: auto;
+ margin: 0;
+ }
+ }
+ </style>
+</head>
+<body>
+<div class="page">
+ <div class="demo">
+ <h1 style="font-family: 'Bellefair'; font-weight: normal; font-style: normal;">Bellefair Regular</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Bellefair';
+ font-weight: normal;
+ font-style: normal;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Bellefair-Regular.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Bellefair'; font-weight: normal; font-style: normal;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+</div>
+</body>
+</html>
diff --git a/fonts/bellefair/stylesheet.css b/fonts/bellefair/stylesheet.css
new file mode 100644
index 0000000..0412b8b
--- /dev/null
+++ b/fonts/bellefair/stylesheet.css
@@ -0,0 +1,9 @@
+@font-face {
+ font-family: 'Bellefair';
+ src: url('Bellefair-Regular.woff2') format('woff2'),
+ url('Bellefair-Regular.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
+
diff --git a/fonts/benne/Benne-Regular.woff b/fonts/benne/Benne-Regular.woff
new file mode 100644
index 0000000..b954ada
Binary files /dev/null and b/fonts/benne/Benne-Regular.woff differ
diff --git a/fonts/benne/Benne-Regular.woff2 b/fonts/benne/Benne-Regular.woff2
new file mode 100644
index 0000000..a44d883
Binary files /dev/null and b/fonts/benne/Benne-Regular.woff2 differ
diff --git a/fonts/benne/demo.html b/fonts/benne/demo.html
new file mode 100644
index 0000000..4a913b9
--- /dev/null
+++ b/fonts/benne/demo.html
@@ -0,0 +1,192 @@
+<!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">
+ <meta name="robots" content="noindex, noarchive">
+ <meta name="format-detection" content="telephone=no">
+ <title>Transfonter demo</title>
+ <link href="stylesheet.css" rel="stylesheet">
+ <style>
+ /*
+ http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+ */
+ html, body, div, span, applet, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ a, abbr, acronym, address, big, cite, code,
+ del, dfn, em, img, ins, kbd, q, s, samp,
+ small, strike, strong, sub, sup, tt, var,
+ b, u, i, center,
+ dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend,
+ table, caption, tbody, tfoot, thead, tr, th, td,
+ article, aside, canvas, details, embed,
+ figure, figcaption, footer, header, hgroup,
+ menu, nav, output, ruby, section, summary,
+ time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ }
+ /* HTML5 display-role reset for older browsers */
+ article, aside, details, figcaption, figure,
+ footer, header, hgroup, menu, nav, section {
+ display: block;
+ }
+ body {
+ line-height: 1;
+ }
+ ol, ul {
+ list-style: none;
+ }
+ blockquote, q {
+ quotes: none;
+ }
+ blockquote:before, blockquote:after,
+ q:before, q:after {
+ content: '';
+ content: none;
+ }
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+ /* demo styles */
+ body {
+ background: #f0f0f0;
+ color: #000;
+ }
+ .page {
+ background: #fff;
+ width: 920px;
+ margin: 0 auto;
+ padding: 20px 20px 0 20px;
+ overflow: hidden;
+ }
+ .font-container {
+ overflow-x: auto;
+ overflow-y: hidden;
+ margin-bottom: 40px;
+ line-height: 1.3;
+ white-space: nowrap;
+ padding-bottom: 5px;
+ }
+ h1 {
+ position: relative;
+ background: #444;
+ font-size: 32px;
+ color: #fff;
+ padding: 10px 20px;
+ margin: 0 -20px 12px -20px;
+ }
+ .letters {
+ font-size: 25px;
+ margin-bottom: 20px;
+ }
+ .s10:before {
+ content: '10px';
+ }
+ .s11:before {
+ content: '11px';
+ }
+ .s12:before {
+ content: '12px';
+ }
+ .s14:before {
+ content: '14px';
+ }
+ .s18:before {
+ content: '18px';
+ }
+ .s24:before {
+ content: '24px';
+ }
+ .s30:before {
+ content: '30px';
+ }
+ .s36:before {
+ content: '36px';
+ }
+ .s48:before {
+ content: '48px';
+ }
+ .s60:before {
+ content: '60px';
+ }
+ .s72:before {
+ content: '72px';
+ }
+ .s10:before, .s11:before, .s12:before, .s14:before,
+ .s18:before, .s24:before, .s30:before, .s36:before,
+ .s48:before, .s60:before, .s72:before {
+ font-family: Arial, sans-serif;
+ font-size: 10px;
+ font-weight: normal;
+ font-style: normal;
+ color: #999;
+ padding-right: 6px;
+ }
+ pre {
+ display: block;
+ padding: 9px;
+ margin: 0 0 12px;
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+ font-size: 13px;
+ line-height: 1.428571429;
+ color: #333;
+ font-weight: normal;
+ font-style: normal;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
+ overflow-x: auto;
+ border-radius: 4px;
+ }
+ /* responsive */
+ @media (max-width: 959px) {
+ .page {
+ width: auto;
+ margin: 0;
+ }
+ }
+ </style>
+</head>
+<body>
+<div class="page">
+ <div class="demo">
+ <h1 style="font-family: 'Benne Text'; font-weight: normal; font-style: normal;">Benne Regular</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Benne Text';
+ font-weight: normal;
+ font-style: normal;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Benne-Regular.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Benne Text'; font-weight: normal; font-style: normal;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+</div>
+</body>
+</html>
diff --git a/fonts/benne/stylesheet.css b/fonts/benne/stylesheet.css
new file mode 100644
index 0000000..5fe1ab5
--- /dev/null
+++ b/fonts/benne/stylesheet.css
@@ -0,0 +1,9 @@
+@font-face {
+ font-family: 'Benne Text';
+ src: url('Benne-Regular.woff2') format('woff2'),
+ url('Benne-Regular.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
+
diff --git a/fonts/butler/Butler-Black.woff b/fonts/butler/Butler-Black.woff
new file mode 100644
index 0000000..4b89201
Binary files /dev/null and b/fonts/butler/Butler-Black.woff differ
diff --git a/fonts/butler/Butler-Black.woff2 b/fonts/butler/Butler-Black.woff2
new file mode 100644
index 0000000..157d5ef
Binary files /dev/null and b/fonts/butler/Butler-Black.woff2 differ
diff --git a/fonts/butler/Butler-Bold.woff b/fonts/butler/Butler-Bold.woff
new file mode 100644
index 0000000..4565be7
Binary files /dev/null and b/fonts/butler/Butler-Bold.woff differ
diff --git a/fonts/butler/Butler-Bold.woff2 b/fonts/butler/Butler-Bold.woff2
new file mode 100644
index 0000000..f6258be
Binary files /dev/null and b/fonts/butler/Butler-Bold.woff2 differ
diff --git a/fonts/butler/Butler-ExtraBold.woff b/fonts/butler/Butler-ExtraBold.woff
new file mode 100644
index 0000000..e500d44
Binary files /dev/null and b/fonts/butler/Butler-ExtraBold.woff differ
diff --git a/fonts/butler/Butler-ExtraBold.woff2 b/fonts/butler/Butler-ExtraBold.woff2
new file mode 100644
index 0000000..3d84bc9
Binary files /dev/null and b/fonts/butler/Butler-ExtraBold.woff2 differ
diff --git a/fonts/butler/Butler-Light.woff b/fonts/butler/Butler-Light.woff
new file mode 100644
index 0000000..ea0bbfb
Binary files /dev/null and b/fonts/butler/Butler-Light.woff differ
diff --git a/fonts/butler/Butler-Light.woff2 b/fonts/butler/Butler-Light.woff2
new file mode 100644
index 0000000..ae596d4
Binary files /dev/null and b/fonts/butler/Butler-Light.woff2 differ
diff --git a/fonts/butler/Butler-Medium.woff b/fonts/butler/Butler-Medium.woff
new file mode 100644
index 0000000..135d083
Binary files /dev/null and b/fonts/butler/Butler-Medium.woff differ
diff --git a/fonts/butler/Butler-Medium.woff2 b/fonts/butler/Butler-Medium.woff2
new file mode 100644
index 0000000..40632bc
Binary files /dev/null and b/fonts/butler/Butler-Medium.woff2 differ
diff --git a/fonts/butler/Butler-UltraLight.woff b/fonts/butler/Butler-UltraLight.woff
new file mode 100644
index 0000000..14ead47
Binary files /dev/null and b/fonts/butler/Butler-UltraLight.woff differ
diff --git a/fonts/butler/Butler-UltraLight.woff2 b/fonts/butler/Butler-UltraLight.woff2
new file mode 100644
index 0000000..ec01a20
Binary files /dev/null and b/fonts/butler/Butler-UltraLight.woff2 differ
diff --git a/fonts/butler/Butler.woff b/fonts/butler/Butler.woff
new file mode 100644
index 0000000..afc1500
Binary files /dev/null and b/fonts/butler/Butler.woff differ
diff --git a/fonts/butler/Butler.woff2 b/fonts/butler/Butler.woff2
new file mode 100644
index 0000000..41ac619
Binary files /dev/null and b/fonts/butler/Butler.woff2 differ
diff --git a/fonts/butler/demo.html b/fonts/butler/demo.html
new file mode 100644
index 0000000..7c1bf47
--- /dev/null
+++ b/fonts/butler/demo.html
@@ -0,0 +1,363 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="robots" content="noindex, noarchive">
+ <meta name="format-detection" content="telephone=no">
+ <title>Transfonter demo</title>
+ <link href="stylesheet.css" rel="stylesheet">
+ <style>
+ /*
+ http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+ */
+ html, body, div, span, applet, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ a, abbr, acronym, address, big, cite, code,
+ del, dfn, em, img, ins, kbd, q, s, samp,
+ small, strike, strong, sub, sup, tt, var,
+ b, u, i, center,
+ dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend,
+ table, caption, tbody, tfoot, thead, tr, th, td,
+ article, aside, canvas, details, embed,
+ figure, figcaption, footer, header, hgroup,
+ menu, nav, output, ruby, section, summary,
+ time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ }
+ /* HTML5 display-role reset for older browsers */
+ article, aside, details, figcaption, figure,
+ footer, header, hgroup, menu, nav, section {
+ display: block;
+ }
+ body {
+ line-height: 1;
+ }
+ ol, ul {
+ list-style: none;
+ }
+ blockquote, q {
+ quotes: none;
+ }
+ blockquote:before, blockquote:after,
+ q:before, q:after {
+ content: '';
+ content: none;
+ }
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+ /* common styles */
+ body {
+ background: #f1f1f1;
+ color: #000;
+ }
+ .page {
+ background: #fff;
+ width: 920px;
+ margin: 0 auto;
+ padding: 20px 20px 0 20px;
+ overflow: hidden;
+ }
+ .font-container {
+ overflow-x: auto;
+ overflow-y: hidden;
+ margin-bottom: 40px;
+ line-height: 1.3;
+ white-space: nowrap;
+ padding-bottom: 5px;
+ }
+ h1 {
+ position: relative;
+ background: #444;
+ font-size: 32px;
+ color: #fff;
+ padding: 10px 20px;
+ margin: 0 -20px 12px -20px;
+ }
+ .letters {
+ font-size: 25px;
+ margin-bottom: 20px;
+ }
+ .s10:before {
+ content: '10px';
+ }
+ .s11:before {
+ content: '11px';
+ }
+ .s12:before {
+ content: '12px';
+ }
+ .s14:before {
+ content: '14px';
+ }
+ .s18:before {
+ content: '18px';
+ }
+ .s24:before {
+ content: '24px';
+ }
+ .s30:before {
+ content: '30px';
+ }
+ .s36:before {
+ content: '36px';
+ }
+ .s48:before {
+ content: '48px';
+ }
+ .s60:before {
+ content: '60px';
+ }
+ .s72:before {
+ content: '72px';
+ }
+ .s10:before, .s11:before, .s12:before, .s14:before,
+ .s18:before, .s24:before, .s30:before, .s36:before,
+ .s48:before, .s60:before, .s72:before {
+ font-family: Arial, sans-serif;
+ font-size: 10px;
+ font-weight: normal;
+ font-style: normal;
+ color: #999;
+ padding-right: 6px;
+ }
+ pre {
+ display: block;
+ position: relative;
+ padding: 9px;
+ margin: 0 0 10px;
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
+ font-size: 13px;
+ line-height: 1.428571429;
+ color: #333;
+ font-weight: normal !important;
+ font-style: normal !important;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
+ overflow-x: auto;
+ border-radius: 4px;
+ }
+ pre:after {
+ display: block;
+ position: absolute;
+ right: 0;
+ top: 0;
+ content: 'Usage';
+ line-height: 1;
+ padding: 5px 8px;
+ font-size: 12px;
+ color: #767676;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-right: none;
+ border-top: none;
+ border-radius: 0 4px 0 4px;
+ z-index: 10;
+ }
+ /* responsive */
+ @media (max-width: 959px) {
+ .page {
+ width: auto;
+ margin: 0;
+ }
+ }
+ </style>
+</head>
+<body>
+<div class="page">
+ <div class="demo" style="font-family: 'Butler'; font-weight: 200; font-style: normal;">
+ <h1>Butler UltraLight</h1>
+ <pre>.your-style {
+ font-family: 'Butler';
+ font-weight: 200;
+ font-style: normal;
+}</pre>
+ <div class="font-container">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+ <div class="demo" style="font-family: 'Butler'; font-weight: 500; font-style: normal;">
+ <h1>Butler Medium</h1>
+ <pre>.your-style {
+ font-family: 'Butler';
+ font-weight: 500;
+ font-style: normal;
+}</pre>
+ <div class="font-container">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+ <div class="demo" style="font-family: 'Butler'; font-weight: 300; font-style: normal;">
+ <h1>Butler Light</h1>
+ <pre>.your-style {
+ font-family: 'Butler';
+ font-weight: 300;
+ font-style: normal;
+}</pre>
+ <div class="font-container">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+ <div class="demo" style="font-family: 'Butler'; font-weight: 900; font-style: normal;">
+ <h1>Butler Black</h1>
+ <pre>.your-style {
+ font-family: 'Butler';
+ font-weight: 900;
+ font-style: normal;
+}</pre>
+ <div class="font-container">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+ <div class="demo" style="font-family: 'Butler'; font-weight: bold; font-style: normal;">
+ <h1>Butler Bold</h1>
+ <pre>.your-style {
+ font-family: 'Butler';
+ font-weight: bold;
+ font-style: normal;
+}</pre>
+ <div class="font-container">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+ <div class="demo" style="font-family: 'Butler'; font-weight: 800; font-style: normal;">
+ <h1>Butler ExtraBold</h1>
+ <pre>.your-style {
+ font-family: 'Butler';
+ font-weight: 800;
+ font-style: normal;
+}</pre>
+ <div class="font-container">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+ <div class="demo" style="font-family: 'Butler'; font-weight: normal; font-style: normal;">
+ <h1>Butler</h1>
+ <pre>.your-style {
+ font-family: 'Butler';
+ font-weight: normal;
+ font-style: normal;
+}</pre>
+ <div class="font-container">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/fonts/butler/stylesheet.css b/fonts/butler/stylesheet.css
new file mode 100644
index 0000000..28340bc
--- /dev/null
+++ b/fonts/butler/stylesheet.css
@@ -0,0 +1,56 @@
+@font-face {
+ font-family: 'Butler';
+ src: url('Butler-UltraLight.woff2') format('woff2'),
+ url('Butler-UltraLight.woff') format('woff');
+ font-weight: 200;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Butler';
+ src: url('Butler-Medium.woff2') format('woff2'),
+ url('Butler-Medium.woff') format('woff');
+ font-weight: 500;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Butler';
+ src: url('Butler-Light.woff2') format('woff2'),
+ url('Butler-Light.woff') format('woff');
+ font-weight: 300;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Butler';
+ src: url('Butler-Black.woff2') format('woff2'),
+ url('Butler-Black.woff') format('woff');
+ font-weight: 900;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Butler';
+ src: url('Butler-Bold.woff2') format('woff2'),
+ url('Butler-Bold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Butler';
+ src: url('Butler-ExtraBold.woff2') format('woff2'),
+ url('Butler-ExtraBold.woff') format('woff');
+ font-weight: 800;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Butler';
+ src: url('Butler.woff2') format('woff2'),
+ url('Butler.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
+
diff --git a/fonts/cardo/Cardo-Bold.woff b/fonts/cardo/Cardo-Bold.woff
new file mode 100644
index 0000000..8cd8b8e
Binary files /dev/null and b/fonts/cardo/Cardo-Bold.woff differ
diff --git a/fonts/cardo/Cardo-Bold.woff2 b/fonts/cardo/Cardo-Bold.woff2
new file mode 100644
index 0000000..d3c3a72
Binary files /dev/null and b/fonts/cardo/Cardo-Bold.woff2 differ
diff --git a/fonts/cardo/Cardo-Italic.woff b/fonts/cardo/Cardo-Italic.woff
new file mode 100644
index 0000000..1e5bd05
Binary files /dev/null and b/fonts/cardo/Cardo-Italic.woff differ
diff --git a/fonts/cardo/Cardo-Italic.woff2 b/fonts/cardo/Cardo-Italic.woff2
new file mode 100644
index 0000000..e9102ee
Binary files /dev/null and b/fonts/cardo/Cardo-Italic.woff2 differ
diff --git a/fonts/cardo/Cardo-Regular.woff b/fonts/cardo/Cardo-Regular.woff
new file mode 100644
index 0000000..5864304
Binary files /dev/null and b/fonts/cardo/Cardo-Regular.woff differ
diff --git a/fonts/cardo/Cardo-Regular.woff2 b/fonts/cardo/Cardo-Regular.woff2
new file mode 100644
index 0000000..8c179a0
Binary files /dev/null and b/fonts/cardo/Cardo-Regular.woff2 differ
diff --git a/fonts/cardo/demo.html b/fonts/cardo/demo.html
new file mode 100644
index 0000000..748e69f
--- /dev/null
+++ b/fonts/cardo/demo.html
@@ -0,0 +1,250 @@
+<!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">
+ <meta name="robots" content="noindex, noarchive">
+ <meta name="format-detection" content="telephone=no">
+ <title>Transfonter demo</title>
+ <link href="stylesheet.css" rel="stylesheet">
+ <style>
+ /*
+ http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+ */
+ html, body, div, span, applet, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ a, abbr, acronym, address, big, cite, code,
+ del, dfn, em, img, ins, kbd, q, s, samp,
+ small, strike, strong, sub, sup, tt, var,
+ b, u, i, center,
+ dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend,
+ table, caption, tbody, tfoot, thead, tr, th, td,
+ article, aside, canvas, details, embed,
+ figure, figcaption, footer, header, hgroup,
+ menu, nav, output, ruby, section, summary,
+ time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ }
+ /* HTML5 display-role reset for older browsers */
+ article, aside, details, figcaption, figure,
+ footer, header, hgroup, menu, nav, section {
+ display: block;
+ }
+ body {
+ line-height: 1;
+ }
+ ol, ul {
+ list-style: none;
+ }
+ blockquote, q {
+ quotes: none;
+ }
+ blockquote:before, blockquote:after,
+ q:before, q:after {
+ content: '';
+ content: none;
+ }
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+ /* demo styles */
+ body {
+ background: #f0f0f0;
+ color: #000;
+ }
+ .page {
+ background: #fff;
+ width: 920px;
+ margin: 0 auto;
+ padding: 20px 20px 0 20px;
+ overflow: hidden;
+ }
+ .font-container {
+ overflow-x: auto;
+ overflow-y: hidden;
+ margin-bottom: 40px;
+ line-height: 1.3;
+ white-space: nowrap;
+ padding-bottom: 5px;
+ }
+ h1 {
+ position: relative;
+ background: #444;
+ font-size: 32px;
+ color: #fff;
+ padding: 10px 20px;
+ margin: 0 -20px 12px -20px;
+ }
+ .letters {
+ font-size: 25px;
+ margin-bottom: 20px;
+ }
+ .s10:before {
+ content: '10px';
+ }
+ .s11:before {
+ content: '11px';
+ }
+ .s12:before {
+ content: '12px';
+ }
+ .s14:before {
+ content: '14px';
+ }
+ .s18:before {
+ content: '18px';
+ }
+ .s24:before {
+ content: '24px';
+ }
+ .s30:before {
+ content: '30px';
+ }
+ .s36:before {
+ content: '36px';
+ }
+ .s48:before {
+ content: '48px';
+ }
+ .s60:before {
+ content: '60px';
+ }
+ .s72:before {
+ content: '72px';
+ }
+ .s10:before, .s11:before, .s12:before, .s14:before,
+ .s18:before, .s24:before, .s30:before, .s36:before,
+ .s48:before, .s60:before, .s72:before {
+ font-family: Arial, sans-serif;
+ font-size: 10px;
+ font-weight: normal;
+ font-style: normal;
+ color: #999;
+ padding-right: 6px;
+ }
+ pre {
+ display: block;
+ padding: 9px;
+ margin: 0 0 12px;
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+ font-size: 13px;
+ line-height: 1.428571429;
+ color: #333;
+ font-weight: normal;
+ font-style: normal;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
+ overflow-x: auto;
+ border-radius: 4px;
+ }
+ /* responsive */
+ @media (max-width: 959px) {
+ .page {
+ width: auto;
+ margin: 0;
+ }
+ }
+ </style>
+</head>
+<body>
+<div class="page">
+ <div class="demo">
+ <h1 style="font-family: 'Cardo'; font-weight: normal; font-style: italic;">Cardo Italic</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Cardo';
+ font-weight: normal;
+ font-style: italic;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Cardo-Italic.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Cardo'; font-weight: normal; font-style: italic;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Cardo'; font-weight: bold; font-style: normal;">Cardo Bold</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Cardo';
+ font-weight: bold;
+ font-style: normal;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Cardo-Bold.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Cardo'; font-weight: bold; font-style: normal;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Cardo'; font-weight: normal; font-style: normal;">Cardo</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Cardo';
+ font-weight: normal;
+ font-style: normal;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Cardo-Regular.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Cardo'; font-weight: normal; font-style: normal;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+</div>
+</body>
+</html>
diff --git a/fonts/cardo/stylesheet.css b/fonts/cardo/stylesheet.css
new file mode 100644
index 0000000..2359165
--- /dev/null
+++ b/fonts/cardo/stylesheet.css
@@ -0,0 +1,27 @@
+@font-face {
+ font-family: 'Cardo';
+ src: url('Cardo-Italic.woff2') format('woff2'),
+ url('Cardo-Italic.woff') format('woff');
+ font-weight: normal;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Cardo';
+ src: url('Cardo-Bold.woff2') format('woff2'),
+ url('Cardo-Bold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Cardo';
+ src: url('Cardo-Regular.woff2') format('woff2'),
+ url('Cardo-Regular.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
+
diff --git a/fonts/caudex/Caudex-Bold.woff b/fonts/caudex/Caudex-Bold.woff
new file mode 100644
index 0000000..1c49f0b
Binary files /dev/null and b/fonts/caudex/Caudex-Bold.woff differ
diff --git a/fonts/caudex/Caudex-Bold.woff2 b/fonts/caudex/Caudex-Bold.woff2
new file mode 100644
index 0000000..7831c54
Binary files /dev/null and b/fonts/caudex/Caudex-Bold.woff2 differ
diff --git a/fonts/caudex/Caudex-BoldItalic.woff b/fonts/caudex/Caudex-BoldItalic.woff
new file mode 100644
index 0000000..68df5c9
Binary files /dev/null and b/fonts/caudex/Caudex-BoldItalic.woff differ
diff --git a/fonts/caudex/Caudex-BoldItalic.woff2 b/fonts/caudex/Caudex-BoldItalic.woff2
new file mode 100644
index 0000000..8cfcbda
Binary files /dev/null and b/fonts/caudex/Caudex-BoldItalic.woff2 differ
diff --git a/fonts/caudex/Caudex-Italic.woff b/fonts/caudex/Caudex-Italic.woff
new file mode 100644
index 0000000..5f3ec91
Binary files /dev/null and b/fonts/caudex/Caudex-Italic.woff differ
diff --git a/fonts/caudex/Caudex-Italic.woff2 b/fonts/caudex/Caudex-Italic.woff2
new file mode 100644
index 0000000..a04e5a4
Binary files /dev/null and b/fonts/caudex/Caudex-Italic.woff2 differ
diff --git a/fonts/caudex/Caudex-Regular.woff b/fonts/caudex/Caudex-Regular.woff
new file mode 100644
index 0000000..5efcbee
Binary files /dev/null and b/fonts/caudex/Caudex-Regular.woff differ
diff --git a/fonts/caudex/Caudex-Regular.woff2 b/fonts/caudex/Caudex-Regular.woff2
new file mode 100644
index 0000000..97f7b24
Binary files /dev/null and b/fonts/caudex/Caudex-Regular.woff2 differ
diff --git a/fonts/caudex/demo.html b/fonts/caudex/demo.html
new file mode 100644
index 0000000..5951181
--- /dev/null
+++ b/fonts/caudex/demo.html
@@ -0,0 +1,279 @@
+<!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">
+ <meta name="robots" content="noindex, noarchive">
+ <meta name="format-detection" content="telephone=no">
+ <title>Transfonter demo</title>
+ <link href="stylesheet.css" rel="stylesheet">
+ <style>
+ /*
+ http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+ */
+ html, body, div, span, applet, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ a, abbr, acronym, address, big, cite, code,
+ del, dfn, em, img, ins, kbd, q, s, samp,
+ small, strike, strong, sub, sup, tt, var,
+ b, u, i, center,
+ dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend,
+ table, caption, tbody, tfoot, thead, tr, th, td,
+ article, aside, canvas, details, embed,
+ figure, figcaption, footer, header, hgroup,
+ menu, nav, output, ruby, section, summary,
+ time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ }
+ /* HTML5 display-role reset for older browsers */
+ article, aside, details, figcaption, figure,
+ footer, header, hgroup, menu, nav, section {
+ display: block;
+ }
+ body {
+ line-height: 1;
+ }
+ ol, ul {
+ list-style: none;
+ }
+ blockquote, q {
+ quotes: none;
+ }
+ blockquote:before, blockquote:after,
+ q:before, q:after {
+ content: '';
+ content: none;
+ }
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+ /* demo styles */
+ body {
+ background: #f0f0f0;
+ color: #000;
+ }
+ .page {
+ background: #fff;
+ width: 920px;
+ margin: 0 auto;
+ padding: 20px 20px 0 20px;
+ overflow: hidden;
+ }
+ .font-container {
+ overflow-x: auto;
+ overflow-y: hidden;
+ margin-bottom: 40px;
+ line-height: 1.3;
+ white-space: nowrap;
+ padding-bottom: 5px;
+ }
+ h1 {
+ position: relative;
+ background: #444;
+ font-size: 32px;
+ color: #fff;
+ padding: 10px 20px;
+ margin: 0 -20px 12px -20px;
+ }
+ .letters {
+ font-size: 25px;
+ margin-bottom: 20px;
+ }
+ .s10:before {
+ content: '10px';
+ }
+ .s11:before {
+ content: '11px';
+ }
+ .s12:before {
+ content: '12px';
+ }
+ .s14:before {
+ content: '14px';
+ }
+ .s18:before {
+ content: '18px';
+ }
+ .s24:before {
+ content: '24px';
+ }
+ .s30:before {
+ content: '30px';
+ }
+ .s36:before {
+ content: '36px';
+ }
+ .s48:before {
+ content: '48px';
+ }
+ .s60:before {
+ content: '60px';
+ }
+ .s72:before {
+ content: '72px';
+ }
+ .s10:before, .s11:before, .s12:before, .s14:before,
+ .s18:before, .s24:before, .s30:before, .s36:before,
+ .s48:before, .s60:before, .s72:before {
+ font-family: Arial, sans-serif;
+ font-size: 10px;
+ font-weight: normal;
+ font-style: normal;
+ color: #999;
+ padding-right: 6px;
+ }
+ pre {
+ display: block;
+ padding: 9px;
+ margin: 0 0 12px;
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+ font-size: 13px;
+ line-height: 1.428571429;
+ color: #333;
+ font-weight: normal;
+ font-style: normal;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
+ overflow-x: auto;
+ border-radius: 4px;
+ }
+ /* responsive */
+ @media (max-width: 959px) {
+ .page {
+ width: auto;
+ margin: 0;
+ }
+ }
+ </style>
+</head>
+<body>
+<div class="page">
+ <div class="demo">
+ <h1 style="font-family: 'Caudex'; font-weight: bold; font-style: normal;">Caudex Bold</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Caudex';
+ font-weight: bold;
+ font-style: normal;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Caudex-Bold.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Caudex'; font-weight: bold; font-style: normal;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Caudex'; font-weight: bold; font-style: italic;">Caudex Bold Italic</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Caudex';
+ font-weight: bold;
+ font-style: italic;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Caudex-BoldItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Caudex'; font-weight: bold; font-style: italic;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Caudex'; font-weight: normal; font-style: italic;">Caudex Italic</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Caudex';
+ font-weight: normal;
+ font-style: italic;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Caudex-Italic.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Caudex'; font-weight: normal; font-style: italic;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+ <div class="demo">
+ <h1 style="font-family: 'Caudex'; font-weight: normal; font-style: normal;">Caudex Regular</h1>
+ <pre title="Usage">.your-style {
+ font-family: 'Caudex';
+ font-weight: normal;
+ font-style: normal;
+}</pre>
+ <pre title="Preload (optional)">
+<link rel="preload" href="Caudex-Regular.woff2" as="font" type="font/woff2" crossorigin></pre>
+ <div class="font-container" style="font-family: 'Caudex'; font-weight: normal; font-style: normal;">
+ <p class="letters">
+ abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+ </p>
+ <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+ <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+ </div>
+ </div>
+
+</div>
+</body>
+</html>
diff --git a/fonts/caudex/stylesheet.css b/fonts/caudex/stylesheet.css
new file mode 100644
index 0000000..95b1fbd
--- /dev/null
+++ b/fonts/caudex/stylesheet.css
@@ -0,0 +1,36 @@
+@font-face {
+ font-family: 'Caudex';
+ src: url('Caudex-Bold.woff2') format('woff2'),
+ url('Caudex-Bold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Caudex';
+ src: url('Caudex-BoldItalic.woff2') format('woff2'),
+ url('Caudex-BoldItalic.woff') format('woff');
+ font-weight: bold;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Caudex';
+ src: url('Caudex-Italic.woff2') format('woff2'),
+ url('Caudex-Italic.woff') format('woff');
+ font-weight: normal;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Caudex';
+ src: url('Caudex-Regular.woff2') format('woff2'),
+ url('Caudex-Regular.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
+
diff --git a/fonts/chanticleerroman_regular_macroman/CHANTICL-demo.html b/fonts/chanticleerroman_regular_macroman/CHANTICL-demo.html
new file mode 100644
index 0000000..59d5dba
--- /dev/null
+++ b/fonts/chanticleerroman_regular_macroman/CHANTICL-demo.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript">
+ (function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
+ if(typeof param.defaultContent=="number")
+ {var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
+ $(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
+ function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
+ {$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
+ $(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
+ </script>
+ <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
+
+ <style type="text/css">
+ body{
+ font-family: 'chanticleerromanregular';
+ }
+</style>
+
+<title>ChanticleerRoman Regular Specimen</title>
+
+
+ <script type="text/javascript" charset="utf-8">
+ $(document).ready(function() {
+ $('#container').easyTabs({defaultContent:1});
+ });
+ </script>
+</head>
+
+<body>
+<div id="container">
+ <div id="header">
+ ChanticleerRoman Regular </div>
+ <ul class="tabs">
+ <li><a href="#specimen">Specimen</a></li>
+ <li><a href="#layout">Sample Layout</a></li>
+ <li><a href="#installing">Installing Webfonts</a></li>
+
+ </ul>
+
+ <div id="main_content">
+
+
+ <div id="specimen">
+
+ <div class="section">
+ <div class="grid12 firstcol">
+ <div class="huge">AaBb</div>
+ </div>
+ </div>
+
+ <div class="section">
+ <div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
+ </div>
+ <div class="section">
+ <div class="grid12 firstcol">
+ <table class="sample_table">
+ <tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ <tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+ </table>
+
+ </div>
+
+ </div>
+
+
+
+ <div class="section" id="bodycomparison">
+
+
+ <div id="xheight">
+ <div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
+ <div class="fontbody" style="z-index:1">
+ body<span>ChanticleerRoman Regular</span>
+ </div>
+ <div class="arialbody" style="z-index:1">
+ body<span>Arial</span>
+ </div>
+ <div class="verdanabody" style="z-index:1">
+ body<span>Verdana</span>
+ </div>
+ <div class="georgiabody" style="z-index:1">
+ body<span>Georgia</span>
+ </div>
+
+
+
+ </div>
+
+
+ <div class="section psample psample_row1" id="">
+
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+ <div class="section psample psample_row2" id="">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="white_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row4" id="">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="white_blend"></div>
+
+ </div>
+
+
+
+ <div class="section psample psample_row1 fullreverse">
+ <div class="grid2 firstcol">
+ <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid3">
+ <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample psample_row2 fullreverse">
+ <div class="grid3 firstcol">
+ <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid4">
+ <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="grid5">
+ <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row3" id="">
+ <div class="grid5 firstcol">
+ <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="grid7">
+ <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+
+ <div class="black_blend"></div>
+
+ </div>
+
+ <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+ <div class="grid12 firstcol">
+ <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+ </div>
+ <div class="black_blend"></div>
+
+ </div>
+
+
+
+
+ </div>
+
+ <div id="layout">
+
+ <div class="section">
+
+ <div class="grid12 firstcol">
+ <h1>Lorem Ipsum Dolor</h1>
+ <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+ <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+ </div>
+ </div>
+ <div class="section">
+ <div class="grid8 firstcol">
+ <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+ <h3>Pellentesque ornare sem</h3>
+
+ <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+ <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+ <h3>Cras mattis consectetur</h3>
+
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+ <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+
+ <div class="grid4 sidebar">
+
+ <div class="box reverse">
+ <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+ </div>
+
+ <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+ <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+ </div>
+ </div>
+
+ </div>
+
+
+
+
+
+
+
+
+
+ <div id="specs">
+
+ </div>
+
+ <div id="installing">
+ <div class="section">
+ <div class="grid7 firstcol">
+ <h1>Installing Webfonts</h1>
+
+ <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+ <h2>1. Upload your webfonts</h2>
+ <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+ <h2>2. Include the webfont stylesheet</h2>
+ <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{
+ font-family: 'MyWebFont';
+ src: url('WebFont.eot');
+ src: url('WebFont.eot?iefix') format('eot'),
+ url('WebFont.woff') format('woff'),
+ url('WebFont.ttf') format('truetype'),
+ url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+ <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+ <code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
+
+ <h2>3. Modify your own stylesheet</h2>
+ <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'MyWebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+ </div>
+
+ <div class="grid5 sidebar">
+ <div class="box">
+ <h2>Troubleshooting<br />Font-Face Problems</h2>
+ <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+ <h3>Fonts not showing in any browser</h3>
+
+ <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+ <h3>Fonts not loading in iPhone or iPad</h3>
+
+ <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+ <h3>Fonts not loading in Firefox</h3>
+
+ <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+ <h3>Fonts not loading in IE</h3>
+
+ <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+ <h3>Fonts not loading in IE9</h3>
+
+ <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+ <div id="footer">
+ <p>©2010-2011 Fontspring. All rights reserved.</p>
+ </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/fonts/chanticleerroman_regular_macroman/CHANTICL-webfont.woff b/fonts/chanticleerroman_regular_macroman/CHANTICL-webfont.woff
new file mode 100644
index 0000000..a637240
Binary files /dev/null and b/fonts/chanticleerroman_regular_macroman/CHANTICL-webfont.woff differ
diff --git a/fonts/chanticleerroman_regular_macroman/specimen_files/CHANTICL-cleartype.png b/fonts/chanticleerroman_regular_macroman/specimen_files/CHANTICL-cleartype.png
new file mode 100644
index 0000000..2f650b0
Binary files /dev/null and b/fonts/chanticleerroman_regular_macroman/specimen_files/CHANTICL-cleartype.png differ
diff --git a/fonts/chanticleerroman_regular_macroman/specimen_files/grid_12-825-55-15.css b/fonts/chanticleerroman_regular_macroman/specimen_files/grid_12-825-55-15.css
new file mode 100644
index 0000000..3d6aef7
--- /dev/null
+++ b/fonts/chanticleerroman_regular_macroman/specimen_files/grid_12-825-55-15.css
@@ -0,0 +1,129 @@
+/*Notes about grid:
+Columns: 12
+Grid Width: 825px
+Column Width: 55px
+Gutter Width: 15px
+-------------------------------*/
+
+
+
+.section {margin-bottom: 18px;
+}
+.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
+.section {*zoom: 1;}
+
+.section .firstcolumn,
+.section .firstcol {margin-left: 0;}
+
+
+/* Border on left hand side of a column. */
+.border {
+ padding-left: 7px;
+ margin-left: 7px;
+ border-left: 1px solid #eee;
+}
+
+/* Border with more whitespace, spans one column. */
+.colborder {
+ padding-left: 42px;
+ margin-left: 42px;
+ border-left: 1px solid #eee;
+}
+
+
+
+/* The Grid Classes */
+.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
+{margin-left: 15px;float: left;display: inline; overflow: hidden;}
+
+
+.width1, .grid1, .span-1 {width: 55px;}
+.width1_2cols,.grid1_2cols {width: 20px;}
+.width1_3cols,.grid1_3cols {width: 8px;}
+.width1_4cols,.grid1_4cols {width: 2px;}
+.input_width1 {width: 49px;}
+
+.width2, .grid2, .span-2 {width: 125px;}
+.width2_3cols,.grid2_3cols {width: 31px;}
+.width2_4cols,.grid2_4cols {width: 20px;}
+.input_width2 {width: 119px;}
+
+.width3, .grid3, .span-3 {width: 195px;}
+.width3_2cols,.grid3_2cols {width: 90px;}
+.width3_4cols,.grid3_4cols {width: 37px;}
+.input_width3 {width: 189px;}
+
+.width4, .grid4, .span-4 {width: 265px;}
+.width4_3cols,.grid4_3cols {width: 78px;}
+.input_width4 {width: 259px;}
+
+.width5, .grid5, .span-5 {width: 335px;}
+.width5_2cols,.grid5_2cols {width: 160px;}
+.width5_3cols,.grid5_3cols {width: 101px;}
+.width5_4cols,.grid5_4cols {width: 72px;}
+.input_width5 {width: 329px;}
+
+.width6, .grid6, .span-6 {width: 405px;}
+.width6_4cols,.grid6_4cols {width: 90px;}
+.input_width6 {width: 399px;}
+
+.width7, .grid7, .span-7 {width: 475px;}
+.width7_2cols,.grid7_2cols {width: 230px;}
+.width7_3cols,.grid7_3cols {width: 148px;}
+.width7_4cols,.grid7_4cols {width: 107px;}
+.input_width7 {width: 469px;}
+
+.width8, .grid8, .span-8 {width: 545px;}
+.width8_3cols,.grid8_3cols {width: 171px;}
+.input_width8 {width: 539px;}
+
+.width9, .grid9, .span-9 {width: 615px;}
+.width9_2cols,.grid9_2cols {width: 300px;}
+.width9_4cols,.grid9_4cols {width: 142px;}
+.input_width9 {width: 609px;}
+
+.width10, .grid10, .span-10 {width: 685px;}
+.width10_3cols,.grid10_3cols {width: 218px;}
+.width10_4cols,.grid10_4cols {width: 160px;}
+.input_width10 {width: 679px;}
+
+.width11, .grid11, .span-11 {width: 755px;}
+.width11_2cols,.grid11_2cols {width: 370px;}
+.width11_3cols,.grid11_3cols {width: 241px;}
+.width11_4cols,.grid11_4cols {width: 177px;}
+.input_width11 {width: 749px;}
+
+.width12, .grid12, .span-12 {width: 825px;}
+.input_width12 {width: 819px;}
+
+/* Subdivided grid spaces */
+.emptycols_left1, .prepend-1 {padding-left: 70px;}
+.emptycols_right1, .append-1 {padding-right: 70px;}
+.emptycols_left2, .prepend-2 {padding-left: 140px;}
+.emptycols_right2, .append-2 {padding-right: 140px;}
+.emptycols_left3, .prepend-3 {padding-left: 210px;}
+.emptycols_right3, .append-3 {padding-right: 210px;}
+.emptycols_left4, .prepend-4 {padding-left: 280px;}
+.emptycols_right4, .append-4 {padding-right: 280px;}
+.emptycols_left5, .prepend-5 {padding-left: 350px;}
+.emptycols_right5, .append-5 {padding-right: 350px;}
+.emptycols_left6, .prepend-6 {padding-left: 420px;}
+.emptycols_right6, .append-6 {padding-right: 420px;}
+.emptycols_left7, .prepend-7 {padding-left: 490px;}
+.emptycols_right7, .append-7 {padding-right: 490px;}
+.emptycols_left8, .prepend-8 {padding-left: 560px;}
+.emptycols_right8, .append-8 {padding-right: 560px;}
+.emptycols_left9, .prepend-9 {padding-left: 630px;}
+.emptycols_right9, .append-9 {padding-right: 630px;}
+.emptycols_left10, .prepend-10 {padding-left: 700px;}
+.emptycols_right10, .append-10 {padding-right: 700px;}
+.emptycols_left11, .prepend-11 {padding-left: 770px;}
+.emptycols_right11, .append-11 {padding-right: 770px;}
+.pull-1 {margin-left: -70px;}
+.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
+.pull-2 {margin-left: -140px;}
+.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
+.pull-3 {margin-left: -210px;}
+.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
+.pull-4 {margin-left: -280px;}
+.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
\ No newline at end of file
diff --git a/fonts/chanticleerroman_regular_macroman/specimen_files/specimen_stylesheet.css b/fonts/chanticleerroman_regular_macroman/specimen_files/specimen_stylesheet.css
new file mode 100644
index 0000000..aecc43c
--- /dev/null
+++ b/fonts/chanticleerroman_regular_macroman/specimen_files/specimen_stylesheet.css
@@ -0,0 +1,396 @@
+@import url('grid_12-825-55-15.css');
+
+/*
+ CSS Reset by Eric Meyer - Released under Public Domain
+ http://meyerweb.com/eric/tools/css/reset/
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, table,
+caption, tbody, tfoot, thead, tr, th, td
+ {margin: 0;padding: 0;border: 0;outline: 0;
+ font-size: 100%;vertical-align: baseline;
+ background: transparent;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after,
+q:before, q:after {content: ''; content: none;}
+:focus {outline: 0;}
+ins {text-decoration: none;}
+del {text-decoration: line-through;}
+table {border-collapse: collapse;border-spacing: 0;}
+
+
+
+
+body {
+ color: #000;
+ background-color: #dcdcdc;
+}
+
+a {
+ text-decoration: none;
+ color: #1883ba;
+}
+
+h1{
+ font-size: 32px;
+ font-weight: normal;
+ font-style: normal;
+ margin-bottom: 18px;
+}
+
+h2{
+ font-size: 18px;
+}
+
+#container {
+ width: 865px;
+ margin: 0px auto;
+}
+
+
+#header {
+ padding: 20px;
+ font-size: 36px;
+ background-color: #000;
+ color: #fff;
+}
+
+#header span {
+ color: #666;
+}
+#main_content {
+ background-color: #fff;
+ padding: 60px 20px 20px;
+}
+
+
+#footer p {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 50px;
+ color: #333;
+ font: 10px Arial, sans-serif;
+}
+
+.tabs {
+ width: 100%;
+ height: 31px;
+ background-color: #444;
+}
+.tabs li {
+ float: left;
+ margin: 0;
+ overflow: hidden;
+ background-color: #444;
+}
+.tabs li a {
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ font: bold 11px/11px 'Arial';
+ text-transform: uppercase;
+ padding: 10px 15px;
+ border-right: 1px solid #fff;
+}
+
+.tabs li a:hover {
+ background-color: #00b3ff;
+
+}
+
+.tabs li.active a {
+ color: #000;
+ background-color: #fff;
+}
+
+
+
+div.huge {
+
+ font-size: 300px;
+ line-height: 1em;
+ padding: 0;
+ letter-spacing: -.02em;
+ overflow: hidden;
+}
+div.glyph_range {
+ font-size: 72px;
+ line-height: 1.1em;
+}
+
+.size10{ font-size: 10px; }
+.size11{ font-size: 11px; }
+.size12{ font-size: 12px; }
+.size13{ font-size: 13px; }
+.size14{ font-size: 14px; }
+.size16{ font-size: 16px; }
+.size18{ font-size: 18px; }
+.size20{ font-size: 20px; }
+.size24{ font-size: 24px; }
+.size30{ font-size: 30px; }
+.size36{ font-size: 36px; }
+.size48{ font-size: 48px; }
+.size60{ font-size: 60px; }
+.size72{ font-size: 72px; }
+.size90{ font-size: 90px; }
+
+
+.psample_row1 { height: 120px;}
+.psample_row1 { height: 120px;}
+.psample_row2 { height: 160px;}
+.psample_row3 { height: 160px;}
+.psample_row4 { height: 160px;}
+
+.psample {
+ overflow: hidden;
+ position: relative;
+}
+.psample p {
+ line-height: 1.3em;
+ display: block;
+ overflow: hidden;
+ margin: 0;
+}
+
+.psample span {
+ margin-right: .5em;
+}
+
+.white_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
+ position: absolute;
+ bottom: 0;
+}
+.black_blend {
+ width: 100%;
+ height: 61px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
+ position: absolute;
+ bottom: 0;
+}
+.fullreverse {
+ background: #000 !important;
+ color: #fff !important;
+ margin-left: -20px;
+ padding-left: 20px;
+ margin-right: -20px;
+ padding-right: 20px;
+ padding: 20px;
+ margin-bottom:0;
+}
+
+
+.sample_table td {
+ padding-top: 3px;
+ padding-bottom:5px;
+ padding-left: 5px;
+ vertical-align: middle;
+ line-height: 1.2em;
+}
+
+.sample_table td:first-child {
+ background-color: #eee;
+ text-align: right;
+ padding-right: 5px;
+ padding-left: 0;
+ padding: 5px;
+ font: 11px/12px "Courier New", Courier, mono;
+}
+
+code {
+ white-space: pre;
+ background-color: #eee;
+ display: block;
+ padding: 10px;
+ margin-bottom: 18px;
+ overflow: auto;
+}
+
+
+.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
+
+.box {
+ padding: 18px;
+ margin-bottom: 18px;
+ background: #eee;
+}
+
+.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
+
+#bodycomparison {
+ position: relative;
+ overflow: hidden;
+ font-size: 72px;
+ height: 90px;
+ white-space: nowrap;
+}
+
+#bodycomparison div{
+ font-size: 72px;
+ line-height: 90px;
+ display: inline;
+ margin: 0 15px 0 0;
+ padding: 0;
+}
+
+#bodycomparison div span{
+ font: 10px Arial;
+ position: absolute;
+ left: 0;
+}
+#xheight {
+ float: none;
+ position: absolute;
+ color: #d9f3ff;
+ font-size: 72px;
+ line-height: 90px;
+}
+
+.fontbody {
+ position: relative;
+}
+.arialbody{
+ font-family: Arial;
+ position: relative;
+}
+.verdanabody{
+ font-family: Verdana;
+ position: relative;
+}
+.georgiabody{
+ font-family: Georgia;
+ position: relative;
+}
+
+/* @group Layout page
+ */
+
+#layout h1 {
+ font-size: 36px;
+ line-height: 42px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h2 {
+ font-size: 24px;
+ line-height: 23px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+#layout h3 {
+ font-size: 22px;
+ line-height: 1.4em;
+ margin-top: 1em;
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+#layout p.byline {
+ font-size: 12px;
+ margin-top: 18px;
+ line-height: 12px;
+ margin-bottom: 0;
+}
+#layout p {
+ font-size: 14px;
+ line-height: 21px;
+ margin-bottom: .5em;
+}
+
+#layout p.large{
+ font-size: 18px;
+ line-height: 26px;
+}
+
+#layout .sidebar p{
+ font-size: 12px;
+ line-height: 1.4em;
+}
+
+#layout p.caption {
+ font-size: 10px;
+ margin-top: -16px;
+ margin-bottom: 18px;
+}
+
+/* @end */
+
+/* @group Glyphs */
+
+#glyph_chart div{
+ background-color: #d9f3ff;
+ color: black;
+ float: left;
+ font-size: 36px;
+ height: 1.2em;
+ line-height: 1.2em;
+ margin-bottom: 1px;
+ margin-right: 1px;
+ text-align: center;
+ width: 1.2em;
+ position: relative;
+ padding: .6em .2em .2em;
+}
+
+#glyph_chart div p {
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: block;
+ text-align: center;
+ font: bold 9px Arial, sans-serif;
+ background-color: #3a768f;
+ width: 100%;
+ color: #fff;
+ padding: 2px 0;
+}
+
+
+#glyphs h1 {
+ font-family: Arial, sans-serif;
+}
+/* @end */
+
+/* @group Installing */
+
+#installing {
+ font: 13px Arial, sans-serif;
+}
+
+#installing p,
+#glyphs p{
+ line-height: 1.2em;
+ margin-bottom: 18px;
+ font: 13px Arial, sans-serif;
+}
+
+
+
+#installing h3{
+ font-size: 15px;
+ margin-top: 18px;
+}
+
+/* @end */
+
+#rendering h1 {
+ font-family: Arial, sans-serif;
+}
+.render_table td {
+ font: 11px "Courier New", Courier, mono;
+ vertical-align: middle;
+}
+
+
diff --git a/fonts/chanticleerroman_regular_macroman/stylesheet.css b/fonts/chanticleerroman_regular_macroman/stylesheet.css
new file mode 100644
index 0000000..484097b
--- /dev/null
+++ b/fonts/chanticleerroman_regular_macroman/stylesheet.css
@@ -0,0 +1,13 @@
+@font-face {
+ font-family: 'chanticleerromanregular';
+ src: url('CHANTICL-webfont.eot');
+ src: url('CHANTICL-webfont.eot?#iefix') format('embedded-opentype'),
+ url('CHANTICL-webfont.woff2') format('woff2'),
+ url('CHANTICL-webfont.woff') format('woff'),
+ url('CHANTICL-webfont.ttf') format('truetype'),
+ url('CHANTICL-webfont.svg#chanticleerromanregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+
+}
+
diff --git a/fonts/mauren/Web Font EULA 2.0.txt b/fonts/mauren/Web Font EULA 2.0.txt
new file mode 100644
index 0000000..8e4e443
--- /dev/null
+++ b/fonts/mauren/Web Font EULA 2.0.txt
@@ -0,0 +1,90 @@
+<strong>WEBFONTS | END USER LICENSE AGREEMENT | V2.0</strong>
+
+By downloading, installing and/or embedding font software (“Fonts”) offered for license by Creative Market Labs, Inc, Fontspring, and its distributors (“Licensor”), you (“Licensee”) agree to be bound by the following terms and conditions of this End User Licensing Agreement (“EULA”):
+
+<strong>1. RIGHTS GRANTED</strong>
+Licensor grants to Licensee a perpetual, worldwide, non-exclusive and non-transferable license to install the Fonts, and create, reproduce, modify, display, and distribute artwork created with the Fonts in accordance with the terms and conditions of this EULA.
+
+<strong>1.1 Storage & Backup</strong>
+<span style="color:#6F43EE;">⬇︎</span> <strong>Server Storage</strong>
+The Licensee is permitted to upload the Fonts to a server or a cloud-based storage service that is owned, leased, or otherwise controlled by Licensee, for the purpose of storage, asset management, and retrieval by Licensee only.
+
+<span style="color:#6F43EE;">⬇︎</span> <strong>Backup</strong>
+The Licensee is permitted to make a reasonable number of backup copies of the Font for disaster recovery purposes only.
+
+<strong>1.2 Limits</strong>
+<span style="color:orange">⚠️</span> <strong>@Font-Face Only</strong>
+The Licensee is only permitted to embed the Fonts in websites using the @font-face syntax in CSS stylesheets.
+
+<span style="color:orange">⚠️</span> <strong>Ownership</strong>
+The Licensee is only permitted to embed the Fonts in websites the Licensee owns or controls.
+
+<span style="color:orange">⚠️</span> <strong>Pageview Limit</strong>
+Websites that embed the Fonts must not have a monthly combined traffic that exceeds the pageviews per month limit indicated on the applicable order receipt (“Receipt”).
+
+<strong>1.3 Rights</strong>
+<span style="color:#669900">✔</span> <strong>Multiple Websites</strong>
+The Licensee is permitted to embed the Font into more than one distinct website.
+
+<span style="color:#669900">✔</span> <strong>PDF Report Embedding</strong>
+Licensee is permitted to embed the Font in Portable Document Format (PDF) reports that the App saves or exports, provided that the reports are not sold for profit.
+
+<strong>1.4 Restrictions</strong>
+<span style="color:red">✘</span> <strong>Webfont Files Only</strong>
+The Licensee must use the provided Fonts from Licensor. Fonts designed for Websites will be in the format of WOFF OR WOFF2. Licensee is prohibited from embedding Fonts in standard desktop formats of CFF OpenType (.otf) or TrueType (.ttf).
+
+<span style="color:red">✘</span> <strong>No Source Code Distribution</strong>
+Licensee is prohibited from redistributing the Fonts with any Website’s source code.
+
+<span style="color:red">✘</span> <strong>No Typesetting Products</strong>
+Licensee is prohibited from embedding the Font in any Website that enables an End User to create custom typesetting with the Font. For example: An image editor with text features.
+
+<span style="color:red">✘</span> <strong>No Other Systems/Product Embedding</strong>
+Licensed Users are prohibited from embedding or installing the Fonts in:
+- Computer operating systems, such as Mac, Windows or Linux
+- Digital ads using CSS @font-face
+- Desktop applications, mobile apps, and other software
+- Cloud-based apps allowing third-party, End User Font usage
+- Electronic devices
+- Digital games
+- Ebooks
+- Editable templates and editable PDFs
+
+<strong>1.5 Third Parties</strong>
+The Licensee is permitted to temporarily provide the Fonts to a third-party designer or agent (“Agent”) who is working on behalf of the Licensee. All Agents of the Licensee must: (a) agree in writing to Licensee that the Fonts will be used exclusively for Licensee’s work, in accordance with the terms of this EULA; (b) destroy all copies of the Fonts upon completion and delivery of the work to Licensee; and (c) use and/or embed the Fonts only in work owned or controlled by Licensee.
+
+<strong>2. FONT MODIFICATIONS</strong>
+Licensed Users are prohibited from modifying the Fonts, or creating derivative Fonts without prior written consent from Licensor or the Font’s copyright holder except where derivative Fonts are necessary for embedding or linking in accordance with this EULA.
+
+<strong>3. COPYRIGHT</strong>
+The Fonts are protected by United States and international copyright and other laws and treaties. The copyright holder is the sole, exclusive owner of all intellectual property rights, including
diff truncated