text font

revision:

Content

font properties properties: font-variant properties properties - @font-face rule properties - font families use system font

font properties

top

font-style: examples

This is a paragraph in normal style.

This is a paragraph in italic style.

This is a paragraph in oblique style.

code: 
                    <div>
                        <h3>font-style: examples</h3> 
                        <p class="normal">This is a paragraph in normal style.</p>
                        <p class="italic">This is a paragraph in italic style.</p>
                        <p class="oblique">This is a paragraph in oblique style.</p>
                    </div>
                    <style>
                        p.normal { font-style: normal;}
                        p.italic { font-style: italic;}
                        p.oblique { font-style: oblique;}
                    </style>

font-variant: examples

My name is Fred Flintstones.

My name is Fred Flintstones.

code: 
                    <p class="normal2">My name is Fred Flintstones.</p>
                    <p class="small">My name is Fred Flintstones.</p>
                    <style>
                        p.normal2 {font-variant: normal;}
                        p.small {font-variant: small-caps;}
                    </style>

font-weight: examples

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

code: 
                   <p class="normal3">This is a paragraph.</p>
                   <p class="light">This is a paragraph.</p>
                   <p class="thick">This is a paragraph.</p>
                   <p class="thicker">This is a paragraph.</p>
                   <style>
                       .frame{width: 45vw; height: auto;}
                       p.normal3 {font-weight: normal;}
                       p.light {font-weight: lighter;}
                       p.thick {font-weight: bold;}
                       p.thicker {font-weight: 900;}
                   </style>

font-size/line-height: examples

This is heading 4

This is heading 5

This is a paragraph.

This is another paragraph.

code: 
                    <div>
                        <h4 class="spec">This is heading 4</h4>
                        <h5 class="spec">This is heading 5</h5>
                        <p class="spec">This is a paragraph.</p>
                        <p class="spec">This is another paragraph.</p>
                    </div>
                    <style>
                        .frame{width: 45vw; height: auto;}
                        h4 {font-size: 1.7vw;}
                        h5 {font-size: 1.5vw;}
                        p.spec { font-size: 1.15vw; line-height: 0.4;}
                    </style>

font-family: examples

This is a paragraph, shown in the Times New Roman font.

This is a paragraph, shown in the Arial font.

This is a paragraph, shown in the Lucida Console font.

code: 
                    <p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
                    <p class="p2">This is a paragraph, shown in the Arial font.</p>
                    <p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
                    <style>
                        .frame{width: 45vw; height: auto;}
                        .p1 { font-family: "Times New Roman", Times, serif;}
                        .p2 { font-family: Arial, Helvetica, sans-serif;}
                        .p3 { font-family: "Lucida Console", "Courier New", 
                        monospace;}
                    </style>

font-shorthand: examples

This is a paragraph. The font size is set to 1.5vw and the font family is Arial.

This is a paragraph. The font is set to italic and bold, the font size is set to 1.2vw, the line height is set to 3vw, and the font family is Georgia.

code: 
                    <p class="a">This is a paragraph. The font size is set to 1.5vw 
                    and the font family is Arial.</p>
                    <p class="b">This is a paragraph. The font is set to italic 
                    and bold, the  font size is set to 1.2vw,
                    the line height is set to 3vw, and the font family is Georgia.</p>
                    <style>
                        .frame{width: 45vw; height: auto;}
                        p.a {font: 1.5vw Arial, sans-serif;}
                        p.b {font: italic bold 1.2vw/3vw Georgia, serif;}
                    </style>

other font properties: examples

The font used in captioned controls.

The font used in icon labels.

The font used in dropdown menus.

The font used in dialog boxes.

A smaller version of the caption font.

The font used in the status bar.

code: 
                    <p style="font:caption">The font used in captioned controls.</p>
                    <p style="font:icon">The font used in icon labels.</p>
                    <p style="font:menu">The font used in dropdown menus.</p>
                    <p style="font:message-box">The font used in dialog boxes.</p>
                    <p style="font:small-caption">A smaller version of the caption font.</p>
                    <p style="font:status-bar">The font used in the status bar.</p>

