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:


- Example:
<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;
}
- If the font file is located at a different domain, use a full URL:
src: url('https://domain.net/dir/Sansation_Light.ttf');

- If a browser did not support the @font-face rule (or could not find or did not understand the particular format of the font), it would ignore the font name when it tried to follow the font-family rule and render the element using the browser-defined sans-serif font.

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

- So, where do you get all these different font formats if all you have is a TTF or EOT font?
The Font Squirrel @font-face Generator (www.fontsquirrel.com) takes any uploaded font and converts it into all the formats mentioned earlier as well as offers sample CSS embedding code.

Google Font Directory offers an embeddable API and tool that wraps the @font-face declarations, and it has collected a set of open source fonts, free to use: Google Font Directory.

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:

- Syntax:
selector { font-size: value; }
- Example:
<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:

- Syntax:
selector { font-weight: value; }
- Example:
<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.

- Syntax:
selector { font-variant: value; }
- Example:
<style>
#idp1 { font-variant: small-caps; }
</style>

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

font-style

The font-style sets the style of the font. - Syntax:
selector { font-style: value; }
- Example:
<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.

- Syntax
selector { font: font-style_val font-variant_val font-weight_val font-size_val font-family_val; }
If a particular value is omitted from the list, the browser will use the defaul inherited value, but at minimum font-size and font-family must be declared.

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

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

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Configuring Fonts

Last accessed pages

  1. Dynamic variables in JavaScript (11053)
  2. Read Excel file data in PHP - PhpExcelReader (72108)
  3. Upload Script for Gallery of Images and Audio files (7780)
  4. Ajax-PHP File Manager (6013)
  5. Horizontal-Vertical Menu with Arrow Keys Navigation (1833)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1440)
  2. Contact page - CoursesWeb (1403)
  3. Tabs effect with CSS (1398)
  4. PHP getElementById and getElementsByTagName (660)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (537)