Configuring Fonts

Css Course

• Particular Fonts in CSS
• font-size
• font-weight
• font-variant
• font-style
• Multiple values for font property

The typeface of text on a web page, and its particular characteristics such as size and weight are defined using font and its related properties.

font-family

The font-family property accepts a comma-separated list of font family names. If the browser can't find the first font on the list, it tries to find the next font, and so on, until it finds a font or uses default.
If the font name contains spaces, enclose the name with single or double quotation marks.
At the end of the list of font choices, you should insert a generic font family. CSS offers five generic font family values:

• serif - A typeface style typically denoted by flourishes or flared ends on each character; ('Times New Roman', Garamond)
• sans-serif - A typeface design with plain or straight features; (Arial, Verdana, Helvetica, Tahoma)
• cursive - A cursive or handwriting-like typeface ('Lucida Handwriting', 'Zapf-Chancery')
• monospace - A fixed-width font, commonly used for displaying code (Courier, 'MS Courier New', Prestige)
• fantasy - A highly stylized typeface ('Comic Sans', Whimsy, Critter, Cottonwood')

<style>
h4 { font-family: Verdana, Arial, Helvetica, sans-serif; }
p { font-family: 'Segoe Script', 'Comic Sans', fantasy; }
</style>

<h4>H4 - Example font-family</h4>
<p>Css with specified font-family for H4 and P HTML elements.</p>

Particular Fonts in CSS

If you want to use a particular font in your web page, other than 'web-safe' fonts, you can include it with @font-face rule.
The @font-face rule allows for defining a custom font family and linking that family to a resource where the font file data resides.
To use this CSS rule, you need to set two properties: font-family (the family name for the custom font) and src (the font source URI).

- Include a font file somewhere on your server, and refer to it with CSS, as you can see in the fallowing example:

@font-face {
 font-family: 'Sansation_Light';
 src: url('Sansation_Light.ttf');
}

/* Once the new font is included, you can use it */
h1 {
 font-family: 'Sansation_Light', sans-serif;
}

The problem with @font-face is that the browsers not recognise the same file font format.
The IE browser supports the Embedded OpenType Font format (.eot). Firefox, Chrome, Safari, and Opera support fonts of type OpenType Face (.otf) and TrueType Format (.ttf).

font-size

The font-size property controls the size of the text in the element and may be defined as a fixed size or a size relative to the font size of the parent element.
It can take different values and several units:

• Length units - Pixels (px), Em (em), Inches (in), Centimeters (cm), Millimeters (mm), Points (pt), Picas (pc).
  A pixel is the smallest dot that can be made on a computer screen. Em units refer to the default font size of the user’s browser.
  A point, in terms of the CSS specification, is equal to 1/72 of an inch, and a pica is equal to 12 points.
• Relative units - larger, smaller ; Values relative to the parent element’s size; typically representing a step up or down the previous scale.
• Fixed-size - xx-small, x-small, small, medium, large, x-large si xx-largexx-small, x-small, small, medium, large, x-large si xx-large
• percentage - A percentage value (%), which indicate the size of text in relation to the size of the parent element’s font-size.

<style>
#idp1 { font-size: 16px; }
#idp2 { font-size: 125%; }
</style>

<h4>Example font-size</h4>
 <p id='idp1'>Web site: https://CoursesWeb.net (font-size: 16px;)</p>
 <p id='idp2'>RO Web site: marplo.net (font-size: 125%;)</p>

font-weight

The font-weight property controls the weight, or thickness, of the characters in a font.
It can take different values:

• normal , bold - Text representing normal weight type (default) and bolded type.
• bolder , lighter - Sets a weight relative to the weight inherited from the parent element.
• 100 to 900 - A nine-step scale, in increments of 100, ranging from thin (100) to black (900).

<style>
#idp1 { font-weight: bold; }
#dv1 { font-weight: 500; }
</style>

<h4>Example font-weight</h4>
<p id='idp1'>This paragraph has font-weight:bold.</p>
<div id='dv1'>This Div has font-weight:500.</div>

font-variant

The font-variant specifies whether or not a text should be displayed in a small-caps font.

• normal - Selects the normal variant of a font face (default).
• small-caps - All lowercase letters are converted to uppercase letters. The converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

<style>
#idp1 { font-variant: small-caps; }
</style>

<h4>Example small-caps</h4>
<p id='idp1'>Free CSS course.</p>

font-style

• normal - Normal type (default).
• italic - Italicized type.
• oblique - Oblique type.

<style>
#idp1 { font-style: italic; }
</style>

<h4>Example font-style</h4>
 <p id='idp1'>Have a good life.</p>

Multiple values for font property

Using the font property, you can set the individual font properties (font-style, font-variant, font-weight, font-size, font-family) in the same definition, separated by space.

<style>
#idp1 { font: italic small-caps bold 18px Georgia, serif; }
</style>

<h4>Example font property</h4>
<p id='idp1'>Have a good life.</p>