properties: font-variant properties

top

font-variant-alternates: examples

('Leitura Display Swashes' font needed.)

normal: Wishing you happy festivities!!

historical-forms: Wishing you happy festivities!!

stylistic: Wishing you happy festivities!!

styleset: Wishing you happy festivities!!

character-variant: Wishing you happy festivities!!

swash: Wishing you happy festivities!!

ornaments: Wishing you happy festivities!!

annotation: Wishing you happy festivities!!

swash annotation: Wishing you happy festivities!!

code: 
                    <div>
                        <p class="alternate1"><span>normal: </span> Wishing you happy festivities
                        !!</p>       
                        <p class="alternate2"><span>historical-forms: </span> Wishing you happy 
                        festivities!!</p>       
                        <p class="alternate3"><span>stylistic: </span> Wishing you happy 
                        festivities!!</p>   
                        <p class="alternate3a"><span>styleset: </span> Wishing you happy 
                        festivities!!</p>         
                        <p class="alternate4"><span>character-variant: </span> Wishing you happy 
                        festivities!!</p>     
                        <p class="alternate4a"><span>swash: </span> Wishing you happy 
                        festivities!!</p>
                        <p class="alternate5"><span>ornaments: </span> Wishing you happy 
                        festivities!!</p>       
                        <p class="alternate6"><span>annotation: </span> Wishing you happy 
                        festivities!!</p>       
                        <p class="alternate7"><span>swash annotation: </span> Wishing you happy 
                        festivities!!</p> 
                    </div>
                    <style>
                        .frame{width: 45vw; height: auto;}
                        @font-feature-values "Leitura Display Swashes" { @swash { fancy: 1 }}
                        .alternate1{font-variant-alternates: normal;}
                        .alternate2{font-variant-alternates: historical-forms;}
                        .alternate3{font-variant-alternates: stylistic(user-defined-ident);}
                        .alternate3a{font-variant-alternates: styleset(user-defined-ident);}
                        .alternate4{font-variant-alternates: character-variant(user-defined-ident);}
                        .alternate4a{font-variant-alternates: swash(fancy);}
                        .alternate5{font-variant-alternates: ornaments(user-defined-ident);}
                        .alternate6{font-variant-alternates: annotation(user-defined-ident);}
                        .alternate7{font-variant-alternates: swash(ident1) annotation(ident2);}
                    </style>

font-variant-caps: examples

normal: My name is Fred Flintstones.

small: My name is Fred Flintstones.

allsmall: My name is Fred Flintstones.

petite: My name is Fred Flintstones.

allpetite: My name is Fred Flintstones.

unicase: My name is Fred Flintstones.

titling: My name is Fred Flintstones.

code: 
                    <div>
                        <p>normal: <span class="normal">My name is Fred Flintstones.</span></p>
                        <p>small: <span class="small">My name is Fred Flintstones.</span></p>
                        <p>allsmall: <span class="allsmall">My name is Fred Flintstones.</span></p>
                        <p>petite: <span class="petite">My name is Fred Flintstones.</span></p>
                        <p>allpetite: <span class="allpetite">My name is Fred Flintstones.</span></p>
                        <p>unicase: <span class="unicase">My name is Fred Flintstones.</span></p>
                        <p>titling: <span class="titling">My name is Fred Flintstones.</span></p>
                    </div>
                    <style>
                        p.normal {font-variant-caps: normal;}
                        p.small {font-variant-caps: small-caps;}
                        p.allsmall {font-variant-caps: all-small-caps;}
                        p.petite {font-variant-caps: petite-caps;}
                        p.allpetite {font-variant-caps: all-petite-caps;}
                        p.unicase {font-variant-caps: unicase;}
                        p.titling {font-variant-caps: titling-caps;}
                    </style>

font-variant-east-asian: examples

normal: 麹町 - 大学

ruby: 麹町 - 大学

jis78: 麹町 - 大学

jis83: 麹町 - 大学

jis90: 麹町 - 大学

jis04: 麹町 - 大学

simplified: 麹町 - 大学

