- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS3 - Web Fonts
Web fonts are used to allows the fonts in CSS, which are not installed on local system.
Different web fonts formats
| Sr.No. | Font & Description |
|---|---|
| 1 | TrueType Fonts (TTF) TrueType is an outline font standard developed by Apple and Microsoft in the late 1980s, It became most common fonts for both windows and MAC operating systems. |
| 2 | OpenType Fonts (OTF) OpenType is a format for scalable computer fonts and developed by Microsoft |
| 3 | The Web Open Font Format (WOFF) WOFF is used for develop web page and developed in the year of 2009. Now it is using by W3C recommendation. |
| 4 | SVG Fonts/Shapes SVG allow SVG fonts within SVG documentation. We can also apply CSS to SVG with font face property. |
| 5 | Embedded OpenType Fonts (EOT) EOT is used to develop the web pages and it has embedded in webpages so no need to allow 3rd party fonts |
Following code shows the sample code of font face −
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>
It will produce the following result −
Fonts description
The following list contained all the fonts description which are placed in the @font-face rule −
| Sr.No. | Value & Description |
|---|---|
| 1 | font-family Used to defines the name of font |
| 2 | src Used to defines the URL |
| 3 | font-stretch Used to find, how font should be stretched |
| 4 | font-style Used to defines the fonts style |
| 5 | font-weight Used to defines the font weight(boldness) |