unicode-range
Quick Summary for unicode-range (@font-face)
The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.
Code Usage for unicode-range (@font-face)
/* <unicode-range> values */ unicode-range: U+26;               /* single codepoint */ unicode-range: U+0-7F; unicode-range: U+0025-00FF;        /* codepoint range */ unicode-range: U+4??;              /* wildcard range */ unicode-range: U+0025-00FF, U+4??; /* multiple values */ 
More Details for unicode-range (@font-face)

unicode-range

The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.

Syntax

/* <unicode-range> values */ unicode-range: U+26;               /* single codepoint */ unicode-range: U+0-7F; unicode-range: U+0025-00FF;        /* codepoint range */ unicode-range: U+4??;              /* wildcard range */ unicode-range: U+0025-00FF, U+4??; /* multiple values */ 

Values

single codepoint

A single Unicode character code point, for example U+26.

codepoint range

A range of Unicode code points. So for example, U+0025-00FF means include all characters in the range U+0025 to U+00FF.

wildcard range

A range of Unicode code points containing wildcard characters, that is using the '?' character, so for example U+4?? means include all characters in the range U+400 to U+4FF.

Description

The purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. For example, a site with many localizations could provide separate font resources for English, Greek and Japanese. For users viewing the English version of a page, the font resources for Greek and Japanese fonts wouldn't need to be downloaded, saving bandwidth.

Formal definition

Related at-rule@font-face
Initial valueU+0-10FFFF
Computed valueas specified

Formal syntax

<unicode-range>#

Examples

Using a different font for a single character

In this example we create a simple HTML containing a single <div> element, including an ampersand, that we want to style with a different font. To make it obvious, we will use a sans-serif font, Helvetica, for the text, and a serif font, Times New Roman, for the ampersand.

In the CSS we are in effect defining a completely separate @font-face that only includes a single character in it, meaning that only this character will be styled with this font. We could also have done this by wrapping the ampersand in a <span> and applying a different font just to that, but that is an extra element and rule set.

HTML
<div>Me & You = Us</div> 
CSS
@font-face {   font-family: 'Ampersand';   src: local('Times New Roman');   unicode-range: U+26; }  div {   font-size: 4em;   font-family: Ampersand, Helvetica, sans-serif; } 
Result

Specifications

Specification
CSS Fonts Module Level 4 # unicode-range-desc

See also

font-display font-family font-stretch font-style font-weight font-variant font-feature-settings font-variation-settings src

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語 Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
For a long time it had seemed to me that life was about to begin - real life. But there was always some obstacle in the way, something to be gotten through first, some unfinished business, time still to be served, or a debt to be paid. Then life would begin. At last it dawned on me that these obstacles were my life.
Alfred D. Souza
Random CSS Property

overflow-inline

The overflow-inline CSS property sets what shows when content overflows the inline start and end edges of a box. This may be nothing, a scroll bar, or the overflow content.
overflow-inline css reference