Skip to content
  • Quizes
  • QStack
  • Blog
  • pinterest
  • instagram
  • twitter
  • linkedin
  • facebook
W3 Coding Schools
  • Home
  • HTML
    • HTML Introduction
    • HTML Editors
    • Fundamentals of HTML
    • Elements of HTML
    • HTML Attributes
    • HTML Headings
    • HTML Paragraphs
    • HTML Style Attribute
    • HTML Text Formatting
    • HTML Phrase Tags
    • HTML Comments
    • HTML with CSS
    • HTML Links
    • HTML Images
    • HTML Tables
    • HTML Lists
    • HTML Blocks
    • HTML Class Attribute
    • HTML Id Attribute
    • HTML Iframes
    • HTML JavaScript
    • HTML File Paths
    • HTML Head
    • Computer Code Elements
    • HTML Entities
    • HTML Charset
    • HTML URL Encode
    • HTML and XHTML
    • HTML Layouts
    • HTML Forms
    • HTML Form Elements
    • HTML Form Input Types
    • HTML Input Attributes
    • HTML5 Introduction
    • HTML5 New Elements
    • Semantic Elements
    • HTML5 Migration
    • Style Guide
    • HTML Canvas
  • CSS
    • CSS Introduction
    • CSS Syntax and CSS Comments
    • CSS Selectors
    • How to add CSS to a Webpage
    • CSS Color Basics
    • CSS Background Properties
    • CSS Border Properties
    • CSS Margin and Padding Properties
    • CSS Height and Width properties
    • CSS Box Model
    • CSS Outline Properties
    • CSS Fonts
    • CSS Text
    • How To Add Icons
    • CSS Links
    • CSS List-Style
    • CSS Tables
    • CSS Display Property
    • CSS Position Property
    • CSS Overflow Property
    • CSS max-width Property
    • CSS Float and Clear Properties
    • CSS Alignment
    • CSS inline-block
    • CSS Combinators
    • CSS Pseudo Classes
    • CSS Pseudo Elements
    • CSS Opacity
    • CSS Navigation Bar
    • CSS Dropdowns
    • CSS Image Gallery
    • CSS Image Sprites
    • CSS Attribute Selector
    • CSS Styling Forms
    • CSS Counters
    • CSS Units
    • CSS Specificity
    • CSS Website Layout
    • CSS Rounded Corners
    • CSS Border Image Property
    • CSS Multiple Backgrounds
    • CSS Gradient
    • CSS Shadow Effects
    • CSS Text Effects
    • CSS Web Fonts
    • CSS 2D Transforms
  • Bootstrap 4
    • Bootstrap 4 – Introduction
    • Bootstrap versions
    • Bootstrap 4 Layout
    • Bootstrap 3 Vs Bootstrap 4
    • Bootstrap 4 Grid System
    • Bootstrap 4 Typography
    • Bootstrap 4 Colors
    • Bootstrap 4 Images
    • Bootstrap 4 Tables
    • Bootstrap 4 Jumbotron
    • Bootstrap 4 Figures
    • Bootstrap 4 Alerts
    • Bootstrap 4 Buttons
    • Bootstrap 4 Button Group
    • Bootstrap 4 Badges
    • Bootstrap 4 Spinners
    • Bootstrap 4 Progress Bars
    • Bootstrap 4 Pagination
    • Bootstrap 4 Breadcrumbs
    • Bootstrap 4 List Groups
    • Bootstrap 4 Cards
  • jQuery
    • jQuery Introduction
    • jQuery Download
    • jQuery Selectors
    • jQuery Event Methods
    • jQuery Hide/Show Effects
    • jQuery Fading Effects
    • jQuery Sliding Effects
    • jQuery Animation
    • jQuery Stop and Callback
    • jQuery Get and Set Methods
    • jQuery Chaining
    • jQuery Add
    • jQuery Remove
    • jQuery CSS Classes
    • jQuery Style Properties
    • jQuery Dimensions
    • jQuery Traversing
    • jQuery Ancestors
    • jQuery Descendants
    • jQuery Siblings
  • Javascript
    • JS Introduction
    • JS Where to Put
    • JavaScript Syntax
    • JavaScript Comments
    • JavaScript Variables
    • JavaScript Data Types
    • JavaScript Operators
    • JavaScript Events
    • JavaScript Strings
    • JavaScript Numbers
  • php
    • PHP Introduction
    • Install PHP
    • PHP Syntax and Comments
    • PHP Variables
    • PHP Constants
    • PHP Echo and Print
    • PHP Data Types
    • PHP Strings
    • PHP Operators
    • PHP $ and $$ Variables
  • WordPress
    • WordPress Introduction
    • WordPress History
    • WordPress.com vs WordPress.org
    • How to Install WordPress
    • WordPress Dashboard
    • How to Create a WordPress Website
    • WordPress Posts
    • WordPress Pages
    • WordPress Posts vs Pages
    • WordPress Categories
  • SEO
    • SEO Introduction
    • SEO Tactics and Methods
    • SEO Relevant Filenames
    • SEO Domain Name
    • Website Design and SEO
    • SEO Keywords
    • Meta Tags Optimization
    • Title Tag Optimization
    • Anchor Text Optimization
    • Content Optimization
  • Android
    • Android Introduction
    • Android History and Versions
    • Android Architecture
    • Android Environment Setup
    • Android Application Components
    • Hello World Application
    • Android Activities
  • iOS
    • iOS Introduction
    • iOS Environment Setup
    • iOS Architecture

