10 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
11 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
12 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
13 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
14 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
16 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
18 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
20 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
24 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
30 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
36 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
48 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
60 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
72 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
90 | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ |
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Lorem Ipsum Dolor
Etiam porta sem malesuada magna mollis euismod
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.
Pellentesque ornare sem
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.
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.
Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.
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.
Cras mattis consectetur
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.
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.
Language Support
The subset of OpenDyslexic Bold Italic in this kit supports the following languages:
Albanian, Basque, Bosnian, Breton, Catalan, Chamorro, Chichewa_nyanja, Croatian, Czech, Danish, Dutch, English, Estonian, Faroese, Finnish, French, Frisian, Galician, German, Hungarian, Icelandic, Italian, Latvian, Lithuanian, Malagasy, Maltese, Norwegian, Polish, Portuguese, Romanian, Serbian, Slovak, Slovenian, Spanish, Turkish, Welsh, Alsatian, Aragonese, Arapaho, Aromanian, Arrernte, Asturian, Aymara, Bislama, Cebuano, Cheyenne, Cimbrian, Corsican, Fijian, French_creole, Friulian, Genoese, Gilbertese, Greenlandic, Guarani, Haitian_creole, Hawaiian, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Istro-romanian, Jerriais, Kashubian, Kurdish_kurmanji, Ladin, Lojban, Lombard, Low_saxon, Luxembourgeois, Manx, Maori, Megleno-romanian, Mohawk, Nahuatl, Norfolk_pitcairnese, Northern_sotho, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_inari, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Southern_sotho, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tahitian, Tausug, Tetum, Tok_pisin, Tongan, Tswana, Turkmen, Turkmen_latinized, Tuvaluan, Uyghur_latinized, Veps, Volapuk, Votic_latinized, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo, Vietnamese
Glyph Chart
The subset of OpenDyslexic 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.
 