traditional: 麹町 - 大学

full-width: 麹町 - 大学

proportional-width: 麹町 - 大学

ruby full-width jis83: 麹町 - 大学

ruby full-width jis90: 麹町 - 大学

code: 
                    <div>
                        <p class="asia1"><span>normal: </span> 麹町 - 大学</p>
                        <p class="asia2"><span>ruby: </span> 麹町 - 大学</p>
                        <p class="asia3"><span>jis78: </span> 麹町 - 大学</p>
                        <p class="asia4"><span>jis83: </span> 麹町 - 大学</p>
                        <p class="asia5"><span>jis90: </span> 麹町 - 大学</p>
                        <p class="asia6"><span>jis04: </span> 麹町 - 大学</p>
                        <p class="asia7"><span>simplified: </span> 麹町 - 大学</p>
                        <p class="asia8"><span>traditional: </span> 麹町 - 大学</p>
                        <p class="asia9"><span>full-width: </span> 麹町 - 大学</p>
                        <p class="asia10"><span>proportional-width: </span> 麹町 - 大学</p>
                        <p class="asia11"><span>ruby full-width jis83: </span> 麹町 - 大学</p>
                        <p class="asia12"><span>ruby full-width jis90: </span> 麹町 - 大学</p>
                    </div>
                    <style>
                        .asia1{font-variant-east-asian: normal;}
                        .asia2{font-variant-east-asian: ruby;}
                        .asia3{font-variant-east-asian: jis78;}    
                        .asia4{font-variant-east-asian: jis83;}
                        .asia5{font-variant-east-asian: jis90;}
                        .asia6{font-variant-east-asian: jis04;}
                        .asia7{font-variant-east-asian: simplified;}
                        .asia8{font-variant-east-asian: traditional;}
                        .asia9{font-variant-east-asian: full-width; }
                        .asia10{font-variant-east-asian: proportional-width;}
                        .asia11{font-variant-east-asian: ruby full-width jis83;}
                        .asia12{font-variant-east-asian: ruby full-width jis90;}
                    </style>

font-variant-ligature: examples

normal: Act fast, therefore speed up!

none: Act fast, therefore speed up!

common-ligatures: Act fast, therefore speed up!

no-common-ligatures: Act fast, therefore speed up!

discretionary-ligatures: Act fast, therefore speed up!

no-discretionary-ligatures: Act fast, therefore speed up!

historical-ligatures: Act fast, therefore speed up!

no-historical-ligatures: Act fast, therefore speed up!

contextual: Act fast, therefore speed up!

no-contextual: Act fast, therefore speed up!

code: 
                    <div>
                        <p class="val1"><span>normal: </span> Act fast, therefore speed up!</p> 
                        <p class="val2"><span>none: </span> Act fast, therefore speed up!</p> 
                        <p class="val3"><span>common-ligatures: </span> Act fast, therefore speed up!</p> 
                        <p class="val4"><span>no-common-ligatures: </span> Act fast, therefore speed up!</p> 
                        <p class="val5"><span>discretionary-ligatures: </span> Act fast, therefore speed up!</p> 
                        <p class="val6"><span>no-discretionary-ligatures: </span> Act fast, therefore speed up!</p> 
                        <p class="val7"><span>historical-ligatures: </span> Act fast, therefore speed up!</p> 
                        <p class="val8"><span>no-historical-ligatures: </span> Act fast, therefore speed up!</p> 
                        <p class="val9"><span>contextual: </span> Act fast, therefore speed up!</p> 
                        <p class="val10"><span>no-contextual: </span> Act fast, therefore speed up!</p> 
                    </div>
                    <style>
                        .val1{font-variant-ligatures: normal;}
                        .val2{font-variant-ligatures: none;}
                        .val3{font-variant-ligatures: common-ligatures;}
                        .val4{font-variant-ligatures: no-common-ligatures;}
                        .val5{font-variant-ligatures: discretionary-ligatures;}
                        .val6{font-variant-ligatures: no-discretionary-ligatures;}
                        .val7{font-variant-ligatures: historical-ligatures;}
                        .val8{font-variant-ligatures: no-historical-ligatures;}
                        .val9{font-variant-ligatures: contextual;}
                        .val10{font-variant-ligatures: no-contextual;}
                    </style>

