CSS Font Properties

|  | Search W3Schools : |

HOME | HTML | CSS | XML | JAVASCRIPT | ASP | PHP | SQL | MORE... |  | References | Examples | Forum | About

ADVERTISEMENTS XML Certification Download XML editor Custom Programming |  |

Table of contents

CSS Basic
CSS HOME
CSS Introduction
CSS Syntax
CSS How To
CSS Background
CSS Text
CSS Font
CSS Border
CSS Outline
CSS Margin
CSS Padding
CSS List
CSS Table
CSS Advanced
CSS Dimension
CSS Classification
CSS Positioning
CSS Pseudo-class
CSS Pseudo-element
CSS Image Gallery
CSS Image Opacity
CSS Media Types
CSS Don't
CSS Summary
CSS Examples
CSS Examples
References
CSS2 Reference
CSS2 Print
CSS2 Aural
CSS Units
CSS Colors
CSS Colorvalues
CSS Colornames
CSS Quiz
CSS Quiz
CSS Exam

Selected Reading

Web Statistics
Web Glossary
Web Hosting
Web Quality
W3Schools Tutorials
W3Schools Forum
Helping W3Schools

# CSS Font

The CSS font properties define the font in text.

## Examples

Set the font of a text
This example demonstrates how to set a font of a text.

Set a paragraph font using the "caption" value
This example demonstrates how to set a paragraph font using the "caption" value.

Set the size of the font
This example demonstrates how to set the size of a font.

Set the size of the font using font-size-adjust
This example demonstrates how to set the size of a font using font-size-adjust.

Set the style of the font
This example demonstrates how to set the style of a font.

Set the variant of the font
This example demonstrates how to set the variant of a font.

Set the boldness of the font
This example demonstrates how to set the boldness of a font.

All the font properties in one declaration
This example demonstrates how to use the shorthand property for setting all of the font properties in one declaration.

## CSS Font Properties

The CSS font properties allow you to change the font family, boldness, size, and the style of a text.

Note: In CSS1 fonts are identified by a font name. If a browser does not support the specified font, it will use a default font.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---

font

A shorthand property for setting all of the properties for a font in one declaration

font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar

4

1

4

1

font-family | A prioritized list of font family names and/or generic family names for an element | family-name generic-family | 3 | 1 | 4 | 1

font-size

Sets the size of a font

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%

3

1

4

1

font-size-adjust | Specifies an aspect value for an element that will preserve the x-height of the first-choice font | none number | - | - | - | 2

font-stretch

Condenses or expands the current font-family

normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded

-

-

-

2

font-style | Sets the style of the font | normal italic oblique | 4 | 1 | 4 | 1
font-variant | Displays text in a small-caps font or a normal font | normal small-caps | 4 | 1 | 6 | 1

font-weight

Sets the weight of a font

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

4

1

4

1

Ektron CMS400.NET Version 7.6 delivers all of the flexibility and features you need to deploy the Web site you want, quickly and efficiently. learn more...

6 ways to take your site to the next level with Ektron:

| Create site stickiness through social networking. Keep it personal, relevant and interactive and they'll come back for more.
| Keep it open. Your site needs to be ready and able to connect to outside services. Ektron's open API gives you maximum flexibility.
| Streamline content and document management. Users need to quickly and intuitively find and add information.
| Empower your content authors. Reduce IT bottlenecks by allowing business users to create and edit Web content and forms.
| Climb to the top of search rankings. SEO tools, URL aliasing and eCommerce for your digital marketing strategy
| Add powerful Web 2.0 tools like blogs, wikis, forums, geo-mapping, rating systems and RSS feeds easily.

See why there are 20,000+ Ektron integrations worldwide. Request an INSTANT DEMO or download a FREE TRIAL today.

WEB HOSTING
Dynamic button image generation
$15 Domain Name Registration Save $20 / year!
Buy UK Domain Names Register Domain Names
Cheap Domain Names Cheap Web Hosting
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE Web Hosting

WEB BUILDING
Website Templates Flash Templates Website Builder Internet Business Opportunity
Custom Programming
FREE Trial or Demo Web Content Manager Forms,Web Alerts,RSS
Download XML editor
FREE Flash Website
FREE Web Templates

EDUCATION
US Web Design Schools
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification

HOME or Top of Page |  | Printer Friendly
W3Schools is for training only. We do not warrant the correctness of its content. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy. Copyright 1999-2009 by Refsnes Data. All Rights Reserved.