!
!"
"#
#$
$%
%&
&'
'(
()
)*
*+
+,
,-
-.
./
/0
01
12
23
34
45
56
67
78
89
9:
:;
;<
<=
=>
>?
?@
@A
AB
BC
CD
DE
EF
FG
GH
HI
IJ
JK
KL
LM
MN
NO
OP
PQ
QR
RS
ST
TU
UV
VW
WX
XY
YZ
Z[
[\
\]
]^
^_
_`
`a
ab
bc
cd
de
ef
fg
gh
hi
ij
jk
kl
lm
mn
no
op
pq
qr
rs
st
tu
uv
vw
wx
xy
yz
z{
{|
|}
}~
~ 
¡
¡¢
¢£
£¤
¤¥
¥¦
¦§
§¨
¨©
©ª
ª«
«¬
¬­
®
®¯
¯°
°±
±²
²³
³´
´µ
µ¶
¶·
·¸
¸¹
¹º
º»
»¼
¼½
½¾
¾¿
¿À
ÀÁ
ÁÂ
ÂÃ
ÃÄ
ÄÅ
ÅÆ
ÆÇ
ÇÈ
ÈÉ
ÉÊ
ÊË
ËÌ
ÌÍ
ÍÎ
ÎÏ
ÏÐ
ÐÑ
ÑÒ
ÒÓ
ÓÔ
ÔÕ
ÕÖ
Ö×
×Ø
ØÙ
ÙÚ
ÚÛ
ÛÜ
ÜÝ
ÝÞ
Þß
ßà
àá
áâ
âã
ãä
äå
åæ
æç
çè
èé
éê
êë
ëì
ìí
íî
îï
ïð
ðñ
ñò
òó
óô
ôõ
õö
ö÷
÷ø
øù
ùú
úû
ûü
üý
ýþ
þÿ
ÿĀ
Āā
āĂ
Ăă
ăĄ
Ąą
ąĆ
Ćć
ćĊ
Ċċ
ċČ
Čč
čĎ
Ďď
ďĐ
Đđ
đĒ
Ēē
ēĖ
Ėė
ėĘ
Ęę
ęĚ
Ěě
ěĞ
Ğğ
ğĠ
Ġġ
ġĢ
Ģģ
ģĦ
Ħħ
ħĨ
Ĩĩ
ĩĪ
Īī
īĮ
Įį
įİ
İı
ıIJ
IJij
ijĶ
Ķķ
ķĹ
Ĺĺ
ĺĻ
Ļļ
ļĽ
Ľľ
ľĿ
Ŀŀ
ŀŁ
Łł
łŃ
Ńń
ńŅ
Ņņ
ņŇ
Ňň
ňŊ
Ŋŋ
ŋŌ
Ōō
ōŐ
Őő
őŒ
Œœ
œŔ
Ŕŕ
ŕŖ
Ŗŗ
ŗŘ
Řř
řŚ
Śś
śŞ
Şş
şŠ
Šš
šŢ
Ţţ
ţŤ
Ťť
ťŦ
Ŧŧ
ŧŨ
Ũũ
ũŪ
Ūū
ūŮ
Ůů
ůŰ
Űű
űŲ
Ųų
ųŴ
Ŵŵ
ŵŶ
Ŷŷ
ŷŸ
ŸŹ
Źź
źŻ
Żż
żŽ
Žž
žƒ
ƒƠ
Ơơ
ơƯ
Ưư
ưǍ
Ǎǎ
ǎǏ
Ǐǐ
ǐǑ
Ǒǒ
ǒǓ
Ǔǔ
ǔǕ
Ǖǖ
ǖǗ
Ǘǘ
ǘǙ
Ǚǚ
ǚǛ
Ǜǜ
ǜǞ
Ǟǟ
ǟǦ
Ǧǧ
ǧǾ
Ǿǿ
ǿȘ
Șș
șȚ
Țț
țȨ
Ȩȩ
ȩʼ
ʼˆ
ˆˇ
ˇ˘
˘˙
˙˚
˚˛
˛˜
˜˝
˝̉
̛̉
̛̣
̣̦
̦̭
̭̱
̱π
π᷄
᷄᷅
᷅᷆
᷆᷇
᷇Ḅ
Ḅḅ
ḅḌ
Ḍḍ
ḍḎ
Ḏḏ
ḏḒ
Ḓḓ
ḓḤ
Ḥḥ
ḥḮ
Ḯḯ
ḯḶ
Ḷḷ
ḷḼ
Ḽḽ
ḽḾ
Ḿḿ
ḿṄ
Ṅṅ
ṅṆ
Ṇṇ
ṇṊ
Ṋṋ
ṋṌ
Ṍṍ
ṍṐ
Ṑṑ
ṑṒ
Ṓṓ
ṓṢ
Ṣṣ
ṣṬ
Ṭṭ
ṭṮ
Ṯṯ
ṯṰ
Ṱṱ
ṱẀ
Ẁẁ
ẁẂ
Ẃẃ
ẃẄ
Ẅẅ
ẅẒ
Ẓẓ
ẓẠ
Ạạ
ạẢ
Ảả
ảẤ
Ấấ
ấẦ
Ầầ
ầẨ
Ẩẩ
ẩẪ
Ẫẫ
ẫẬ
Ậậ
ậẮ
Ắắ
ắẰ
Ằằ
ằẲ
Ẳẳ
ẳẴ
Ẵẵ
ẵẶ
Ặặ
ặẸ
Ẹẹ
ẹẺ
Ẻẻ
ẻẼ
Ẽẽ
ẽẾ
Ếế
ếỀ
Ềề
ềỂ
Ểể
ểỄ
Ễễ
ễỆ
Ệệ
ệỈ
Ỉỉ
ỉỊ
Ịị
ịỌ
Ọọ
ọỎ
Ỏỏ
ỏỐ
Ốố
ốỒ
Ồồ
ồỔ
Ổổ
ổỖ
Ỗỗ
ỗỘ
Ộộ
ộỚ
Ớớ
ớỜ
Ờờ
ờỞ
Ởở
ởỠ
Ỡỡ
ỡỢ
Ợợ
ợỤ
Ụụ
ụỦ
Ủủ
ủỨ
Ứứ
ứỪ
Ừừ
ừỬ
Ửử
ửỮ
Ữữ
ữỰ
Ựự
ựỲ
Ỳỳ
ỳỴ
Ỵỵ
ỵỶ
Ỷỷ
ỷỸ
Ỹỹ
ỹ–
–—
—‘
‘’
’‚
‚“
“”
”„
„†
†‡
‡•
•…
…‰
‰‹
‹›
›⁄
⁄€
€™
™Ω
Ω∂
∂∆
∆∏
∏∑
∑−
−∙
∙√
√∞
∞∫
∫≈
≈≠
≠≤
≤≥
≥◊
◊◼
◼fi
fifl
flInstalling Webfonts
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.
1. Upload your webfonts
You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
2. Include the webfont stylesheet
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:
@font-face{
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}
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:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
3. Modify your own stylesheet
To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:
p { font-family: 'WebFont', Arial, sans-serif; }
4. Test
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.