font-variant-numeric: examples

Ordinal: 1st, 2nd, 3rd, 6th

Normal: 1st, 2nd, 3rd, 6th

Slashes-zero: 1st, 2nd, 3rd, 6th

lining-nums: 1st, 2nd, 3rd, 6th

Oldstyle-nums: 1st, 2nd, 3rd, 6th

Tabular-nums: 1st, 2nd, 3rd, 6th

diagonal-fraction: 1st, 2nd, 3rd, 6th

stacked-fraction: 1st, 2nd, 3rd, 6th

code: 
                    <div>
                        <p><span>Ordinal: </span><span class="value1">1st, 2nd, 3rd, 6th</span></p> 
                        <p><span>Normal: </span><span class="value2">1st, 2nd, 3rd, 6th</span></p> 
                        <p><span>Slashes-zero: </span><span class="value3">1st, 2nd, 3rd, 6th</span></p> 
                        <p class="value4"><span>lining-nums: </span> 1st, 2nd, 3rd, 6th</p> 
                        <p class="value5"><span>Oldstyle-nums: </span>1st, 2nd, 3rd, 6th</p> 
                        <p class="value6"><span>Tabular-nums: </span>1st, 2nd, 3rd, 6th</p> 
                        <p class="value7"><span>diagonal-fraction: </span>1st, 2nd, 3rd, 6th</p> 
                        <p class="value7"><span>stacked-fraction: </span>1st, 2nd, 3rd, 6th</p> 
                    </div>
                    <style>
                        .frame{width: 45vw; height: auto;}
                        .value1 {font-variant-numeric: ordinal;} 
                        .value2 {font-variant-numeric: normal;} 
                        .value3 {font-variant-numeric: slashed-zero;} 
                        .value4 {font-variant-numeric: lining-nums;} 
                        .value5 {font-variant-numeric: oldstyle-nums;} 
                        .value6 {font-variant-numeric: tabular-nums;} 
                        .value7 {font-variant-numeric: diagonal-fractions;} 
                        .value7 {font-variant-numeric: stacked-fractions;} 
                    </style>

properties - @font-face rule

top

@font-face rule: examples

With CSS, websites can finally use fonts other than the pre selected "web-safe" fonts.

This is Bitstream Vera Serif Bold.

This is "Open Sans" font.

This is "Open Sans" font, with font weight and styling.

