- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- 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
CSS - @font-face
The @font-face rule in CSS is used to define custom fonts and make them available for use in your web pages. This rule allows web designers to embed or link to font files, which can then be used to style text elements on a web page.
The custom font can be loaded either from a remote server or a locally-installed font on the user's device.
Overview
Both url() and local() can be used simultaneously. If local copy is available and matches, it can be used, else the custom font from the remote server will be used as a fallback option.
local() should be written before url(), as browsers load the resources in the order of their declaration-list.
Both the functions, local() and url() are optional.
A rule block with one or more local() and without url() is valid.
More specific fonts should be listed prior to the less-specific font versions.
@font-face allows the user to define their own custom fonts, making it possible to go beyond the web-safe fonts and not just relying on an internet connection.
Syntax
@font-face = @font-face { <declaration-list> }
The CSS @font-face rule can be used inside any CSS conditional-group-at-rule, apart from being used at the top-level.
CSS @font-face - Font MIME Types
MIME stands for Multipurpose Internet Mail Extensions helps in indicating the nature and format of a document or file.
The following table shows the different formats and their associated MIME types:
Format | MIME Type |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Web Open Font Format | font/woff |
Web Open Font Format 2 | font/woff2 |
Same domain restriction is applied in case of web fonts, i.e., font files must be available in the same domain as the webpage that is using them.
The @font-face rule cannot be declared within a CSS selector.
CSS @font-face - Specifying Local Font Alternatives
Following example demonstrates using @font-face at-rule using local copy of "Sansation Light Font".
<html> <head> <style> @font-face { font-family: "Sansation Light Font"; src: url("font/SansationLight.woff"); } body { font-family: "Sansation Light Font", serif; } </style> </head> <body> <h2>@font-face at-rule</h2> <p>This is SansationLight Font.</p> </body> </html>
Descriptors
The table given below lists all the descriptors related to @font-face:
Descriptor / Property | Description |
---|---|
ascent-override | Sets the ascent metric for the font. |
descent-override | Sets the descent metric for the font. |
font-display | Specifies the way a font face will be displayed. |
font-family | Determines a name that will be used as font face value for font properties. |
font-stretch | Sets the face from the font. |
font-style | Sets the style of the font. |
font-weight | Sets the weight or boldness of the font. |
line-gap-override | Sets the line gap metric for the selected font. |
size-adjust | Sets the multiplier for glyph outlines and metrics associated with the selected font. |
src | Provides references to font resources, like format and technology. Required for @font-face rule to be valid. |
unicode-range | Provides the Unicode code prints range from the font. |