├── books └── .empty ├── icon.png ├── .gitignore ├── MindReader.manifest ├── screenshot.png ├── css ├── alegreya │ ├── alegreya-bold-webfont.eot │ ├── alegreya-bold-webfont.ttf │ ├── alegreya-bold-webfont.woff │ ├── alegreya-bold-webfont.woff2 │ ├── alegreya-italic-webfont.eot │ ├── alegreya-italic-webfont.ttf │ ├── alegreya-italic-webfont.woff │ ├── alegreya-italic-webfont.woff2 │ ├── alegreya-regular-webfont.eot │ ├── alegreya-regular-webfont.ttf │ ├── alegreya-regular-webfont.woff │ ├── alegreya-bolditalic-webfont.eot │ ├── alegreya-bolditalic-webfont.ttf │ ├── alegreya-regular-webfont.woff2 │ ├── alegreya-bolditalic-webfont.woff │ ├── alegreya-bolditalic-webfont.woff2 │ ├── stylesheet.css │ ├── alegreya-italic-demo.html │ ├── alegreya-regular-demo.html │ └── alegreya-bolditalic-demo.html ├── theme-dark.css └── reader.css ├── .gitmodules ├── README.md ├── Makefile ├── index.html ├── js ├── main.js ├── ui.js └── epubdir.js └── lib ├── styles ├── monoctrl.css └── monocore.css └── scripts └── monoctrl.js /books/.empty: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/icon.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | booklist.txt 2 | .*.swp 3 | *.log 4 | books/* 5 | workspace 6 | -------------------------------------------------------------------------------- /MindReader.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | # Cache manifest version 1 3 | books/* 4 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/screenshot.png -------------------------------------------------------------------------------- /css/alegreya/alegreya-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-bold-webfont.eot -------------------------------------------------------------------------------- /css/alegreya/alegreya-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-bold-webfont.ttf -------------------------------------------------------------------------------- /css/alegreya/alegreya-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-bold-webfont.woff -------------------------------------------------------------------------------- /css/alegreya/alegreya-bold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-bold-webfont.woff2 -------------------------------------------------------------------------------- /css/alegreya/alegreya-italic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-italic-webfont.eot -------------------------------------------------------------------------------- /css/alegreya/alegreya-italic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-italic-webfont.ttf -------------------------------------------------------------------------------- /css/alegreya/alegreya-italic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-italic-webfont.woff -------------------------------------------------------------------------------- /css/alegreya/alegreya-italic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-italic-webfont.woff2 -------------------------------------------------------------------------------- /css/alegreya/alegreya-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-regular-webfont.eot -------------------------------------------------------------------------------- /css/alegreya/alegreya-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-regular-webfont.ttf -------------------------------------------------------------------------------- /css/alegreya/alegreya-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-regular-webfont.woff -------------------------------------------------------------------------------- /css/alegreya/alegreya-bolditalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-bolditalic-webfont.eot -------------------------------------------------------------------------------- /css/alegreya/alegreya-bolditalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-bolditalic-webfont.ttf -------------------------------------------------------------------------------- /css/alegreya/alegreya-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-regular-webfont.woff2 -------------------------------------------------------------------------------- /css/alegreya/alegreya-bolditalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-bolditalic-webfont.woff -------------------------------------------------------------------------------- /css/alegreya/alegreya-bolditalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AppMini/MindReader/HEAD/css/alegreya/alegreya-bolditalic-webfont.woff2 -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "Monocle"] 2 | path = Monocle 3 | url = https://github.com/joseph/Monocle.git 4 | [submodule "loaders.css"] 5 | path = loaders.css 6 | url = https://github.com/ConnorAtherton/loaders.css.git 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Screenshot of the web app](./screenshot.png) 2 | 3 | * Place your .epub files in the `books` directory. 4 | * Run `make` to unpack the epub files. 5 | * Upload to your web hosting. 6 | 7 | Run `make` any time you add new .epub files. 8 | 9 | Warning: this code is a frenzied two-night hack to fill an immediate need. The code is not pretty. 10 | -------------------------------------------------------------------------------- /css/theme-dark.css: -------------------------------------------------------------------------------- 1 | body { font-family: Palatino, Georgia, serif; line-height: 1.3; font-size: 11pt; /* color: #310; */ color: #FEC } 2 | h1, h2, h3, h4 { margin-top: 1em; margin-bottom: 2em; } 3 | .cover { text-transform: uppercase; text-align: center; } 4 | .cover h1 { letter-spacing: 0.2em; font-size: 1.7em; margin-bottom: 2em; } 5 | .cover h2 { font-size: 1em; margin-bottom: 3em; } 6 | .cover h2 span { font-size: 0.8em; display: block; font-weight: normal; } 7 | .cover h3 { font-weight: normal; font-size: 2em; } 8 | .cover p { text-transform: none; font-size: 11px; } 9 | a { color: white; text-decoration: none; } 10 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | # rename any files with spaces - horrible hack because Make sucks at spaces 2 | SPACED=$(shell find . -name "* *") 3 | SPACEREPLACE=$(shell IFS=""; for book in books/*\ *; do echo "Removing spaces from \"$$book\"."; mv $$book `echo $$book | tr " " "_"`; done) 4 | $(if $(SPACED),$(info $(SPACEREPLACE))) 5 | # Actual variables being here 6 | MONOCLE=lib/scripts/monocore.js lib/scripts/monoctrl.js lib/styles/monocore.css lib/styles/monoctrl.css 7 | LOADER=lib/loaders.min.css 8 | MONOCLEDEPS=Monocle/Rakefile $(wildcard Monocle/src/**/*.js) 9 | BOOKS=$(wildcard books/*.epub) 10 | BOOKDIRS = $(BOOKS:.epub=) 11 | 12 | ### Build books ### 13 | 14 | all:booklist.txt $(BOOKDIRS) 15 | 16 | .SECONDEXPANSION: 17 | books/%: books/$$(notdir $$*).epub 18 | @echo "Unpacking $<" 19 | @unzip -q -o $< -d $@ 20 | 21 | booklist.txt: $(BOOKDIRS) 22 | @echo "Building book list." 23 | @cd books && ls *.epub > ../booklist.txt 24 | 25 | ### Build dependencies for development/updates ### 26 | 27 | deps:$(MONOCLE) $(LOADER) 28 | 29 | $(MONOCLE): $(MONOCLEDEPS) Monocle 30 | @cd Monocle && rake 31 | @cp -av Monocle/dist/* lib/ 32 | 33 | $(LOADER): loaders.css 34 | @cp -av loaders.css/loaders.min.css $(LOADER) 35 | 36 | Monocle loaders.css: 37 | @echo "Checking out submodules." 38 | @git submodule init 39 | @git submodule update 40 | 41 | clean: 42 | rm -rf Monocle/dist 43 | rm -rf booklist.txt 44 | 45 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | MindReader 21 | 22 | 23 | 24 |
25 |
26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /css/alegreya/stylesheet.css: -------------------------------------------------------------------------------- 1 | /* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 8, 2015 */ 2 | 3 | 4 | 5 | @font-face { 6 | font-family: 'alegreyaregular'; 7 | src: url('alegreya-regular-webfont.eot'); 8 | src: url('alegreya-regular-webfont.eot?#iefix') format('embedded-opentype'), 9 | url('alegreya-regular-webfont.woff2') format('woff2'), 10 | url('alegreya-regular-webfont.woff') format('woff'), 11 | url('alegreya-regular-webfont.ttf') format('truetype'), 12 | url('alegreya-regular-webfont.svg#alegreyaregular') format('svg'); 13 | font-weight: normal; 14 | font-style: normal; 15 | 16 | } 17 | 18 | 19 | 20 | 21 | @font-face { 22 | font-family: 'alegreyaitalic'; 23 | src: url('alegreya-italic-webfont.eot'); 24 | src: url('alegreya-italic-webfont.eot?#iefix') format('embedded-opentype'), 25 | url('alegreya-italic-webfont.woff2') format('woff2'), 26 | url('alegreya-italic-webfont.woff') format('woff'), 27 | url('alegreya-italic-webfont.ttf') format('truetype'), 28 | url('alegreya-italic-webfont.svg#alegreyaitalic') format('svg'); 29 | font-weight: normal; 30 | font-style: normal; 31 | 32 | } 33 | 34 | 35 | 36 | 37 | @font-face { 38 | font-family: 'alegreyabold_italic'; 39 | src: url('alegreya-bolditalic-webfont.eot'); 40 | src: url('alegreya-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), 41 | url('alegreya-bolditalic-webfont.woff2') format('woff2'), 42 | url('alegreya-bolditalic-webfont.woff') format('woff'), 43 | url('alegreya-bolditalic-webfont.ttf') format('truetype'), 44 | url('alegreya-bolditalic-webfont.svg#alegreyabold_italic') format('svg'); 45 | font-weight: normal; 46 | font-style: normal; 47 | 48 | } 49 | 50 | 51 | 52 | 53 | @font-face { 54 | font-family: 'alegreyabold'; 55 | src: url('alegreya-bold-webfont.eot'); 56 | src: url('alegreya-bold-webfont.eot?#iefix') format('embedded-opentype'), 57 | url('alegreya-bold-webfont.woff2') format('woff2'), 58 | url('alegreya-bold-webfont.woff') format('woff'), 59 | url('alegreya-bold-webfont.ttf') format('truetype'), 60 | url('alegreya-bold-webfont.svg#alegreyabold') format('svg'); 61 | font-weight: normal; 62 | font-style: normal; 63 | 64 | } -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 3 | var elSpinner = document.getElementById("spinner"); 4 | 5 | // Initialize the reader element. 6 | function init(bookData) { 7 | console.log("init"); 8 | 9 | var bkTitle = bookData.getMetaData('title'); 10 | window.placeSaver = new Monocle.Controls.PlaceSaver(bkTitle); 11 | var options = { 12 | place: placeSaver.savedPlace(), 13 | stylesheet: fetch("css/theme-dark.css"), 14 | preloadWindow: 3, 15 | } 16 | // load the new pages one after another 17 | Monocle.Book.PRELOAD_INTERVAL = 200; 18 | console.log("pre reader"); 19 | window.reader = Monocle.Reader('reader', bookData, options, prep); 20 | reader.listen('monocle:componentloaded', function(evt) { console.log(evt); }); 21 | console.log("reader done."); 22 | } 23 | 24 | function prep(rdr) { 25 | console.log("prep"); 26 | rdr.addControl(placeSaver/*, 'invisible'*/); 27 | bookSpinner(reader); 28 | //oldBookMagnifier(reader); 29 | bookTitle(reader); 30 | var chT = bookChapterTitle(reader); 31 | var pgN = bookPageNumber(reader); 32 | bookLoadWatcher(reader, pgN, chT); 33 | var scrub = bookScrubber(reader, chT, pgN); 34 | Monocle.Events.listen(window, 'resize', onResize); 35 | var elReader = document.getElementById('reader'); 36 | elReader.style.visibility = "visible"; 37 | elSpinner.parentNode.removeChild(elSpinner); 38 | document.getElementById("tapper").onclick = scrub; 39 | console.log("prep done"); 40 | } 41 | 42 | function onResize() { 43 | window.reader.resized(); 44 | } 45 | 46 | var pathparts = document.location.href.split("?"); 47 | if (pathparts.length == 2) { 48 | new Epub("books/" + pathparts[1], function(bookData) { 49 | init(bookData); 50 | }); 51 | } else { 52 | var list = fetch("booklist.txt").split("\n"); 53 | var out = ""; 60 | var el = document.getElementById("reader"); 61 | el.innerHTML = out; 62 | el.style.visibility = "visible"; 63 | el.className = "booklist" 64 | elSpinner.parentNode.removeChild(elSpinner); 65 | } 66 | 67 | function fetch (path) { 68 | var ajReq = new XMLHttpRequest(); 69 | ajReq.open("GET", path, false); 70 | ajReq.send(null); 71 | return ajReq.responseText; 72 | } 73 | })(); 74 | -------------------------------------------------------------------------------- /css/reader.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "alegreyaregular"; 3 | } 4 | 5 | body { 6 | background: #111; 7 | } 8 | 9 | #reader { 10 | top: 0; 11 | left: 0; 12 | right: 0; 13 | bottom: 0; 14 | position: absolute; 15 | overflow: hidden; 16 | background-color: #111; 17 | } 18 | 19 | #reader.booklist { 20 | overflow-y: auto; 21 | } 22 | 23 | #reader.booklist li { 24 | margin-bottom: 1em; 25 | } 26 | 27 | #reader.booklist li a { 28 | text-decoration: none; 29 | } 30 | 31 | div.monelem_container { 32 | background: #111; 33 | } 34 | 35 | div.monelem_page { 36 | border: none; 37 | background-color: #111; 38 | } 39 | 40 | div.monelem_sheaf { 41 | top: 0.5em; 42 | } 43 | 44 | div.monelem_sheaf * { 45 | background-color: #111 !important; 46 | } 47 | 48 | div.monelem_controls_scrubber_container { 49 | background: none; 50 | top: 0px; 51 | } 52 | 53 | div.monelem_controls_scrubber_bubble { 54 | top: 2.5em; 55 | } 56 | 57 | html#RS\:monocle * { 58 | background-color: #111; 59 | font-family: "alegreyaregular"; 60 | } 61 | 62 | html#LS\:monocle * { 63 | background-color: #111; 64 | font-family: "alegreyaregular"; 65 | } 66 | 67 | .chapterTitle { 68 | color: #FEC; 69 | position: absolute; 70 | left: 0.5em; 71 | bottom: 0.25em; 72 | font-size: 0.75em; 73 | font-family: "Arial"; 74 | } 75 | 76 | .chapterTitle .name { 77 | display: inline-block; 78 | margin: 0px; 79 | padding: 0px; 80 | margin-bottom: -0.25em; 81 | max-width: 75%; 82 | overflow: hidden; 83 | white-space: nowrap; 84 | text-overflow: ellipsis; 85 | } 86 | 87 | .bookTitle { 88 | /*color: #FEC; 89 | margin-left: auto; 90 | margin-right: auto; 91 | font-size: 0.75em; 92 | width: 100%; 93 | position: absolute;*/ 94 | display: none; 95 | } 96 | 97 | .pageNumber { 98 | color: #FEC; 99 | position: absolute; 100 | bottom: 0.25em; 101 | right: 0.5em; 102 | font-size: 0.75em; 103 | font-family: "Arial"; 104 | } 105 | 106 | .booklist { 107 | color: #FEC; 108 | max-width: 600px; 109 | margin-left: auto; 110 | margin-right: auto; 111 | display: block; 112 | line-height: 2em; 113 | list-style-type: none; 114 | } 115 | 116 | .booklist a { 117 | color: #FEC; 118 | } 119 | 120 | .ball-scale > div { 121 | background-color: #FEC; 122 | } 123 | 124 | .loader-inner { 125 | visibility: visible; 126 | display: block; 127 | z-index: 1002; 128 | margin: 0px; 129 | padding: 0px; 130 | margin-left: auto; 131 | margin-right: auto; 132 | padding-top: 2em; 133 | text-align: center; 134 | bottom: 1em; 135 | right: 1em; 136 | position: absolute; 137 | } 138 | 139 | #tapper { 140 | position: absolute; 141 | background-color: blue; 142 | bottom: 0px; 143 | right: 0px; 144 | width: 64px; 145 | height: 64px; 146 | display: block; 147 | z-index: 1001; 148 | opacity: 0.01; 149 | } 150 | 151 | #icon { 152 | margin-top: 1em; 153 | margin-left: auto; 154 | margin-right: auto; 155 | display: block; 156 | } 157 | -------------------------------------------------------------------------------- /js/ui.js: -------------------------------------------------------------------------------- 1 | // this is 99% the same as oldbook.js from Monocle 2 | 3 | /* CHAPTER TITLE RUNNING HEAD */ 4 | function bookChapterTitle(reader) { 5 | var chapterTitle = { 6 | runners: [], 7 | createControlElements: function (page) { 8 | var cntr = document.createElement('div'); 9 | cntr.className = "chapterTitle"; 10 | var runner = document.createElement('div'); 11 | runner.className = "runner"; 12 | cntr.appendChild(runner); 13 | this.runners.push(runner); 14 | this.update(page); 15 | return cntr; 16 | }, 17 | update: function (page) { 18 | var place = reader.getPlace(page); 19 | if (place) { 20 | var props = reader.getBook().properties; 21 | this.runners[page.m.pageIndex].innerHTML = "" + (place.chapterTitle() || "") + " (" + (props.componentIds.indexOf(place.componentId()) + 1) + " of " + props.componentIds.length + ")"; 22 | } 23 | } 24 | } 25 | reader.addControl(chapterTitle, 'page'); 26 | reader.listen( 27 | 'monocle:pagechange', 28 | function (evt) { chapterTitle.update(evt.m.page); } 29 | ); 30 | return chapterTitle; 31 | } 32 | 33 | /* SPINNER */ 34 | function bookSpinner(reader) { 35 | var spinner = Monocle.Controls.Spinner(reader); 36 | reader.addControl(spinner, 'page', { hidden: true }); 37 | spinner.listenForUsualDelays(); 38 | } 39 | 40 | /* PAGE NUMBER RUNNING HEAD */ 41 | function bookPageNumber() { 42 | var pageNumber = { 43 | runners: [], 44 | createControlElements: function (page) { 45 | var cntr = document.createElement('div'); 46 | cntr.className = "pageNumber"; 47 | var runner = document.createElement('div'); 48 | runner.className = "runner"; 49 | cntr.appendChild(runner); 50 | this.runners.push(runner); 51 | this.update(page); 52 | return cntr; 53 | }, 54 | update: function (page) { 55 | var place = reader.getPlace(page); 56 | // console.log(place); 57 | if (place) { 58 | this.runners[page.m.pageIndex].innerHTML = place.pageNumber() + " of " + place.pagesInComponent(); 59 | } 60 | } 61 | } 62 | reader.addControl(pageNumber, 'page'); 63 | reader.listen( 64 | 'monocle:pagechange', 65 | function (evt) { 66 | pageNumber.update(evt.m.page); 67 | } 68 | ); 69 | return pageNumber; 70 | } 71 | 72 | function bookLoadWatcher(reader, pageNumber, chapterTitle) { 73 | reader.listen('monocle:componentloaded', function(evt) { 74 | console.log("componentloaded"); 75 | }); 76 | reader.listen('monocle:loaded', function(evt) { 77 | //console.log(reader); 78 | //console.log(evt.srcElement); 79 | console.log('component loaded'); 80 | pageNumber.update(evt.srcElement); 81 | chapterTitle.update(evt.srcElement); 82 | }); 83 | } 84 | 85 | /* BOOK TITLE RUNNING HEAD */ 86 | function bookTitle(reader) { 87 | document.getElementById("title").innerText = reader.getBook().getMetaData('title'); 88 | var bookTitle = {} 89 | bookTitle.contentsMenu = Monocle.Controls.Contents(reader); 90 | reader.addControl(bookTitle.contentsMenu, 'popover', { hidden: true }); 91 | bookTitle.createControlElements = function () { 92 | var cntr = document.createElement('div'); 93 | cntr.className = "bookTitle"; 94 | var runner = document.createElement('div'); 95 | runner.className = "runner"; 96 | runner.innerHTML = reader.getBook().getMetaData('title'); 97 | cntr.appendChild(runner); 98 | 99 | Monocle.Events.listen( 100 | cntr, 101 | typeof Touch == "object" ? "touchstart" : "mousedown", 102 | function (evt) { 103 | if (evt.preventDefault) { 104 | evt.stopPropagation(); 105 | evt.preventDefault(); 106 | } else { 107 | evt.returnValue = false; 108 | } 109 | reader.showControl(bookTitle.contentsMenu); 110 | } 111 | ); 112 | 113 | return cntr; 114 | } 115 | reader.addControl(bookTitle, 'page'); 116 | return bookTitle; 117 | } 118 | 119 | /* Scrubber */ 120 | function bookScrubber(reader, chapterTitle, pageNumber) { 121 | var scrubber = new Monocle.Controls.Scrubber(reader); 122 | reader.addControl(scrubber, 'popover', { hidden: true }); 123 | var showFn = function (evt) { 124 | evt.stopPropagation(); 125 | if (scrubber.properties.hidden) { 126 | reader.showControl(scrubber); 127 | scrubber.updateNeedles(); 128 | } else { 129 | reader.hideControl(scrubber); 130 | } 131 | } 132 | for (var i = 0; i < chapterTitle.runners.length; ++i) { 133 | Monocle.Events.listenForContact( 134 | chapterTitle.runners[i].parentNode, 135 | { start: showFn } 136 | ); 137 | Monocle.Events.listenForContact( 138 | pageNumber.runners[i].parentNode, 139 | { start: showFn } 140 | ); 141 | } 142 | return showFn; 143 | } 144 | 145 | -------------------------------------------------------------------------------- /lib/styles/monoctrl.css: -------------------------------------------------------------------------------- 1 | /*=========================================================================== 2 | CONTROLS 3 | 4 | The standard Monocle stylesheet for the optional Monocle controls. See 5 | comments for monocore.css, which apply here too. 6 | ---------------------------------------------------------------------------*/ 7 | 8 | /* Contents */ 9 | 10 | div.monelem_controls_contents_container { 11 | position: absolute; 12 | width: 75%; 13 | height: 75%; 14 | left: 12.5%; 15 | top: 12.5%; 16 | background: #EEE; 17 | border: 2px solid #F7F7F7; 18 | border-radius: 9px; 19 | overflow-y: auto; 20 | -webkit-overflow-scrolling: touch; 21 | -moz-border-radius: 9px; 22 | -webkit-border-radius: 9px; 23 | box-shadow: 1px 2px 6px rgba(0,0,0,0.5); 24 | -moz-box-shadow: 1px 2px 6px rgba(0,0,0,0.5); 25 | -webkit-box-shadow: 1px 2px 6px rgba(0,0,0,0.5); 26 | } 27 | 28 | ol.monelem_controls_contents_list { 29 | margin: 6px; 30 | padding: 0; 31 | } 32 | 33 | li.monelem_controls_contents_chapter { 34 | text-overflow: ellipsis; 35 | overflow: hidden; 36 | white-space: nowrap; 37 | list-style: none; 38 | line-height: 220%; 39 | padding-left: 1em; 40 | padding-right: 2em; 41 | border-bottom: 2px groove #FEFEFE; 42 | cursor: pointer; 43 | } 44 | 45 | li.monelem_controls_contents_chapter_active { 46 | background: #999; 47 | color: white; 48 | } 49 | 50 | /* Magnifier */ 51 | 52 | .monelem_controls_magnifier_button { 53 | cursor: pointer; 54 | color: #555; 55 | position: absolute; 56 | top: 2px; 57 | right: 10px; 58 | padding: 0 2px; 59 | } 60 | 61 | .monelem_controls_magnifier_a { 62 | font-size: 11px; 63 | } 64 | 65 | .monelem_controls_magnifier_A { 66 | font-size: 18px; 67 | opacity: 0.3; 68 | } 69 | 70 | 71 | /* Spinner */ 72 | 73 | .monelem_controls_spinner_anim { 74 | position: absolute; 75 | width: 100%; 76 | height: 100%; 77 | background-color: white; 78 | background-repeat: no-repeat; 79 | background-position: center center; 80 | } 81 | .monelem_controls_spinner_anim.monelem_dormant { 82 | width: 0; 83 | height: 0; 84 | } 85 | 86 | 87 | /* Scrubber */ 88 | 89 | div.monelem_controls_scrubber_container { 90 | position: absolute; 91 | left: 1em; 92 | right: 1em; 93 | bottom: 4px; 94 | height: 30px; 95 | background: rgba(255,255,255,0.8); 96 | } 97 | 98 | div.monelem_controls_scrubber_track { 99 | margin-top: 10px; 100 | height: 5px; 101 | border: 1px solid #999; 102 | cursor: pointer; 103 | } 104 | 105 | div.monelem_controls_scrubber_needle { 106 | position: absolute; 107 | width: 14px; 108 | height: 14px; 109 | top: 5px; 110 | background: #CCC; 111 | border: 1px solid #999; 112 | border-radius: 8px; 113 | -moz-border-radius: 8px; 114 | -webkit-border-radius: 8px; 115 | } 116 | 117 | div.monelem_controls_scrubber_trail { 118 | position: absolute; 119 | background: #DDD; 120 | top: 11px; 121 | left: 1px; 122 | height: 5px; 123 | } 124 | 125 | div.monelem_controls_scrubber_bubble { 126 | display: none; 127 | position: absolute; 128 | padding: 1em; 129 | min-width: 20%; 130 | max-width: 30%; 131 | bottom: 2.5em; 132 | background: rgba(0, 0, 0, 0.9); 133 | color: #CCC; 134 | font: bold 12px Lucida Grande, Tahoma, Helvetica, Arial, sans-serif; 135 | white-space: nowrap; 136 | text-overflow: ellipsis; 137 | overflow: hidden; 138 | border-radius: 10px; 139 | -moz-border-radius: 10px; 140 | -webkit-border-radius: 10px; 141 | } 142 | 143 | 144 | /* Stencil */ 145 | div.monelem_controls_stencil_container { 146 | position: absolute; 147 | top: 0; 148 | left: 0; 149 | width: 0; 150 | height: 0; 151 | } 152 | 153 | .monelem_controls_stencil_mask { 154 | display: block; 155 | position: absolute; 156 | } 157 | 158 | div.monelem_controls_stencil_highlighted .monelem_controls_stencil_mask { 159 | background: rgba(0,0,255,0.15); 160 | } 161 | 162 | 163 | /*=========================================================================== 164 | DATA URIs 165 | 166 | These are data-uri packed images, inlined for loading speed and simplicity. 167 | Placed at the end of this file because they're visually noisy... 168 | ---------------------------------------------------------------------------*/ 169 | 170 | div.monelem_controls_spinner_anim { 171 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA0CAMAAAANBM47AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABV0RVh0Q3JlYXRpb24gVGltZQAxNy81LzEwnOhoKAAAAE5QTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxKKmWQAAABp0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBl0wLilAAAC8klEQVQYGZXBB2LjOAADQFCimtVFEoD//9HLbrJxipzoZoBToYptUwV8V/Xrsc8RP6i7aduPXHI69mWIAR9UY6Is5rnCuTBsWXeLkijbTFOLf7okW6R8zxEnwphskfIrifJdW4u/RtlpbGLsdjoHfDNkSZTSNg192w3jchSJEtcawCRzDvgjLPINX1SbSSvNXcC7eNuLXpQuTFbp8CZkH/isyS68H0PAF+0iUzxoNni33HPAR51UxDHgRLObslLEw3TPFT7oKPqIeOImURs+WJ0CHlqKXgLOxL4NgyRqxbuqeMNDXURPOBNWSokquRRP+GeVOzwcLlpwJmx3WVJuY2ZRi1ezfOBhdNGGU52ZhrloBzqSucKLerdLxLtIKlc4Nd9LA6wuNTC5aAbQZzs3eFhE9Tg3mw2wqkQgHCZrTJK3iIcoasMTvXX0E30EAK2k+Wbrho8mky2eCLslSz3+2ERKucVHIZsbnqp2WWXEX60ossMnrakeP+jGocabg9SGzyaXHHDRpOIO/zRjDWCTNlzVsLjFm4bODapE33BZoke8mVy8oqXY4rLNXvFmEnXDKJYaly3SjlchkSOwiCngstFMeDXLE4CVygGX3e6FawUgzFIKANbiHHDZ7U4qL7c5SWzxYqFywGXjvVD3F3Zu8ccs5gqXzeYx7CTTWOOvnmTEZZu0ItSxrvAmZrrHZYme8dkhLbiqLkUDPlvMA1cNIiM+613Y4KJNSviiprTgmrrQM75arVzhkllUxFetqBlXVEXa8d0hMeKCxVSH73rRG37XidpxZlXRiN9UhYUtztRFVI+fhUPFE851KlSHn4TNxTueGU2yx3PVbipVeGpxIaeAJ2IynRv8YHEp3iNOjRRdGvxotGjONb7pD7M4RfyiK6ZclhYf1bdDprRW+FW9SZSUlqGtq1BVTTftRaKce1zS7bIpWyW/oK0i38tU4apupWyRsijKVhoj/o+6W45cJEoqaR+bgP8txH5a1nUZ2gq/+Q/51T5MhuG3fQAAAABJRU5ErkJggg==); 172 | } 173 | -------------------------------------------------------------------------------- /lib/styles/monocore.css: -------------------------------------------------------------------------------- 1 | /*=========================================================================== 2 | 3 | This is a base-level Monocle stylesheet. It assumes no class-prefix has been 4 | given to the Reader during initialisation - if one has, you can copy and 5 | modify this stylesheet accordingly. 6 | 7 | ---------------------------------------------------------------------------*/ 8 | 9 | /* The reader object that holds pretty much everything. 10 | * (A direct child of the element passed to reader initialisation). */ 11 | 12 | div.monelem_container { 13 | background-color: black; 14 | } 15 | 16 | 17 | /* The div that mimics a leaf of paper in a book. */ 18 | div.monelem_page { 19 | background: white; 20 | top: 0; 21 | left: 0; 22 | bottom: 3px; 23 | right: 5px; 24 | border-right: 1px solid #999; 25 | } 26 | 27 | 28 | /* The div within the page that determines page margins. */ 29 | div.monelem_sheaf { 30 | top: 1em; 31 | left: 1em; 32 | bottom: 1em; 33 | right: 1em; 34 | } 35 | 36 | 37 | /* The iframe within the page that loads the content of the book. */ 38 | div.monelem_component { 39 | } 40 | 41 | 42 | /* A panel that sits above the entire reader object, holding controls. */ 43 | div.monelem_overlay { 44 | } 45 | 46 | 47 | /* A full-size panel to display an announcement (iframe or div) */ 48 | div.monelem_billboard_container { 49 | background: #FFF; 50 | position: absolute; 51 | top: 0; 52 | left: 0; 53 | height: 100%; 54 | width: 100%; 55 | z-index: 2000; 56 | -webkit-transform: scale(0); 57 | -moz-transform: scale(0); 58 | transform: scale(0); 59 | -webkit-transform-origin: -0 -0; 60 | -moz-transform-origin: -0 -0; 61 | transform-origin: -0 -0; 62 | } 63 | 64 | .monelem_billboard_inner { 65 | height: 100%; 66 | width: 100%; 67 | border: none; 68 | overflow: auto; 69 | /*-webkit-overflow-scrolling: touch;*/ /* This is sexy, but crashy. */ 70 | } 71 | 72 | div.monelem_billboard_inner { 73 | min-width: 100%; 74 | min-height: 100%; 75 | text-align: center; 76 | vertical-align: middle; 77 | display: -webkit-box; 78 | -webkit-box-pack: center; 79 | -webkit-box-align: center; 80 | } 81 | 82 | 83 | div.monelem_billboard_close { 84 | position: absolute; 85 | top: 0; 86 | right: 0; 87 | width: 50px; 88 | height: 30px; 89 | color: white; 90 | background: #C00; 91 | cursor: pointer; 92 | border-bottom-left-radius: 4px; 93 | text-shadow: 1px 1px 1px #900; 94 | font: 9pt Helvetica Neue, Helvetica, sans-serif; 95 | } 96 | 97 | div.monelem_billboard_close:after { 98 | display: block; 99 | content: 'Close'; 100 | width: 100%; 101 | line-height: 30px; 102 | text-align: center; 103 | } 104 | 105 | div.monelem_book_fatality { 106 | font-family: Helvetica Neue, Helvetica, sans-serif; 107 | margin: 0 auto; 108 | max-width: 75%; 109 | } 110 | 111 | div.monelem_book_fatality p { 112 | line-height: 1.4; 113 | } 114 | 115 | 116 | /*=========================================================================== 117 | PANELS 118 | ---------------------------------------------------------------------------*/ 119 | 120 | 121 | .monelem_panels_imode_panel { 122 | background: rgba(255,255,255,0.7); 123 | opacity: 0; 124 | } 125 | 126 | .monelem_panels_imode_backwardsPanel { 127 | -webkit-box-shadow: 1px 1px 3px #777; 128 | -moz-box-shadow: 1px 1px 3px #777; 129 | box-shadow: 1px 1px 3px #777; 130 | } 131 | 132 | .monelem_panels_imode_forwardsPanel { 133 | -webkit-box-shadow: -1px 1px 3px #777; 134 | -moz-box-shadow: -1px 1px 3px #777; 135 | box-shadow: -1px 1px 3px #777; 136 | } 137 | 138 | .monelem_panels_imode_centralPanel { 139 | } 140 | 141 | .monelem_panels_imode_toggleIcon { 142 | position: absolute; 143 | right: 0; 144 | bottom: 0; 145 | width: 50px; 146 | height: 50px; 147 | background-repeat: no-repeat; 148 | background-position: center center; 149 | } 150 | 151 | /* If you modify this you could significantly change the way panels work. */ 152 | div.monelem_controls_panel_expanded { 153 | left: 0 !important; 154 | width: 100% !important; 155 | z-index: 1001 !important; 156 | } 157 | 158 | /*=========================================================================== 159 | Flippers 160 | ---------------------------------------------------------------------------*/ 161 | 162 | div.monelem_flippers_slider_wait { 163 | position: absolute; 164 | right: 0px; 165 | top: 0px; 166 | width: 92px; 167 | height: 112px; 168 | background-repeat: no-repeat; 169 | -webkit-background-size: 100%; 170 | -moz-background-size: 100%; 171 | background-size: 100%; 172 | background-image: -webkit-linear-gradient(22deg, transparent 66%, rgba(0,0,0,0.04) 69%, rgba(0,0,0,0.09) 78%, rgba(0,0,0,0.06) 80%, transparent 87%); 173 | background-image: -moz-linear-gradient(22deg, transparent 66%, rgba(0,0,0,0.04) 69%, rgba(0,0,0,0.09) 78%, rgba(0,0,0,0.06) 80%, transparent 87%); 174 | background-image: linear-gradient(-292deg, transparent 66%, rgba(0,0,0,0.04) 69%, rgba(0,0,0,0.09) 78%, rgba(0,0,0,0.06) 80%, transparent 87%); 175 | -webkit-transition: opacity 100ms linear; 176 | -moz-transition: opacity 100ms linear; 177 | transition: opacity 100ms linear; 178 | } 179 | 180 | @media screen and (max-width: 640px) { 181 | div.monelem_flippers_slider_wait { 182 | width: 61px; 183 | height: 75px; 184 | } 185 | } 186 | 187 | 188 | /*=========================================================================== 189 | DATA URIs 190 | 191 | These are data-uri packed images, inlined for loading speed and simplicity. 192 | Placed at the end of this file because they're visually noisy... 193 | ---------------------------------------------------------------------------*/ 194 | 195 | div.monelem_panels_imode_toggleIcon { 196 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1%2B%2FAAAABV0RVh0Q3JlYXRpb24gVGltZQAzMC82LzEwBMfmVwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAANYSURBVEiJtdZbiNVVFMfxj8cx85JkIGlqSESgOGA9WIQgGmTRUyRaYFJDnUWYGV2eyiCpkIbEKJI1UqYvUkmFDxFBgpghonajSDCM7hcxLSnt4ulh%2F2c4HufMTOH8Xs75%2F%2Ffa67v3%2Bu%2B91hphGJWZNUzCXJyKiHd6xxqNhhGDTB6NOViAyzARY3EaP%2BNL7MCBiPi9Ze4leBlTsR9jcCnuiYgDbeGZeV4F7EINe7EP3%2BJ49W4GrsZ8NPAGXouIk5k5F93YFhHPVT5H4kbcjaX1ev3kWfDMPB9P4ko8ERE7BopONWcOVmMc1uBRrG8Oc5Ptq1hdr9cPdrQMTMUWfBQRCweD9ioiPsQtmbkeu7G8P3ClsZSI98EzcxqeUsLXM1RwZs7ErRiJKXgQN2Tmzoj4qsV2Hn7BYcq369UaHIqI5yPizyGCx2MPfsRVOBoR6%2FA%2BNmXmqCbbm%2FAiMiJO9cEzcwEuwLODwMZk5oXVLYA6PouIF%2FC6cvBgI37D0mreStyJroh4r9df785XYGtEHG8Hfnjb1w08Xu2qq3regtOZuaka2whV5NZieWY%2BhkV4ICJ2N%2FusZeYMJQm8NdCuuxdPH4HENGzsXjx9REQcqRxvR2dEfNBrHxF7lHywGPXW7085cEvwZkScHAheaRz%2BwngcqyAnlEPan%2Fbh5oj4rr%2FBDlyOXUMA%2Fx%2F9oFytM5SZs3t6epbWlOtxeJjg%2BzEmMye3vF%2BCYx2YhdFnTTs3OoQT2JqZ3TiC2zETyzrwrnIwhkMTqwVsxW24GLsiYmWj0dCBo2gNy7nSRfgpIjZjM6WU1ut1lHt%2BGLOHCd6J79sN1pSkMSUzJwwD%2FBoD5I9aRHyiFIVFQ3D2j1KR%2Fh7MMDPnY1JE7GwLr3434N5BnI3GFRiFzuai0Ub34aWBDGr0pcKPM%2FPpqovpT11KoVinNAvXt1lkLTNXKFesXU1HUz3HI0plWqW0QGcoIjYoERpMy7AS17b2da06o43KzLF4RanRzwwx3%2FfOHYW7lL5ubUR83p9do9Ho%2B99fDzcZDynfdxPejog%2FBoCOxHW4AxOwKiK%2BaGc%2FILzJ6ULcXznciwM4qFSzCUob3Km0UCeU3W5v5%2B8%2FwZsWMQvzlN1Nq8C%2F4ht8qkRm72B%2B%2BoP%2FC0sEOftJmUbfAAAAAElFTkSuQmCC); 197 | } 198 | -------------------------------------------------------------------------------- /js/epubdir.js: -------------------------------------------------------------------------------- 1 | // this is a modified version of efm.js to remove the zip.js dependency and work from an already-extracted epub instead. 2 | // Original source here: 3 | // https://github.com/rschroll/efm 4 | 5 | // Original license remains intact: 6 | 7 | /* 8 | * EFM - Epub for Monocle 9 | * 10 | * A pure-javascript implementation of the book data object for Monocle. 11 | * 12 | * Copyright (c) 2013 Robert Schroll 13 | * 14 | * Permission is hereby granted, free of charge, to any person obtaining 15 | * a copy of this software and associated documentation files (the 16 | * "Software"), to deal in the Software without restriction, including 17 | * without limitation the rights to use, copy, modify, merge, publish, 18 | * distribute, sublicense, and/or sell copies of the Software, and to 19 | * permit persons to whom the Software is furnished to do so, subject to 20 | * the following conditions: 21 | * 22 | * The above copyright notice and this permission notice shall be 23 | * included in all copies or substantial portions of the Software. 24 | * 25 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 26 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 27 | * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 28 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 29 | * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 30 | * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 31 | * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 32 | */ 33 | 34 | MIMETYPES = { 35 | png: "image/png", 36 | gif: "image/gif", 37 | jpg: "image/jpeg", 38 | jpeg: "image/jpeg", 39 | js: "text/javascript", 40 | css: "text/css", 41 | svg: "image/svg+xml", 42 | }; 43 | URL_TAGS = { 44 | img: "src", 45 | link: "href", 46 | image: "xlink:href", // Image in in-line SVG. (Calibre uses these for covers.) 47 | }; 48 | 49 | // Get the directory portion of path. The path separator is '/', for 50 | // use with zip files. 51 | function getDir(path) { 52 | return path.split('/').slice(0,-1).join('/'); 53 | } 54 | 55 | // Join and normalize the two paths. The path separator is '/', for use 56 | // with zip files. 57 | function joinPaths(path1, path2) { 58 | var path = path1.split('/').concat(path2.split('/')), 59 | normpath = []; 60 | for (var i in path) { 61 | var dir = path[i]; 62 | if (dir == "..") 63 | normpath.pop(); 64 | else if (dir != "." && dir != "") 65 | normpath.push(dir); 66 | } 67 | return normpath.join('/'); 68 | } 69 | 70 | // A book data object for the Epub file 'epubfile', a HTML5 File object. 71 | // The callback will be called when this object is fully initialized, 72 | // with this object as an argument. 73 | function Epub(epubfile, callback) { 74 | var files = {}; // Maps filename to zip.Entry 75 | var spine = []; // List of filenames in spine 76 | var contents = []; // Table of contents 77 | var metadata = {}; // Maps keys to metadata 78 | var data_urls = {}; // Maps filename to data URL of file contents 79 | var num_data_urls = 0; 80 | var root = epubfile.split(".epub")[0]; 81 | console.log("Epub: starting."); 82 | 83 | setTimeout(function() { 84 | getComponent("META-INF/container.xml", findOPF); 85 | }); 86 | 87 | // Called at the end of the initialization process. At this point, 88 | // the object is ready to be passed to a Monocle.Reader. 89 | var onLoaded = (function(self) { 90 | return function () { 91 | console.log("Epub: done."); 92 | callback(self); 93 | } 94 | })(this); 95 | 96 | // Find the location of the OPF file from container.xml 97 | function findOPF(xml) { 98 | var doc = new DOMParser().parseFromString(xml, "text/xml"); 99 | var opffn = doc.getElementsByTagName("rootfile")[0].getAttribute("full-path"); 100 | //console.log("findOPF doc", doc); 101 | //console.log(opffn); 102 | getComponent(opffn, parseOPF(getDir(opffn))); 103 | }; 104 | 105 | // Parse the OPF file to get the spine, the table of contents, and 106 | // the metadata. 107 | function parseOPF(reldir) { 108 | return function (xml) { 109 | var doc = new DOMParser().parseFromString(xml, "text/xml"); 110 | var idmap = {}; 111 | var nav_href = null; 112 | 113 | // Parse manifest 114 | var manifest = doc.getElementsByTagName("manifest")[0]; 115 | var items = manifest.getElementsByTagName("item"); 116 | for (var i=0; i -1) 124 | nav_href = idmap[id]; 125 | } 126 | 127 | // Parse spine 128 | var spineel = doc.getElementsByTagName("spine")[0]; 129 | var sitems = spineel.getElementsByTagName("itemref"); 130 | for (var i=0; i 0) 226 | child["children"] = child_nav; 227 | children.push(child); 228 | } 229 | } 230 | return children; 231 | }; 232 | 233 | // Part of Monocle's book data object interface. 234 | this.getComponents = function () { 235 | //console.log("getComponents spine", spine); 236 | return spine; 237 | }; 238 | 239 | // Part of Monocle's book data object interface. 240 | this.getContents = function () { 241 | //console.log("getContents", contents); 242 | return contents; 243 | }; 244 | 245 | // Part of Monocle's book data object interface. 246 | // Note that (X|HT)ML files are parsed and URLs in and 247 | // to resouces in the Epub are replaced with data URLs. 248 | function getComponent(id, callback) { 249 | //console.log("Epub: getComponent = " + id); 250 | var reldir = getDir(id); 251 | var ext = id.split('.').slice(-1)[0]; 252 | if (["html", "htm", "xhtml", "xml"].indexOf(ext) != -1) { 253 | //console.log(ext + " in " + id); 254 | var doc = new DOMParser().parseFromString(fetch(root + "/" + id), "text/xml"); 255 | //console.log(doc); 256 | for (var tag in URL_TAGS) { 257 | var attribute = URL_TAGS[tag]; 258 | var elements = doc.getElementsByTagName(tag); 259 | for (var i=0; i -1 && book.properties.components[cmptIndex]) { 428 | var actualPlace = Monocle.Place.FromPercentageThrough( 429 | book.properties.components[cmptIndex], 430 | place.percentageThrough 431 | ); 432 | chp = actualPlace.chapterInfo() || chp; 433 | } 434 | 435 | if (chp) { 436 | bubble.innerHTML = chp.title; 437 | } 438 | setX(bubble, x - bubble.offsetWidth / 2); 439 | 440 | p.lastX = x; 441 | return place; 442 | } 443 | 444 | var endEvt = function (evt) { 445 | var place = moveEvt(evt, p.lastX); 446 | p.reader.moveTo({ 447 | percent: place.percentageThrough, 448 | componentId: place.componentId 449 | }); 450 | Monocle.Events.deafenForContact(cntr, cntrListeners); 451 | Monocle.Events.deafenForContact(document.body, bodyListeners); 452 | bubble.style.display = "none"; 453 | } 454 | 455 | var startFn = function (evt) { 456 | evt.stopPropagation(); 457 | bubble.style.display = "block"; 458 | moveEvt(evt); 459 | cntrListeners = Monocle.Events.listenForContact( 460 | cntr, 461 | { move: moveEvt } 462 | ); 463 | bodyListeners = Monocle.Events.listenForContact( 464 | document.body, 465 | { end: endEvt } 466 | ); 467 | } 468 | 469 | Monocle.Events.listenForContact(cntr, { start: startFn }); 470 | 471 | return cntr; 472 | } 473 | 474 | 475 | API.createControlElements = createControlElements; 476 | API.updateNeedles = updateNeedles; 477 | 478 | initialize(); 479 | 480 | return API; 481 | } 482 | 483 | Monocle.Controls.Scrubber.CLS = { 484 | container: 'controls_scrubber_container', 485 | track: 'controls_scrubber_track', 486 | needle: 'controls_scrubber_needle', 487 | trail: 'controls_scrubber_trail', 488 | bubble: 'controls_scrubber_bubble' 489 | } 490 | ; 491 | Monocle.Controls.Spinner = function (reader) { 492 | 493 | var API = { constructor: Monocle.Controls.Spinner } 494 | var k = API.constants = API.constructor; 495 | var p = API.properties = { 496 | reader: reader, 497 | divs: [], 498 | repeaters: {}, 499 | showForPages: [] 500 | } 501 | 502 | 503 | function createControlElements(cntr) { 504 | var anim = cntr.dom.make('div', 'controls_spinner_anim'); 505 | anim.dom.append('div', 'controls_spinner_inner'); 506 | p.divs.push(anim); 507 | return anim; 508 | } 509 | 510 | 511 | function registerSpinEvent(startEvtType, stopEvtType) { 512 | var label = startEvtType; 513 | p.reader.listen(startEvtType, function (evt) { spin(label, evt) }); 514 | p.reader.listen(stopEvtType, function (evt) { spun(label, evt) }); 515 | } 516 | 517 | 518 | // Registers spin/spun event handlers for certain time-consuming events. 519 | // 520 | function listenForUsualDelays() { 521 | registerSpinEvent('monocle:componentloading', 'monocle:componentloaded'); 522 | registerSpinEvent('monocle:componentchanging', 'monocle:componentchange'); 523 | registerSpinEvent('monocle:resizing', 'monocle:resize'); 524 | registerSpinEvent('monocle:jumping', 'monocle:jump'); 525 | registerSpinEvent('monocle:recalculating', 'monocle:recalculated'); 526 | p.reader.listen('monocle:notfound', forceSpun); 527 | p.reader.listen('monocle:componentfailed', forceSpun); 528 | } 529 | 530 | 531 | // Displays the spinner. Both arguments are optional. 532 | // 533 | function spin(label, evt) { 534 | label = label || k.GENERIC_LABEL; 535 | p.repeaters[label] = true; 536 | p.reader.showControl(API); 537 | 538 | // If the delay is on a page other than the page we've been assigned to, 539 | // don't show the animation. p.global ensures that if an event affects 540 | // all pages, the animation is always shown, even if other events in this 541 | // spin cycle are page-specific. 542 | var page = (evt && evt.m && evt.m.page) ? evt.m.page : null; 543 | if (page && p.divs.length > 1) { 544 | p.showForPages[page.m.pageIndex] = true; 545 | } else { 546 | p.global = true; 547 | p.reader.dispatchEvent('monocle:modal:on'); 548 | } 549 | for (var i = 0; i < p.divs.length; ++i) { 550 | var show = (p.global || p.showForPages[i]) ? true : false; 551 | p.divs[i].dom[show ? 'removeClass' : 'addClass']('dormant'); 552 | } 553 | } 554 | 555 | 556 | // Stops displaying the spinner. Both arguments are optional. 557 | // 558 | function spun(label, evt) { 559 | label = label || k.GENERIC_LABEL; 560 | p.repeaters[label] = false; 561 | for (var l in p.repeaters) { 562 | if (p.repeaters[l]) { return; } 563 | } 564 | forceSpun(); 565 | } 566 | 567 | 568 | function forceSpun() { 569 | if (p.global) { p.reader.dispatchEvent('monocle:modal:off'); } 570 | p.global = false; 571 | p.repeaters = {}; 572 | p.showForPages = []; 573 | for (var i = 0; i < p.divs.length; ++i) { 574 | p.divs[i].dom.addClass('dormant'); 575 | } 576 | } 577 | 578 | 579 | API.createControlElements = createControlElements; 580 | API.registerSpinEvent = registerSpinEvent; 581 | API.listenForUsualDelays = listenForUsualDelays; 582 | API.spin = spin; 583 | API.spun = spun; 584 | API.forceSpun = forceSpun; 585 | 586 | return API; 587 | } 588 | 589 | Monocle.Controls.Spinner.GENERIC_LABEL = "generic"; 590 | Monocle.Controls.Stencil = function (reader, behaviorClasses) { 591 | 592 | var API = { constructor: Monocle.Controls.Stencil } 593 | var k = API.constants = API.constructor; 594 | var p = API.properties = { 595 | reader: reader, 596 | behaviors: [], 597 | components: {}, 598 | masks: [] 599 | } 600 | 601 | 602 | // Create the stencil container and listen for draw/update events. 603 | // 604 | function createControlElements(holder) { 605 | behaviorClasses = behaviorClasses || k.DEFAULT_BEHAVIORS; 606 | for (var i = 0, ii = behaviorClasses.length; i < ii; ++i) { 607 | addBehavior(behaviorClasses[i]); 608 | } 609 | p.container = holder.dom.make('div', k.CLS.container); 610 | p.reader.listen('monocle:turning', hide); 611 | p.reader.listen('monocle:turn:cancel', show); 612 | p.reader.listen('monocle:turn', update); 613 | p.reader.listen('monocle:stylesheetchange', update); 614 | p.reader.listen('monocle:resize', update); 615 | update(); 616 | return p.container; 617 | } 618 | 619 | 620 | // Pass this method an object that responds to 'findElements(doc)' with 621 | // an array of DOM elements for that document, and to 'fitMask(elem, mask)'. 622 | // 623 | // After you have added all your behaviors this way, you would typically 624 | // call update() to make them take effect immediately. 625 | // 626 | function addBehavior(bhvrClass) { 627 | var bhvr = new bhvrClass(API); 628 | if (typeof bhvr.findElements != 'function') { 629 | console.warn('Missing "findElements" method for behavior: %o', bhvr); 630 | } 631 | if (typeof bhvr.fitMask != 'function') { 632 | console.warn('Missing "fitMask" method for behavior: %o', bhvr); 633 | } 634 | p.behaviors.push(bhvr); 635 | } 636 | 637 | 638 | // Resets any pre-calculated rectangles for the active component, 639 | // recalculates them, and forces masks to be "drawn" (moved into the new 640 | // rectangular locations). 641 | // 642 | function update() { 643 | var visPages = p.reader.visiblePages(); 644 | if (!visPages || !visPages.length) { return; } 645 | var pageDiv = visPages[0]; 646 | var cmptId = pageComponentId(pageDiv); 647 | if (!cmptId) { return; } 648 | p.components[cmptId] = null; 649 | calculateRectangles(pageDiv); 650 | draw(); 651 | } 652 | 653 | 654 | function hide() { 655 | p.container.style.display = 'none'; 656 | } 657 | 658 | 659 | function show() { 660 | p.container.style.display = 'block'; 661 | } 662 | 663 | 664 | // Removes any existing masks. 665 | function clear() { 666 | while (p.container.childNodes.length) { 667 | p.container.removeChild(p.container.lastChild); 668 | } 669 | } 670 | 671 | 672 | // Aligns the stencil container to the shape of the page, then moves the 673 | // masks to sit above any currently visible rectangles. 674 | // 675 | function draw() { 676 | var pageDiv = p.reader.visiblePages()[0]; 677 | var cmptId = pageComponentId(pageDiv); 678 | if (!p.components[cmptId]) { 679 | return; 680 | } 681 | 682 | // Position the container. 683 | alignToComponent(pageDiv); 684 | 685 | // Clear old masks. 686 | clear(); 687 | 688 | // Layout the masks. 689 | if (!p.disabled) { 690 | show(); 691 | var rects = p.components[cmptId]; 692 | if (rects && rects.length) { 693 | layoutRectangles(pageDiv, rects); 694 | } 695 | } 696 | } 697 | 698 | 699 | // Iterate over all the elements in the active component, and 700 | // create an array of rectangular points corresponding to their positions. 701 | // 702 | function calculateRectangles(pageDiv) { 703 | var cmptId = pageComponentId(pageDiv); 704 | if (!p.components[cmptId]) { 705 | p.components[cmptId] = []; 706 | } else { 707 | return; 708 | } 709 | var boxes = p.components[cmptId]; 710 | 711 | var doc = pageDiv.m.activeFrame.contentDocument; 712 | var offset = getOffset(pageDiv); 713 | 714 | for (var b = 0, bb = p.behaviors.length; b < bb; ++b) { 715 | var bhvr = p.behaviors[b]; 716 | var elems = bhvr.findElements(doc); 717 | for (var i = 0; i < elems.length; ++i) { 718 | var elem = elems[i]; 719 | // Ensure that we're not already masking this element. 720 | for (var k = 0, kk = boxes.length; k < kk; ++k) { 721 | if (boxes[k].element == elem) { 722 | elem = null; 723 | break; 724 | } 725 | } 726 | if (elem) { 727 | var elemBoxes = boxesForNode(elem, offset); 728 | for (var j = 0, jj = elemBoxes.length; j < jj; ++j) { 729 | elemBoxes[j].element = elem; 730 | elemBoxes[j].behavior = bhvr; 731 | boxes.push(elemBoxes[j]); 732 | } 733 | } 734 | } 735 | } 736 | 737 | return p.components[cmptId]; 738 | } 739 | 740 | 741 | function boxesForNode(node, offset) { 742 | var boxes = []; 743 | if (typeof node.childNodes != 'undefined' && node.childNodes.length) { 744 | for (var i = 0, ii = node.childNodes.length; i < ii; ++i) { 745 | boxes = boxes.concat(boxesForNode(node.childNodes[i], offset)); 746 | } 747 | } else { 748 | var rng = node.ownerDocument.createRange(); 749 | rng.selectNodeContents(node); 750 | var r = rng.getClientRects(); 751 | for (var i = 0, ii = r.length; i < ii; ++i) { 752 | var offl = Monocle.Browser.env.widthsIgnoreTranslate ? 0 : offset.l; 753 | boxes.push({ 754 | left: Math.ceil(r[i].left + offl), 755 | top: Math.ceil(r[i].top), 756 | width: Math.floor(r[i].width), 757 | height: Math.floor(r[i].height) 758 | }); 759 | } 760 | } 761 | return boxes; 762 | } 763 | 764 | 765 | // Update location of visible rectangles - creating as required. 766 | // 767 | function layoutRectangles(pageDiv, rects) { 768 | var offset = getOffset(pageDiv); 769 | var visRects = []; 770 | for (var i = 0; i < rects.length; ++i) { 771 | if (rectVisible(rects[i], offset.l, offset.l + offset.w)) { 772 | visRects.push(rects[i]); 773 | } 774 | } 775 | 776 | for (i = 0; i < visRects.length; ++i) { 777 | var r = visRects[i]; 778 | var cr = { 779 | left: r.left - offset.l, 780 | top: r.top, 781 | width: r.width, 782 | height: r.height 783 | }; 784 | var mask = createMask(r.element, r.behavior); 785 | mask.dom.setStyles({ 786 | display: 'block', 787 | left: cr.left+"px", 788 | top: cr.top+"px", 789 | width: cr.width+"px", 790 | height: cr.height+"px", 791 | position: 'absolute' 792 | }); 793 | mask.stencilRect = cr; 794 | } 795 | } 796 | 797 | 798 | // Find the offset position in pixels from the left of the current page. 799 | // 800 | function getOffset(pageDiv) { 801 | return { 802 | l: pageDiv.m.offset || 0, 803 | w: pageDiv.m.dimensions.properties.width 804 | }; 805 | } 806 | 807 | 808 | // Is this area presently on the screen? 809 | // 810 | function rectVisible(rect, l, r) { 811 | var mid = rect.left + (rect.width * 0.5); 812 | return mid >= l && mid < r; 813 | } 814 | 815 | 816 | // Returns the active component id for the given page, or the current 817 | // page if no argument passed in. 818 | // 819 | function pageComponentId(pageDiv) { 820 | pageDiv = pageDiv || p.reader.visiblePages()[0]; 821 | if (!pageDiv.m.activeFrame.m.component) { return; } 822 | return pageDiv.m.activeFrame.m.component.properties.id; 823 | } 824 | 825 | 826 | // Positions the stencil container over the active frame. 827 | // 828 | function alignToComponent(pageDiv) { 829 | var cmpt = pageDiv.m.activeFrame.parentNode; 830 | p.container.dom.setStyles({ 831 | left: cmpt.offsetLeft+"px", 832 | top: cmpt.offsetTop+"px" 833 | }); 834 | } 835 | 836 | 837 | function createMask(element, bhvr) { 838 | var mask = p.container.dom.append(bhvr.maskTagName || 'div', k.CLS.mask); 839 | Monocle.Events.listenForContact(mask, { 840 | start: function () { p.reader.dispatchEvent('monocle:magic:halt'); }, 841 | move: function (evt) { evt.preventDefault(); }, 842 | end: function () { p.reader.dispatchEvent('monocle:magic:init'); } 843 | }); 844 | bhvr.fitMask(element, mask); 845 | return mask; 846 | } 847 | 848 | 849 | // Make the active masks visible (by giving them a class -- override style 850 | // in monoctrl.css). 851 | // 852 | function toggleHighlights() { 853 | var cls = k.CLS.highlights; 854 | if (p.container.dom.hasClass(cls)) { 855 | p.container.dom.removeClass(cls); 856 | } else { 857 | p.container.dom.addClass(cls); 858 | } 859 | } 860 | 861 | 862 | API.createControlElements = createControlElements; 863 | API.addBehavior = addBehavior; 864 | API.draw = draw; 865 | API.update = update; 866 | API.toggleHighlights = toggleHighlights; 867 | 868 | return API; 869 | } 870 | 871 | 872 | Monocle.Controls.Stencil.CLS = { 873 | container: 'controls_stencil_container', 874 | mask: 'controls_stencil_mask', 875 | highlights: 'controls_stencil_highlighted' 876 | } 877 | 878 | 879 | 880 | Monocle.Controls.Stencil.Links = function (stencil) { 881 | var API = { constructor: Monocle.Controls.Stencil.Links } 882 | 883 | // Optionally specify the HTML tagname of the mask. 884 | API.maskTagName = 'a'; 885 | 886 | // Returns an array of all the elements in the given doc that should 887 | // be covered with a stencil mask for interactivity. 888 | // 889 | // (Hint: doc.querySelectorAll() is your friend.) 890 | // 891 | API.findElements = function (doc) { 892 | return doc.querySelectorAll('a[href]'); 893 | } 894 | 895 | 896 | // Return an element. It should usually be a child of the container element, 897 | // with a className of the given maskClass. You set up the interactivity of 898 | // the mask element here. 899 | // 900 | API.fitMask = function (link, mask) { 901 | var hrefObject = deconstructHref(link); 902 | var rdr = stencil.properties.reader; 903 | var evtData = { href: hrefObject, link: link, mask: mask } 904 | 905 | if (hrefObject.pass) { 906 | mask.onclick = function (evt) { return link.click(); } 907 | } else { 908 | link.onclick = function (evt) { 909 | evt.preventDefault(); 910 | return false; 911 | } 912 | if (hrefObject.internal) { 913 | mask.setAttribute('href', 'javascript:"Skip to chapter"'); 914 | mask.onclick = function (evt) { 915 | if (rdr.dispatchEvent('monocle:link:internal', evtData, true)) { 916 | rdr.skipToChapter(hrefObject.internal); 917 | } 918 | evt.preventDefault(); 919 | return false; 920 | } 921 | } else { 922 | mask.setAttribute('href', hrefObject.external); 923 | mask.setAttribute('target', '_blank'); 924 | mask.onclick = function (evt) { 925 | return rdr.dispatchEvent('monocle:link:external', evtData, true); 926 | } 927 | } 928 | } 929 | } 930 | 931 | 932 | // Returns an object with either: 933 | // 934 | // - an 'external' property -- an absolute URL with a protocol, 935 | // host & etc, which should be treated as an external resource (eg, 936 | // open in new window) 937 | // 938 | // OR 939 | // 940 | // - an 'internal' property -- a relative URL (with optional hash anchor), 941 | // that is treated as a link to component in the book 942 | // 943 | // A weird but useful property of tags is that while 944 | // link.getAttribute('href') will return the actual string value of the 945 | // attribute (eg, 'foo.html'), link.href will return the absolute URL (eg, 946 | // 'http://example.com/monocles/foo.html'). 947 | // 948 | function deconstructHref(elem) { 949 | var loc = document.location; 950 | var origin = loc.protocol+'//'+loc.host; 951 | var href = elem.href; 952 | var path = href.substring(origin.length); 953 | var ext = { external: href }; 954 | 955 | if (href.toLowerCase().match(/^javascript:/)) { 956 | return { pass: true }; 957 | } 958 | 959 | // Anchor tags with 'target' attributes are always external URLs. 960 | if (elem.getAttribute('target')) { 961 | return ext; 962 | } 963 | // URLs with a different protocol or domain are always external. 964 | //console.log("Domain test: %s <=> %s", origin, href); 965 | if (href.indexOf(origin) !== 0) { 966 | return ext; 967 | } 968 | 969 | // If it is in a sub-path of the current path, it's internal. 970 | var topPath = loc.pathname.replace(/[^\/]*\.[^\/]+$/,''); 971 | if (topPath[topPath.length - 1] != '/') { 972 | topPath += '/'; 973 | } 974 | //console.log("Sub-path test: %s <=> %s", topPath, path); 975 | if (path.indexOf(topPath) === 0) { 976 | return { internal: path.substring(topPath.length) } 977 | } 978 | 979 | // If it's a root-relative URL and it's in our list of component ids, 980 | // it's internal. 981 | var cmptIds = stencil.properties.reader.getBook().properties.componentIds; 982 | for (var i = 0, ii = cmptIds.length; i < ii; ++i) { 983 | //console.log("Component test: %s <=> %s", cmptIds[i], path); 984 | if (path.indexOf(cmptIds[i]) === 0) { 985 | return { internal: path } 986 | } 987 | } 988 | 989 | // Otherwise it's external. 990 | return ext; 991 | } 992 | 993 | 994 | return API; 995 | } 996 | 997 | 998 | Monocle.Controls.Stencil.DEFAULT_BEHAVIORS = [Monocle.Controls.Stencil.Links]; 999 | -------------------------------------------------------------------------------- /css/alegreya/alegreya-italic-demo.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | Alegreya Italic Specimen 19 | 20 | 21 | 26 | 27 | 28 | 29 |
30 | 32 | 39 | 40 |
41 | 42 | 43 |
44 | 45 |
46 |
47 |
AaBb
48 |
49 |
50 | 51 |
52 |
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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
73 | 74 |
75 | 76 |
77 | 78 | 79 | 80 |
81 | 82 | 83 |
84 |
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
85 |
86 | bodyAlegreya Italic 87 |
88 |
89 | bodyArial 90 |
91 |
92 | bodyVerdana 93 |
94 |
95 | bodyGeorgia 96 |
97 | 98 | 99 | 100 |
101 | 102 | 103 |
104 | 105 |
106 |

10.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.

107 | 108 |
109 |
110 |

11.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.

111 | 112 |
113 |
114 |

12.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.

115 | 116 |
117 |
118 |

13.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.

119 | 120 |
121 |
122 | 123 |
124 |
125 |
126 |

14.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.

127 | 128 |
129 |
130 |

16.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.

131 | 132 |
133 |
134 |

18.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.

135 | 136 |
137 | 138 |
139 | 140 |
141 | 142 |
143 |
144 |

20.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.

145 |
146 |
147 |

24.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.

148 |
149 | 150 |
151 | 152 |
153 | 154 |
155 |
156 |

30.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.

157 |
158 |
159 | 160 |
161 | 162 | 163 | 164 |
165 |
166 |

10.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.

167 | 168 |
169 |
170 |

11.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.

171 | 172 |
173 |
174 |

12.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.

175 | 176 |
177 |
178 |

13.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.

179 | 180 |
181 |
182 | 183 |
184 | 185 |
186 |
187 |

14.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.

188 | 189 |
190 |
191 |

16.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.

192 | 193 |
194 |
195 |

18.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.

196 | 197 |
198 |
199 | 200 |
201 | 202 |
203 |
204 |

20.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.

205 |
206 |
207 |

24.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.

208 |
209 | 210 |
211 | 212 |
213 | 214 |
215 |
216 |

30.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.

217 |
218 |
219 | 220 |
221 | 222 | 223 | 224 | 225 |
226 | 227 |
228 | 229 |
230 | 231 |
232 |

Lorem Ipsum Dolor

233 |

Etiam porta sem malesuada magna mollis euismod

234 | 235 |

By Aenean Lacinia

236 |
237 |
238 |
239 |
240 |

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.

241 | 242 | 243 |

Pellentesque ornare sem

244 | 245 |

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.

246 | 247 |

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.

248 | 249 |

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

250 | 251 |

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.

252 | 253 |

Cras mattis consectetur

254 | 255 |

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.

256 | 257 |

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.

258 |
259 | 260 |
261 | 262 |
263 |

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.

264 |
265 | 266 |

Maecenas sed diam eget risus varius.

267 | 268 |

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.

269 | 270 | 271 | 272 |

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.

273 | 274 |

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.

275 | 276 |
277 |
278 | 279 |
280 | 281 | 282 | 283 | 284 | 285 | 286 |
287 |
288 |
289 | 290 |

Language Support

291 |

The subset of Alegreya Italic in this kit supports the following languages:
292 | 293 | Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Swedish

294 |

Glyph Chart

295 |

The subset of Alegreya Italic 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.

296 |
297 | 298 |

&#13;

299 |

&#32;

300 |

&#33;

!
301 |

&#34;

"
302 |

&#35;

#
303 |

&#36;

$
304 |

&#37;

%
305 |

&#38;

&
306 |

&#39;

'
307 |

&#40;

(
308 |

&#41;

)
309 |

&#42;

*
310 |

&#43;

+
311 |

&#44;

,
312 |

&#45;

-
313 |

&#46;

.
314 |

&#47;

/
315 |

&#48;

0
316 |

&#49;

1
317 |

&#50;

2
318 |

&#51;

3
319 |

&#52;

4
320 |

&#53;

5
321 |

&#54;

6
322 |

&#55;

7
323 |

&#56;

8
324 |

&#57;

9
325 |

&#58;

:
326 |

&#59;

;
327 |

&#60;

<
328 |

&#61;

=
329 |

&#62;

>
330 |

&#63;

?
331 |

&#64;

@
332 |

&#65;

A
333 |

&#66;

B
334 |

&#67;

C
335 |

&#68;

D
336 |

&#69;

E
337 |

&#70;

F
338 |

&#71;

G
339 |

&#72;

H
340 |

&#73;

I
341 |

&#74;

J
342 |

&#75;

K
343 |

&#76;

L
344 |

&#77;

M
345 |

&#78;

N
346 |

&#79;

O
347 |

&#80;

P
348 |

&#81;

Q
349 |

&#82;

R
350 |

&#83;

S
351 |

&#84;

T
352 |

&#85;

U
353 |

&#86;

V
354 |

&#87;

W
355 |

&#88;

X
356 |

&#89;

Y
357 |

&#90;

Z
358 |

&#91;

[
359 |

&#92;

\
360 |

&#93;

]
361 |

&#94;

^
362 |

&#95;

_
363 |

&#96;

`
364 |

&#97;

a
365 |

&#98;

b
366 |

&#99;

c
367 |

&#100;

d
368 |

&#101;

e
369 |

&#102;

f
370 |

&#103;

g
371 |

&#104;

h
372 |

&#105;

i
373 |

&#106;

j
374 |

&#107;

k
375 |

&#108;

l
376 |

&#109;

m
377 |

&#110;

n
378 |

&#111;

o
379 |

&#112;

p
380 |

&#113;

q
381 |

&#114;

r
382 |

&#115;

s
383 |

&#116;

t
384 |

&#117;

u
385 |

&#118;

v
386 |

&#119;

w
387 |

&#120;

x
388 |

&#121;

y
389 |

&#122;

z
390 |

&#123;

{
391 |

&#124;

|
392 |

&#125;

}
393 |

&#126;

~
394 |

&#160;

 
395 |

&#161;

¡
396 |

&#162;

¢
397 |

&#163;

£
398 |

&#164;

¤
399 |

&#165;

¥
400 |

&#166;

¦
401 |

&#167;

§
402 |

&#168;

¨
403 |

&#169;

©
404 |

&#170;

ª
405 |

&#171;

«
406 |

&#172;

¬
407 |

&#173;

­
408 |

&#174;

®
409 |

&#175;

¯
410 |

&#176;

°
411 |

&#177;

±
412 |

&#178;

²
413 |

&#179;

³
414 |

&#180;

´
415 |

&#182;

416 |

&#183;

·
417 |

&#184;

¸
418 |

&#185;

¹
419 |

&#186;

º
420 |

&#187;

»
421 |

&#188;

¼
422 |

&#189;

½
423 |

&#190;

¾
424 |

&#191;

¿
425 |

&#192;

À
426 |

&#193;

Á
427 |

&#194;

Â
428 |

&#195;

Ã
429 |

&#196;

Ä
430 |

&#197;

Å
431 |

&#198;

Æ
432 |

&#199;

Ç
433 |

&#200;

È
434 |

&#201;

É
435 |

&#202;

Ê
436 |

&#203;

Ë
437 |

&#204;

Ì
438 |

&#205;

Í
439 |

&#206;

Î
440 |

&#207;

Ï
441 |

&#208;

Ð
442 |

&#209;

Ñ
443 |

&#210;

Ò
444 |

&#211;

Ó
445 |

&#212;

Ô
446 |

&#213;

Õ
447 |

&#214;

Ö
448 |

&#215;

×
449 |

&#216;

Ø
450 |

&#217;

Ù
451 |

&#218;

Ú
452 |

&#219;

Û
453 |

&#220;

Ü
454 |

&#221;

Ý
455 |

&#222;

Þ
456 |

&#223;

ß
457 |

&#224;

à
458 |

&#225;

á
459 |

&#226;

â
460 |

&#227;

ã
461 |

&#228;

ä
462 |

&#229;

å
463 |

&#230;

æ
464 |

&#231;

ç
465 |

&#232;

è
466 |

&#233;

é
467 |

&#234;

ê
468 |

&#235;

ë
469 |

&#236;

ì
470 |

&#237;

í
471 |

&#238;

î
472 |

&#239;

ï
473 |

&#240;

ð
474 |

&#241;

ñ
475 |

&#242;

ò
476 |

&#243;

ó
477 |

&#244;

ô
478 |

&#245;

õ
479 |

&#246;

ö
480 |

&#247;

÷
481 |

&#248;

ø
482 |

&#249;

ù
483 |

&#250;

ú
484 |

&#251;

û
485 |

&#252;

ü
486 |

&#253;

ý
487 |

&#254;

þ
488 |

&#255;

ÿ
489 |

&#338;

Œ
490 |

&#339;

œ
491 |

&#376;

Ÿ
492 |

&#710;

ˆ
493 |

&#732;

˜
494 |

&#8192;

 
495 |

&#8193;

 
496 |

&#8194;

 
497 |

&#8195;

 
498 |

&#8196;

 
499 |

&#8197;

 
500 |

&#8198;

 
501 |

&#8199;

 
502 |

&#8200;

 
503 |

&#8201;

 
504 |

&#8202;

 
505 |

&#8208;

‐
506 |

&#8209;

‑
507 |

&#8210;

‒
508 |

&#8211;

–
509 |

&#8212;

—
510 |

&#8216;

‘
511 |

&#8217;

’
512 |

&#8218;

‚
513 |

&#8220;

“
514 |

&#8221;

”
515 |

&#8222;

„
516 |

&#8226;

•
517 |

&#8230;

…
518 |

&#8239;

 
519 |

&#8249;

‹
520 |

&#8250;

›
521 |

&#8287;

 
522 |

&#8364;

€
523 |

&#8482;

™
524 |

&#9724;

◼
525 |

&#64257;

fi
526 |

&#64258;

fl
527 |
528 |
529 | 530 | 531 |
532 |
533 | 534 | 535 |
536 | 537 |
538 | 539 |
540 |
541 |
542 |

Installing Webfonts

543 | 544 |

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.

545 | 546 |

1. Upload your webfonts

547 |

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

548 | 549 |

2. Include the webfont stylesheet

550 |

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 Fontspring blog post about it. The code for it is as follows:

551 | 552 | 553 | 554 | @font-face{ 555 | font-family: 'MyWebFont'; 556 | src: url('WebFont.eot'); 557 | src: url('WebFont.eot?#iefix') format('embedded-opentype'), 558 | url('WebFont.woff') format('woff'), 559 | url('WebFont.ttf') format('truetype'), 560 | url('WebFont.svg#webfont') format('svg'); 561 | } 562 | 563 | 564 |

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:

565 | <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> 566 | 567 |

3. Modify your own stylesheet

568 |

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:

569 | p { font-family: 'WebFont', Arial, sans-serif; } 570 | 571 |

4. Test

572 |

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

573 |
574 | 575 |
576 |
577 |

Troubleshooting
Font-Face Problems

578 |

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

579 | 580 |

Fonts not showing in any browser

581 | 582 |

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.

583 | 584 |

Fonts not loading in iPhone or iPad

585 | 586 |

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.

587 | 588 |

Fonts not loading in Firefox

589 | 590 |

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.)

591 | 592 |

Fonts not loading in IE

593 | 594 |

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.

595 | 596 |

Fonts not loading in IE9

597 | 598 |

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

599 |
600 |
601 |
602 | 603 |
604 | 605 |
606 | 609 |
610 | 611 | 612 | -------------------------------------------------------------------------------- /css/alegreya/alegreya-regular-demo.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | Alegreya Regular Specimen 19 | 20 | 21 | 26 | 27 | 28 | 29 |
30 | 32 | 39 | 40 |
41 | 42 | 43 |
44 | 45 |
46 |
47 |
AaBb
48 |
49 |
50 | 51 |
52 |
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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
73 | 74 |
75 | 76 |
77 | 78 | 79 | 80 |
81 | 82 | 83 |
84 |
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
85 |
86 | bodyAlegreya Regular 87 |
88 |
89 | bodyArial 90 |
91 |
92 | bodyVerdana 93 |
94 |
95 | bodyGeorgia 96 |
97 | 98 | 99 | 100 |
101 | 102 | 103 |
104 | 105 |
106 |

10.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.

107 | 108 |
109 |
110 |

11.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.

111 | 112 |
113 |
114 |

12.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.

115 | 116 |
117 |
118 |

13.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.

119 | 120 |
121 |
122 | 123 |
124 |
125 |
126 |

14.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.

127 | 128 |
129 |
130 |

16.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.

131 | 132 |
133 |
134 |

18.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.

135 | 136 |
137 | 138 |
139 | 140 |
141 | 142 |
143 |
144 |

20.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.

145 |
146 |
147 |

24.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.

148 |
149 | 150 |
151 | 152 |
153 | 154 |
155 |
156 |

30.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.

157 |
158 |
159 | 160 |
161 | 162 | 163 | 164 |
165 |
166 |

10.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.

167 | 168 |
169 |
170 |

11.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.

171 | 172 |
173 |
174 |

12.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.

175 | 176 |
177 |
178 |

13.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.

179 | 180 |
181 |
182 | 183 |
184 | 185 |
186 |
187 |

14.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.

188 | 189 |
190 |
191 |

16.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.

192 | 193 |
194 |
195 |

18.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.

196 | 197 |
198 |
199 | 200 |
201 | 202 |
203 |
204 |

20.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.

205 |
206 |
207 |

24.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.

208 |
209 | 210 |
211 | 212 |
213 | 214 |
215 |
216 |

30.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.

217 |
218 |
219 | 220 |
221 | 222 | 223 | 224 | 225 |
226 | 227 |
228 | 229 |
230 | 231 |
232 |

Lorem Ipsum Dolor

233 |

Etiam porta sem malesuada magna mollis euismod

234 | 235 |

By Aenean Lacinia

236 |
237 |
238 |
239 |
240 |

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.

241 | 242 | 243 |

Pellentesque ornare sem

244 | 245 |

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.

246 | 247 |

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.

248 | 249 |

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

250 | 251 |

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.

252 | 253 |

Cras mattis consectetur

254 | 255 |

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.

256 | 257 |

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.

258 |
259 | 260 |
261 | 262 |
263 |

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.

264 |
265 | 266 |

Maecenas sed diam eget risus varius.

267 | 268 |

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.

269 | 270 | 271 | 272 |

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.

273 | 274 |

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.

275 | 276 |
277 |
278 | 279 |
280 | 281 | 282 | 283 | 284 | 285 | 286 |
287 |
288 |
289 | 290 |

Language Support

291 |

The subset of Alegreya Regular in this kit supports the following languages:
292 | 293 | Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Swedish

294 |

Glyph Chart

295 |

The subset of Alegreya 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.

296 |
297 | 298 |

&#13;

299 |

&#32;

300 |

&#33;

!
301 |

&#34;

"
302 |

&#35;

#
303 |

&#36;

$
304 |

&#37;

%
305 |

&#38;

&
306 |

&#39;

'
307 |

&#40;

(
308 |

&#41;

)
309 |

&#42;

*
310 |

&#43;

+
311 |

&#44;

,
312 |

&#45;

-
313 |

&#46;

.
314 |

&#47;

/
315 |

&#48;

0
316 |

&#49;

1
317 |

&#50;

2
318 |

&#51;

3
319 |

&#52;

4
320 |

&#53;

5
321 |

&#54;

6
322 |

&#55;

7
323 |

&#56;

8
324 |

&#57;

9
325 |

&#58;

:
326 |

&#59;

;
327 |

&#60;

<
328 |

&#61;

=
329 |

&#62;

>
330 |

&#63;

?
331 |

&#64;

@
332 |

&#65;

A
333 |

&#66;

B
334 |

&#67;

C
335 |

&#68;

D
336 |

&#69;

E
337 |

&#70;

F
338 |

&#71;

G
339 |

&#72;

H
340 |

&#73;

I
341 |

&#74;

J
342 |

&#75;

K
343 |

&#76;

L
344 |

&#77;

M
345 |

&#78;

N
346 |

&#79;

O
347 |

&#80;

P
348 |

&#81;

Q
349 |

&#82;

R
350 |

&#83;

S
351 |

&#84;

T
352 |

&#85;

U
353 |

&#86;

V
354 |

&#87;

W
355 |

&#88;

X
356 |

&#89;

Y
357 |

&#90;

Z
358 |

&#91;

[
359 |

&#92;

\
360 |

&#93;

]
361 |

&#94;

^
362 |

&#95;

_
363 |

&#96;

`
364 |

&#97;

a
365 |

&#98;

b
366 |

&#99;

c
367 |

&#100;

d
368 |

&#101;

e
369 |

&#102;

f
370 |

&#103;

g
371 |

&#104;

h
372 |

&#105;

i
373 |

&#106;

j
374 |

&#107;

k
375 |

&#108;

l
376 |

&#109;

m
377 |

&#110;

n
378 |

&#111;

o
379 |

&#112;

p
380 |

&#113;

q
381 |

&#114;

r
382 |

&#115;

s
383 |

&#116;

t
384 |

&#117;

u
385 |

&#118;

v
386 |

&#119;

w
387 |

&#120;

x
388 |

&#121;

y
389 |

&#122;

z
390 |

&#123;

{
391 |

&#124;

|
392 |

&#125;

}
393 |

&#126;

~
394 |

&#160;

 
395 |

&#161;

¡
396 |

&#162;

¢
397 |

&#163;

£
398 |

&#164;

¤
399 |

&#165;

¥
400 |

&#166;

¦
401 |

&#167;

§
402 |

&#168;

¨
403 |

&#169;

©
404 |

&#170;

ª
405 |

&#171;

«
406 |

&#172;

¬
407 |

&#173;

­
408 |

&#174;

®
409 |

&#175;

¯
410 |

&#176;

°
411 |

&#177;

±
412 |

&#178;

²
413 |

&#179;

³
414 |

&#180;

´
415 |

&#182;

416 |

&#183;

·
417 |

&#184;

¸
418 |

&#185;

¹
419 |

&#186;

º
420 |

&#187;

»
421 |

&#188;

¼
422 |

&#189;

½
423 |

&#190;

¾
424 |

&#191;

¿
425 |

&#192;

À
426 |

&#193;

Á
427 |

&#194;

Â
428 |

&#195;

Ã
429 |

&#196;

Ä
430 |

&#197;

Å
431 |

&#198;

Æ
432 |

&#199;

Ç
433 |

&#200;

È
434 |

&#201;

É
435 |

&#202;

Ê
436 |

&#203;

Ë
437 |

&#204;

Ì
438 |

&#205;

Í
439 |

&#206;

Î
440 |

&#207;

Ï
441 |

&#208;

Ð
442 |

&#209;

Ñ
443 |

&#210;

Ò
444 |

&#211;

Ó
445 |

&#212;

Ô
446 |

&#213;

Õ
447 |

&#214;

Ö
448 |

&#215;

×
449 |

&#216;

Ø
450 |

&#217;

Ù
451 |

&#218;

Ú
452 |

&#219;

Û
453 |

&#220;

Ü
454 |

&#221;

Ý
455 |

&#222;

Þ
456 |

&#223;

ß
457 |

&#224;

à
458 |

&#225;

á
459 |

&#226;

â
460 |

&#227;

ã
461 |

&#228;

ä
462 |

&#229;

å
463 |

&#230;

æ
464 |

&#231;

ç
465 |

&#232;

è
466 |

&#233;

é
467 |

&#234;

ê
468 |

&#235;

ë
469 |

&#236;

ì
470 |

&#237;

í
471 |

&#238;

î
472 |

&#239;

ï
473 |

&#240;

ð
474 |

&#241;

ñ
475 |

&#242;

ò
476 |

&#243;

ó
477 |

&#244;

ô
478 |

&#245;

õ
479 |

&#246;

ö
480 |

&#247;

÷
481 |

&#248;

ø
482 |

&#249;

ù
483 |

&#250;

ú
484 |

&#251;

û
485 |

&#252;

ü
486 |

&#253;

ý
487 |

&#254;

þ
488 |

&#255;

ÿ
489 |

&#338;

Œ
490 |

&#339;

œ
491 |

&#376;

Ÿ
492 |

&#710;

ˆ
493 |

&#732;

˜
494 |

&#8192;

 
495 |

&#8193;

 
496 |

&#8194;

 
497 |

&#8195;

 
498 |

&#8196;

 
499 |

&#8197;

 
500 |

&#8198;

 
501 |

&#8199;

 
502 |

&#8200;

 
503 |

&#8201;

 
504 |

&#8202;

 
505 |

&#8208;

‐
506 |

&#8209;

‑
507 |

&#8210;

‒
508 |

&#8211;

–
509 |

&#8212;

—
510 |

&#8216;

‘
511 |

&#8217;

’
512 |

&#8218;

‚
513 |

&#8220;

“
514 |

&#8221;

”
515 |

&#8222;

„
516 |

&#8226;

•
517 |

&#8230;

…
518 |

&#8239;

 
519 |

&#8249;

‹
520 |

&#8250;

›
521 |

&#8287;

 
522 |

&#8364;

€
523 |

&#8482;

™
524 |

&#9724;

◼
525 |

&#64257;

fi
526 |

&#64258;

fl
527 |
528 |
529 | 530 | 531 |
532 |
533 | 534 | 535 |
536 | 537 |
538 | 539 |
540 |
541 |
542 |

Installing Webfonts

543 | 544 |

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.

545 | 546 |

1. Upload your webfonts

547 |

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

548 | 549 |

2. Include the webfont stylesheet

550 |

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 Fontspring blog post about it. The code for it is as follows:

551 | 552 | 553 | 554 | @font-face{ 555 | font-family: 'MyWebFont'; 556 | src: url('WebFont.eot'); 557 | src: url('WebFont.eot?#iefix') format('embedded-opentype'), 558 | url('WebFont.woff') format('woff'), 559 | url('WebFont.ttf') format('truetype'), 560 | url('WebFont.svg#webfont') format('svg'); 561 | } 562 | 563 | 564 |

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:

565 | <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> 566 | 567 |

3. Modify your own stylesheet

568 |

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:

569 | p { font-family: 'WebFont', Arial, sans-serif; } 570 | 571 |

4. Test

572 |

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

573 |
574 | 575 |
576 |
577 |

Troubleshooting
Font-Face Problems

578 |

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

579 | 580 |

Fonts not showing in any browser

581 | 582 |

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.

583 | 584 |

Fonts not loading in iPhone or iPad

585 | 586 |

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.

587 | 588 |

Fonts not loading in Firefox

589 | 590 |

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.)

591 | 592 |

Fonts not loading in IE

593 | 594 |

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.

595 | 596 |

Fonts not loading in IE9

597 | 598 |

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

599 |
600 |
601 |
602 | 603 |
604 | 605 |
606 | 609 |
610 | 611 | 612 | -------------------------------------------------------------------------------- /css/alegreya/alegreya-bolditalic-demo.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | Alegreya Bold Italic Specimen 19 | 20 | 21 | 26 | 27 | 28 | 29 |
30 | 32 | 39 | 40 |
41 | 42 | 43 |
44 | 45 |
46 |
47 |
AaBb
48 |
49 |
50 | 51 |
52 |
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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
73 | 74 |
75 | 76 |
77 | 78 | 79 | 80 |
81 | 82 | 83 |
84 |
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
85 |
86 | bodyAlegreya Bold Italic 87 |
88 |
89 | bodyArial 90 |
91 |
92 | bodyVerdana 93 |
94 |
95 | bodyGeorgia 96 |
97 | 98 | 99 | 100 |
101 | 102 | 103 |
104 | 105 |
106 |

10.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.

107 | 108 |
109 |
110 |

11.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.

111 | 112 |
113 |
114 |

12.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.

115 | 116 |
117 |
118 |

13.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.

119 | 120 |
121 |
122 | 123 |
124 |
125 |
126 |

14.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.

127 | 128 |
129 |
130 |

16.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.

131 | 132 |
133 |
134 |

18.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.

135 | 136 |
137 | 138 |
139 | 140 |
141 | 142 |
143 |
144 |

20.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.

145 |
146 |
147 |

24.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.

148 |
149 | 150 |
151 | 152 |
153 | 154 |
155 |
156 |

30.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.

157 |
158 |
159 | 160 |
161 | 162 | 163 | 164 |
165 |
166 |

10.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.

167 | 168 |
169 |
170 |

11.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.

171 | 172 |
173 |
174 |

12.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.

175 | 176 |
177 |
178 |

13.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.

179 | 180 |
181 |
182 | 183 |
184 | 185 |
186 |
187 |

14.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.

188 | 189 |
190 |
191 |

16.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.

192 | 193 |
194 |
195 |

18.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.

196 | 197 |
198 |
199 | 200 |
201 | 202 |
203 |
204 |

20.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.

205 |
206 |
207 |

24.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.

208 |
209 | 210 |
211 | 212 |
213 | 214 |
215 |
216 |

30.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.

217 |
218 |
219 | 220 |
221 | 222 | 223 | 224 | 225 |
226 | 227 |
228 | 229 |
230 | 231 |
232 |

Lorem Ipsum Dolor

233 |

Etiam porta sem malesuada magna mollis euismod

234 | 235 |

By Aenean Lacinia

236 |
237 |
238 |
239 |
240 |

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.

241 | 242 | 243 |

Pellentesque ornare sem

244 | 245 |

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.

246 | 247 |

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.

248 | 249 |

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

250 | 251 |

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.

252 | 253 |

Cras mattis consectetur

254 | 255 |

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.

256 | 257 |

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.

258 |
259 | 260 |
261 | 262 |
263 |

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.

264 |
265 | 266 |

Maecenas sed diam eget risus varius.

267 | 268 |

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.

269 | 270 | 271 | 272 |

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.

273 | 274 |

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.

275 | 276 |
277 |
278 | 279 |
280 | 281 | 282 | 283 | 284 | 285 | 286 |
287 |
288 |
289 | 290 |

Language Support

291 |

The subset of Alegreya Bold Italic in this kit supports the following languages:
292 | 293 | Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Swedish

294 |

Glyph Chart

295 |

The subset of Alegreya Bold Italic 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.

296 |
297 | 298 |

&#13;

299 |

&#32;

300 |

&#33;

!
301 |

&#34;

"
302 |

&#35;

#
303 |

&#36;

$
304 |

&#37;

%
305 |

&#38;

&
306 |

&#39;

'
307 |

&#40;

(
308 |

&#41;

)
309 |

&#42;

*
310 |

&#43;

+
311 |

&#44;

,
312 |

&#45;

-
313 |

&#46;

.
314 |

&#47;

/
315 |

&#48;

0
316 |

&#49;

1
317 |

&#50;

2
318 |

&#51;

3
319 |

&#52;

4
320 |

&#53;

5
321 |

&#54;

6
322 |

&#55;

7
323 |

&#56;

8
324 |

&#57;

9
325 |

&#58;

:
326 |

&#59;

;
327 |

&#60;

<
328 |

&#61;

=
329 |

&#62;

>
330 |

&#63;

?
331 |

&#64;

@
332 |

&#65;

A
333 |

&#66;

B
334 |

&#67;

C
335 |

&#68;

D
336 |

&#69;

E
337 |

&#70;

F
338 |

&#71;

G
339 |

&#72;

H
340 |

&#73;

I
341 |

&#74;

J
342 |

&#75;

K
343 |

&#76;

L
344 |

&#77;

M
345 |

&#78;

N
346 |

&#79;

O
347 |

&#80;

P
348 |

&#81;

Q
349 |

&#82;

R
350 |

&#83;

S
351 |

&#84;

T
352 |

&#85;

U
353 |

&#86;

V
354 |

&#87;

W
355 |

&#88;

X
356 |

&#89;

Y
357 |

&#90;

Z
358 |

&#91;

[
359 |

&#92;

\
360 |

&#93;

]
361 |

&#94;

^
362 |

&#95;

_
363 |

&#96;

`
364 |

&#97;

a
365 |

&#98;

b
366 |

&#99;

c
367 |

&#100;

d
368 |

&#101;

e
369 |

&#102;

f
370 |

&#103;

g
371 |

&#104;

h
372 |

&#105;

i
373 |

&#106;

j
374 |

&#107;

k
375 |

&#108;

l
376 |

&#109;

m
377 |

&#110;

n
378 |

&#111;

o
379 |

&#112;

p
380 |

&#113;

q
381 |

&#114;

r
382 |

&#115;

s
383 |

&#116;

t
384 |

&#117;

u
385 |

&#118;

v
386 |

&#119;

w
387 |

&#120;

x
388 |

&#121;

y
389 |

&#122;

z
390 |

&#123;

{
391 |

&#124;

|
392 |

&#125;

}
393 |

&#126;

~
394 |

&#160;

 
395 |

&#161;

¡
396 |

&#162;

¢
397 |

&#163;

£
398 |

&#164;

¤
399 |

&#165;

¥
400 |

&#166;

¦
401 |

&#167;

§
402 |

&#168;

¨
403 |

&#169;

©
404 |

&#170;

ª
405 |

&#171;

«
406 |

&#172;

¬
407 |

&#173;

­
408 |

&#174;

®
409 |

&#175;

¯
410 |

&#176;

°
411 |

&#177;

±
412 |

&#178;

²
413 |

&#179;

³
414 |

&#180;

´
415 |

&#182;

416 |

&#183;

·
417 |

&#184;

¸
418 |

&#185;

¹
419 |

&#186;

º
420 |

&#187;

»
421 |

&#188;

¼
422 |

&#189;

½
423 |

&#190;

¾
424 |

&#191;

¿
425 |

&#192;

À
426 |

&#193;

Á
427 |

&#194;

Â
428 |

&#195;

Ã
429 |

&#196;

Ä
430 |

&#197;

Å
431 |

&#198;

Æ
432 |

&#199;

Ç
433 |

&#200;

È
434 |

&#201;

É
435 |

&#202;

Ê
436 |

&#203;

Ë
437 |

&#204;

Ì
438 |

&#205;

Í
439 |

&#206;

Î
440 |

&#207;

Ï
441 |

&#208;

Ð
442 |

&#209;

Ñ
443 |

&#210;

Ò
444 |

&#211;

Ó
445 |

&#212;

Ô
446 |

&#213;

Õ
447 |

&#214;

Ö
448 |

&#215;

×
449 |

&#216;

Ø
450 |

&#217;

Ù
451 |

&#218;

Ú
452 |

&#219;

Û
453 |

&#220;

Ü
454 |

&#221;

Ý
455 |

&#222;

Þ
456 |

&#223;

ß
457 |

&#224;

à
458 |

&#225;

á
459 |

&#226;

â
460 |

&#227;

ã
461 |

&#228;

ä
462 |

&#229;

å
463 |

&#230;

æ
464 |

&#231;

ç
465 |

&#232;

è
466 |

&#233;

é
467 |

&#234;

ê
468 |

&#235;

ë
469 |

&#236;

ì
470 |

&#237;

í
471 |

&#238;

î
472 |

&#239;

ï
473 |

&#240;

ð
474 |

&#241;

ñ
475 |

&#242;

ò
476 |

&#243;

ó
477 |

&#244;

ô
478 |

&#245;

õ
479 |

&#246;

ö
480 |

&#247;

÷
481 |

&#248;

ø
482 |

&#249;

ù
483 |

&#250;

ú
484 |

&#251;

û
485 |

&#252;

ü
486 |

&#253;

ý
487 |

&#254;

þ
488 |

&#255;

ÿ
489 |

&#338;

Œ
490 |

&#339;

œ
491 |

&#376;

Ÿ
492 |

&#710;

ˆ
493 |

&#732;

˜
494 |

&#8192;

 
495 |

&#8193;

 
496 |

&#8194;

 
497 |

&#8195;

 
498 |

&#8196;

 
499 |

&#8197;

 
500 |

&#8198;

 
501 |

&#8199;

 
502 |

&#8200;

 
503 |

&#8201;

 
504 |

&#8202;

 
505 |

&#8208;

‐
506 |

&#8209;

‑
507 |

&#8210;

‒
508 |

&#8211;

–
509 |

&#8212;

—
510 |

&#8216;

‘
511 |

&#8217;

’
512 |

&#8218;

‚
513 |

&#8220;

“
514 |

&#8221;

”
515 |

&#8222;

„
516 |

&#8226;

•
517 |

&#8230;

…
518 |

&#8239;

 
519 |

&#8249;

‹
520 |

&#8250;

›
521 |

&#8287;

 
522 |

&#8364;

€
523 |

&#8482;

™
524 |

&#9724;

◼
525 |

&#64257;

fi
526 |

&#64258;

fl
527 |
528 |
529 | 530 | 531 |
532 |
533 | 534 | 535 |
536 | 537 |
538 | 539 |
540 |
541 |
542 |

Installing Webfonts

543 | 544 |

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.

545 | 546 |

1. Upload your webfonts

547 |

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

548 | 549 |

2. Include the webfont stylesheet

550 |

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 Fontspring blog post about it. The code for it is as follows:

551 | 552 | 553 | 554 | @font-face{ 555 | font-family: 'MyWebFont'; 556 | src: url('WebFont.eot'); 557 | src: url('WebFont.eot?#iefix') format('embedded-opentype'), 558 | url('WebFont.woff') format('woff'), 559 | url('WebFont.ttf') format('truetype'), 560 | url('WebFont.svg#webfont') format('svg'); 561 | } 562 | 563 | 564 |

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:

565 | <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> 566 | 567 |

3. Modify your own stylesheet

568 |

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:

569 | p { font-family: 'WebFont', Arial, sans-serif; } 570 | 571 |

4. Test

572 |

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

573 |
574 | 575 |
576 |
577 |

Troubleshooting
Font-Face Problems

578 |

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

579 | 580 |

Fonts not showing in any browser

581 | 582 |

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.

583 | 584 |

Fonts not loading in iPhone or iPad

585 | 586 |

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.

587 | 588 |

Fonts not loading in Firefox

589 | 590 |

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.)

591 | 592 |

Fonts not loading in IE

593 | 594 |

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.

595 | 596 |

Fonts not loading in IE9

597 | 598 |

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

599 |
600 |
601 |
602 | 603 |
604 | 605 |
606 | 609 |
610 | 611 | 612 | --------------------------------------------------------------------------------