code: 
                <div id="font1">With CSS, websites can finally use fonts other than the pre 
                selected "web-safe" fonts.</div><br>
                <div class="font2">This is Bitstream Vera Serif Bold.</div><br>
                <div class="font3">This is "Open Sans" font.</div><br>
                <div class="font4">This is "Open Sans" font, with font weight and styling.</div><br>   
                <style>
                    @font-face {font-family: "Bitstream Vera Serif Bold"; src: 
                    url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");}
                    @font-face {font-family: myFirstFont; src: url(sansation_light.woff);} 
                    @font-face {font-family: 'Open Sans'; src: 
                    url('/assets/fonts/open-sans.woff2') format('woff2'), 
                    url('/assets/fonts/open-sans.woff') format('woff');}
                    #font1{font-family: myFirstFont, sans-serif;margin-left: 2vw;}
                    .font2{font-family: "Bitstream Vera Serif Bold", sans-serif; margin-left: 2vw;}
                    .font3{font-family: "Open Sans", sans-serif; margin-left: 2vw; color: brown;}
                    .font4{font-family: "Open Sans", sans-serif; margin-left: 2vw; color: brown; 
                    font-weight: 800; font-style: italic;}
                </style>

properties - font families

top

font families: examples

Font families: select a font from the list here below

The selected font is:

code: 
            <div>
                <p>Font families: select a font from the list here below</p>
                <select onchange="myFunction(this);" size="18">
                    <option>Georgia</option>
                    <option>Garamond</option>
                    <option>Times New Roman</option>
                    <option>Palatino Linotype</option>
                    <option>Book Antiqua</option>
                    <option>Times New Roman</option>
                    <option>Arial</option>
                    <option>Helvetica</option>
                    <option>Arial Black</option>
                    <option>Impact</option>
                    <option>Lucida Sans Unicode</option>
                    <option>Tahoma</option>
                    <option>Verdana</option>
                    <option>Courier New</option>
                    <option>Monaco</option>
                    <option>Lucida Console</option>
                    <option>Lucida Handwriting</option>
                    <option>Copperplate</option>
                    <option>Papyrus</option>
                    <option>Everson Mono</option>
                </select>
                <p id="demo">The selected font is: <span id="demo1" style="color:red;"></span></p>
            </div>    
            <script>
                function myFunction(selectTag) {
                var listValue = selectTag.options[selectTag.selectedIndex].text;
                document.getElementById("demo").style.fontFamily = listValue;
                document.getElementById("demo1").innerHTML = listValue; 
                }
            </script>

use system font

top
code: 
            <div>some text</div>
            <style>
                div{font-family: system-ui;}
                body { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Oxygen","Ubuntu","Helvetica Neue", Arial, sans-serif;}
            </style>

using custom font: examples

Sweet strawberry cheesecake

Sweet muffin bear claw donut chupa chups liquorice tiramisu candy canes sweet.

Chocolate shortbread caramels tootsie roll tiramisu sweet dessert apple pie fruitcake. Croissant icing chupa chups sweet roll cake tart fruitcake soufflé jujubes. Shortbread brownie tootsie roll ice cream pudding dessert marshmallow sesame snaps. Cake pie jujubes lemon drops sesame snaps soufflé cookie jujubes wafer. Caramels ice cream fruitcake pastry cheesecake chocolate tootsie roll cake marshmallow. Pie candy canes cupcake dragée bonbon fruitcake marzipan. Tootsie roll halvah bonbon cake muffin gummies. Bonbon cotton candy marzipan cake sesame snaps chupa chups donut dessert. Macaroon gummies macaroon biscuit chocolate carrot cake gummi bears.

Donut candy canes cotton candy

Liquorice gingerbread tiramisu pie bonbon soufflé. Jujubes tootsie roll muffin gingerbread powder. Carrot cake halvah chocolate bar tart sugar plum sugar plum pastry. Jelly topping jelly beans candy canes cheesecake gingerbread pie sesame snaps sugar plum. Pie cheesecake pudding jelly brownie jelly beans halvah. Ice cream powder carrot cake bear claw cake cheesecake.

Jelly-o jelly-o jelly lollipop croissant. Carrot cake tart danish macaroon dragée gingerbread. Sugar plum cotton candy biscuit fruitcake powder liquorice. Shortbread candy pie tart pudding. Sesame snaps bear claw tart tiramisu donut chocolate cake. Cheesecake tiramisu chocolate cake dessert dessert candy candy canes apple pie marshmallow. Sweet croissant pudding toffee tootsie roll gummies tart pastry pie. Candy apple pie cake wafer tootsie roll tart icing halvah.

Gingerbread gummi bears

Tiramisu sweet pastry danish topping ice cream caramels. Tiramisu candy liquorice jelly-o marzipan candy canes cupcake topping. Gummi bears jujubes carrot cake shortbread sesame snaps marshmallow danish pudding cotton candy. Cake jujubes biscuit topping marzipan sweet roll apple pie bonbon. Bear claw donut bear claw bonbon caramels halvah gummi bears. Gummi bears apple pie jelly-o donut sesame snaps icing marzipan.

Bonbon chupa chups donut dessert pudding. Sweet roll caramels dessert muffin croissant. Powder chocolate lollipop ice cream bonbon pie candy muffin cotton candy. Fruitcake topping chupa chups toffee jelly-o halvah. Candy soufflé toffee gummies fruitcake oat cake chocolate cake. Dessert cupcake cheesecake sweet roll bear claw. Marshmallow halvah bear claw biscuit dragée marzipan lemon drops jelly.

code: 
            <header>
                <div class="content-width">
                <h4>Sweet strawberry cheesecake</h4>
                <p><em>Sweet muffin bear claw</em> donut chupa chups liquorice tiramisu candy canes sweet.</p>
                </div>
            </header>
        
            <div class="content-width">
                <p>Chocolate shortbread caramels tootsie roll tiramisu sweet dessert apple pie fruitcake. <strong>
                Croissant icing chupa chups</strong> sweet roll cake tart fruitcake soufflé jujubes. Shortbread brownie 
                tootsie roll ice cream pudding dessert marshmallow sesame snaps. Cake pie jujubes lemon drops sesame 
                snaps soufflé cookie jujubes wafer. Caramels ice cream fruitcake pastry cheesecake chocolate tootsie roll
                cake marshmallow. Pie candy canes cupcake dragée bonbon fruitcake marzipan. Tootsie roll halvah bonbon cake
                muffin gummies. Bonbon cotton candy marzipan cake sesame snaps chupa chups donut dessert. Macaroon 
                gummies macaroon biscuit chocolate carrot cake gummi bears.</p>
        
                <h5>Donut candy canes cotton candy</h5>
        
                <p><strong><em>Liquorice gingerbread tiramisu</em></strong> pie bonbon soufflé. Jujubes 
                tootsie roll muffin gingerbread powder. Carrot cake halvah chocolate bar tart sugar plum sugar plum pastry. 
                Jelly topping jelly beans candy canes cheesecake gingerbread pie sesame snaps sugar plum. Pie cheesecake 
                pudding jelly brownie jelly beans halvah. Ice cream powder carrot cake bear claw cake cheesecake.</p>
        
                <p><em>Jelly-o jelly-o jelly</em> lollipop croissant. Carrot cake tart danish macaroon dragée 
                gingerbread. Sugar plum cotton candy biscuit <strong>fruitcake powder liquorice</strong>. Shortbread 
                candy pie tart pudding. Sesame snaps bear claw tart tiramisu donut chocolate cake. Cheesecake tiramisu 
                chocolate cake dessert dessert candy candy canes apple pie marshmallow. Sweet croissant pudding toffee 
                tootsie roll gummies tart pastry pie. Candy apple pie cake wafer tootsie roll tart icing halvah.</p>
        
                <h6>Gingerbread gummi bears</h6>
        
                <p><em>Tiramisu sweet pastry</em> danish topping ice cream caramels. Tiramisu candy liquorice 
                jelly-o marzipan candy canes cupcake topping. Gummi bears jujubes carrot cake shortbread sesame snaps 
                marshmallow danish pudding cotton candy. <strong>Cake jujubes biscuit</strong> topping marzipan sweet 
                roll apple pie bonbon. Bear claw donut bear claw bonbon caramels halvah gummi bears. Gummi bears apple pie
                jelly-o donut sesame snaps icing marzipan.</p>
        
                <p><strong><em>Bonbon chupa chups</em></strong> donut dessert pudding. Sweet roll caramels 
                dessert muffin croissant. Powder chocolate lollipop ice cream bonbon pie candy muffin cotton candy. 
                Fruitcake topping chupa chups toffee jelly-o halvah. Candy soufflé toffee gummies fruitcake oat cake chocolate 
                cake. Dessert cupcake cheesecake sweet roll bear claw. Marshmallow halvah bear claw biscuit dragée marzipan 
                lemon drops jelly.</p>
            </div>
        </main>
        <style>
            .content-width {max-width: 60vw; width: calc(100% - 4vw);margin: 0 auto;}
            main {margin-bottom: 4vw;}
            header {margin-bottom: 4vw; padding: 2vw 0; background-color: hsl(280, 50%, 40%); 
                border-bottom: .4vw solid hsl(300, 50%, 50%); color: hsl(300, 50%, 90%);}
            header p {color: hsl(300, 50%, 85%);}
            h4, h5, h6 {margin: 0; line-height: 1.25;}
            h5, h6 {color: hsl(280, 50%, 40%) }
        </style>