You Are Here

  • Home
  • Learn CSS
  • CSS Web Fonts

Topics

  • CSS Introduction
  • CSS Syntax and CSS Comments
  • CSS Selectors
  • How to add CSS to a Webpage
  • CSS Color Basics
  • CSS Background Properties
  • CSS Border Properties
  • CSS Margin and Padding Properties
  • CSS Height and Width properties
  • CSS Box Model
  • CSS Outline Properties
  • CSS Fonts
  • CSS Text
  • How To Add Icons
  • CSS Links
  • CSS List-Style
  • CSS Tables
  • CSS Display Property
  • CSS Position Property
  • CSS Overflow Property
  • CSS max-width Property
  • CSS Float and Clear Properties
  • CSS Alignment
  • CSS inline-block
  • CSS Combinators
  • CSS Pseudo Classes
  • CSS Pseudo Elements
  • CSS Opacity
  • CSS Navigation Bar
  • CSS Dropdowns
  • CSS Image Gallery
  • CSS Image Sprites
  • CSS Attribute Selector
  • CSS Styling Forms
  • CSS Counters
  • CSS Units
  • CSS Specificity
  • CSS Website Layout
  • CSS Rounded Corners
  • CSS Border Image Property
  • CSS Multiple Backgrounds
  • CSS Gradient
  • CSS Shadow Effects
  • CSS Text Effects
  • CSS Web Fonts
  • CSS 2D Transforms

Oct Champs & Prizes

  • 1. Pooja Ladda
  • 2. Manjali Kuldharan
  • 3. Pranali Surawar
  • 4. Anjali Kulkarni
  • 5. Vishal Deshmukh

Recent Posts

  • HTML Media
  • jQuery Siblings
  • Bootstrap 4 Cards
  • jQuery Descendants
  • jQuery Ancestors

CSS Web Fonts

Web fonts are used to allow the fonts in CSS, that are not installed on the local system. After choosing the not installed font, just include the font file on the web server and it will be automatically downloaded when needed.

Syntax

@font-face {

font details

}

Following are the different types of font formates:

  • TrueType Fonts (TTF)
  • OpenType Fonts (OTF)
  • The Web Open Font Format (WOFF)
  • SVG Fonts/Shapes
  • Embedded OpenType Fonts (EOT)

TrueType Fonts (TTF):

The TrueType Font (TTF) file format was created by both Apple Computer and Microsoft Corporation. It is the most common format for fonts used in both Mac and Windows operating systems. The main advantage of TrueType font format is that the glyphs are scalable, meaning that it can be set to any scale and at any point size.

OpenType Fonts (OTF):

An Open Type Font (OTF) file is a font format developed by Adobe and Microsoft. It combines aspects of PostScript and TrueType font formats and is fully scalable, which means the font can be resized without losing quality. This font format is supported by Mac OS X and Windows 2000 and later.

Web Open Font Format (WOFF):

Web Open Font Format (WOFF) is a font format is used in web pages developed by Mozilla in concert with Type Supply, LettError, and other organizations. WOFF is basically an OpenType or TrueType with compression and additional metadata. The main aim of WOFF is to support font distribution from a server to a client over a network with bandwidth constraints.

SVG Fonts/Shapes:

SVG is a Scalable Vector Graphics. When SVG was first specified, support for web fonts was not widespread in browsers. But in order to rendering text correctly, a font description technology was added to SVG to provide this ability. It provide the means of embedding glyph information into SVG when rendered.

Embedded OpenType Fonts (EOT):

The Embedded OpenType font Format was designed by Microsoft. These fonts are a compact form of OpenType fonts to use as embedded fonts on web pages. These files use the extension .eot. It was designed with the purpose of enabling TrueType and OpenType fonts to be linked to web pages for download to render the web page with the font as required by the user.

Font Descriptors

The descriptors can be added inside the @font-face rule. The following are the different types of font descriptors.
  • font-family: It is used to define the name of font. It is required for web fonts to function.
  • src: It is used to define the URL from which we get the font. Like font-family the src is also required. Except these two fields the rest of the descriptors are optional.
  • font-stretch: This property is used to find, how font should be stretched. Normal is the value taken by default. The different font stretch values are normal, condensed, semi-condensed, ultra-condensed, extra-condensed, expanded, semi-expanded, extra-expanded and lastly ultra-expanded.
  • font-style: It is used to define the font different styles. The different styles that can be set are oblique and the default style is normal.
  • font-weight: The weight of the font can be defined using this descriptor. Default value of font-weight is “normal”. The different values for the boldness are normal, bold, and we can also give numerical values ranging from 100-900 in increments of 100.

Example:

@font-face {

font-family: myFirstFont;

src: url(sansation_light.woff);

}

* {

font-family: myFirstFont;

}
Try it
For bold and italic text

Example:

@font-face {

font-family: myFirstFont;

src: url(sansation_light.woff);

}

* {

font-family: myFirstFont;

font-style: italic;

font-weight: bold;

}
Try it

Post navigation

CSS Text Effects
CSS 2D Transforms

Ask a Question Cancel reply

Your email address will not be published. Required fields are marked *

W3 CODING SCHOOLS © Copyright 2019-20
Privacy policy   Terms of use

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok