home city apartment pencil pen feather3 aim bottle drop2 fire knife umbrella sun moon cloud cloud-upload cloud-download shield shield-check shield-alert shield-cross lock rotation-lock unlock key key-hole toggle-off toggle-on cog wrench hammer-wrench hammer axe factory recycle trash trash2 trash3 broom joystick dice spades hearts heart star flag flag2 flag3 mailbox-full at-sign envelope envelope-open paperclip paper-plane reply reply-all inbox inbox2 outbox box archive archive2 drawers drawers2 drawers3 eye binoculars hdd-down hdd-up floppy-disk printer file-empty file-add file-check file-lock files copy compare folder folder-search folder-plus folder-minus folder-download folder-upload folder-star folder-heart folder-user folder-shared folder-music folder-picture folder-film scissors paste clipboard-empty clipboard-pencil clipboard-text clipboard-check clipboard-down clipboard-left clipboard-alert clipboard-user register papers news reading typewriter document document2 graduation-hat license license2 medal-empty medal-first medal-second medal-third podium trophy trophy2 guitar trumpet repeat headphones headset loudspeaker equalizer theater 3d-glasses ticket presentation play film-play clapboard-play media film film2 surveillance camera-play camera2 shutter picture picture2 book book2 bookmark bookmark2 label library library2 contacts profile portrait user woman man baby baby2 walk hand-waving jump run woman2 man2 man-woman button store barcode3 bag bag2 cart tag tags receipt wallet cash-dollar calculator2 vault telephone phone-wave dial telephone2 map-marker map-marker-user map-marker-check compass2 map map2 location road-sign calendar-empty calendar-check calendar-cross calendar-31 calendar-full calendar-text calendar-user mouse delete screen signal sim smartphone tablet2 laptop laptop-phone desktop window tv radio remote-control power-switch power lamp cord outlet battery-empty bubble bubbles bubble-dots bubble-alert bubble-question bubble-text bubble-pencil bubble-picture bubble-user bubble-heart phone-bubble heart-pulse pulse first-aid lifebuoy bandage bandages thermometer brain beaker skull bone construction construction-cone pie-chart pie-chart2 graph chart-growth chart-bars chart-settings cake gift balloon rank rank2 rank3 crown lotus diamond diamond2 teapot glass bottle2 glass2 dinner2 scale2 egg2 hamburger pizza carrot ice-cream ice-cream2 candy lollipop coffee-cup cherry leaf landscape pine-tree tree cactus paw speed-fast rocket hammer2 balance briefcase luggage-weight dolly plane helicopter traffic-lights road car-battery car bus bus2 taxi ambulance ship ship2 boat bicycle bicycle2 swim archery cube puzzle glasses glasses2 select2 site-map earth network planet happy smile dream cool mustache halloween christmas easter-egg mustache2 mustache-glasses alarm bullhorn volume lan lan2 wifi stream broadcast antenna satellite satellite2 mic mic2 spotlights hourglass loading refresh undo redo undo2 redo2 sync return2 clock clock2 clock3 watch alarm2 alarm-check timer2 download2 upload2 bug code file-code file-image file-audio file-video file-charts file-stats file-spreadsheet link2 thumbs-up thumbs-down thumbs-up2 thumbs-down2 thumbs-up3 thumbs-down3 share2 magnifier zoom-in loupe loupe-zoom-in loupe-zoom-out cross menu list list2 list3 menu2 list4 menu3 exclamation question check cross2 plus minus percent chevron-up chevron-down chevron-left chevron-right chevrons-expand-vertical chevrons-expand-horizontal chevrons-contract-vertical chevrons-contract-horizontal arrow-up arrow-down arrow-left arrow-right arrow-up-right move tab arrow-wave notification warning notification-circle question-circle menu-circle checkmark-circle arrow-up-circle arrow-down-circle arrow-left-circle arrow-right-circle chevron-up-circle chevron-down-circle chevron-left-circle chevron-right-circle backward-circle first-circle previous-circle stop-circle play-circle pause-circle next-circle last-circle forward-circle eject-circle crop frame-expand frame-contract focus grid layers rulers funnel square plus-square minus-square arrow-up-square arrow-down-square arrow-left-square arrow-right-square chevron-up-square chevron-down-square chevron-left-square chevron-right-square check-square cross-square menu-square prohibited circle radio-button text-size text-align-justify pencil-line hand pointer-up pointer-right hand2 pointer-up2 pointer-right2 pointer-down2 pointer-left2 ellipsis google-plus3 facebook instagram twitter linkedin pinterest

firasans-italic-demo

AaBb
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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
bodyFira Sans Italic
bodyArial
bodyVerdana
bodyGeorgia

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 Fira Sans Italic in this kit supports the following languages:
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

Glyph Chart

The subset of Fira Sans 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

0

1

1

2

2

3

3

4

4

5

5

6

6

7

7

8

8

9

9

:

:

&#59;

;

<

<

&#61;

=

&#62;

>

&#63;

?

&#64;

@

&#65;

A

&#66;

B

&#67;

C

&#68;

D

&#69;

E

&#70;

F

&#71;

G

&#72;

H

&#73;

I

&#74;

J

&#75;

K

&#76;

L

&#77;

M

&#78;

N

&#79;

O

&#80;

P

&#81;

Q

&#82;

R

&#83;

S

&#84;

T

&#85;

U

&#86;

V

&#87;

W

&#88;

X

&#89;

Y

&#90;

Z

&#91;

[

&#92;

\

&#93;

]

&#94;

^

&#95;

_

&#96;

`

&#97;

a

&#98;

b

&#99;

c

&#100;

d

&#101;

e

&#102;

f

&#103;

g

&#104;

h

&#105;

i

&#106;

j

&#107;

k

&#108;

l

&#109;

m

&#110;

n

&#111;

o

&#112;

p

&#113;

q

&#114;

r

&#115;

s

&#116;

t

&#117;

u

&#118;

v

&#119;

w

&#120;

x

&#121;

y

&#122;

z

&#123;

{

&#124;

|

&#125;

}

&#126;

~

&#160;

 

&#161;

¡

&#162;

¢

&#163;

£

&#164;

¤

&#165;

¥

&#166;

¦

&#167;

§

&#168;

¨

&#169;

©

&#170;

ª

&#171;

«

&#172;

¬

&#173;

­

&#174;

®

&#175;

¯

&#176;

°

&#177;

±

&#178;

²

&#179;

³

&#180;

´

&#181;

µ

&#182;

&#183;

·

&#184;

¸

&#185;

¹

&#186;

º

&#187;

»

&#188;

¼

&#189;

½

&#190;

¾

&#191;

¿

&#192;

À

&#193;

Á

&#194;

Â

&#195;

Ã

&#196;

Ä

&#197;

Å

&#198;

Æ

&#199;

Ç

&#200;

È

&#201;

É

&#202;

Ê

&#203;

Ë

&#204;

Ì

&#205;

Í

&#206;

Î

&#207;

Ï

&#208;

Ð

&#209;

Ñ

&#210;

Ò

&#211;

Ó

&#212;

Ô

&#213;

Õ

&#214;

Ö

&#215;

×

&#216;

Ø

&#217;

Ù

&#218;

Ú

&#219;

Û

&#220;

Ü

&#221;

Ý

&#222;

Þ

&#223;

ß

&#224;

à

&#225;

á

&#226;

â

&#227;

ã

&#228;

ä

&#229;

å

&#230;

æ

&#231;

ç

&#232;

è

&#233;

é

&#234;

ê

&#235;

ë

&#236;

ì

&#237;

í

&#238;

î

&#239;

ï

&#240;

ð

&#241;

ñ

&#242;

ò

&#243;

ó

&#244;

ô

&#245;

õ

&#246;

ö

&#247;

÷

&#248;

ø

&#249;

ù

&#250;

ú

&#251;

û

&#252;

ü

&#253;

ý

&#254;

þ

&#255;

ÿ

&#338;

Œ

&#339;

œ

&#376;

Ÿ

&#710;

ˆ

&#732;

˜

&#8192;

 

&#8193;

&#8194;

&#8195;

&#8196;

&#8197;

&#8198;

&#8199;

&#8200;

&#8201;

&#8202;

&#8208;

&#8209;

&#8210;

&#8211;

&#8212;

&#8216;

&#8217;

&#8218;

&#8220;

&#8221;

&#8222;

&#8226;

&#8230;

&#8239;

&#8249;

&#8250;

&#8287;

&#8364;

&#8482;

&#9724;

&#64257;

&#64258;

&#64259;

&#64260;

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