Web font is the font that is put on the website by website designers, without installing on the user's computer.

To do this, you use a rule called @ font-face , which creates a identifier font and points to a font file stored on the Internet.

When users browse the web, they will automatically download the font and see the unique and strange font effects and may be "unique" only your website.

In this article, TipsMake.com will work with you to learn how to use @ fonf-face, invite you to follow it.

Common font formats

1. TrueType Font (TTF)

TrueType is a standard font, developed by Apple and Microsoft in the late 1980s. TrueType is the most popular font format for both MacOS and Microsoft Windows operating systems.

2. OpenType Font (OTF)

OpenType is a cross-platform computer font format and contains extended character sets, developed based on TrueType and trademarked by Microsoft. OpenType font is commonly used today on mainframe platforms.

3. The Web Open Font Format (WOFF)

WOFF is the format used to develop Webpage, developed by Mozilla and some other organizations in 2009. WOFF is essentially an OpenType or TrueType added with some descriptive data and part of its own format. yourself, making the transmission of the network lighter. W3C encourages the use of this format.

4. The Web Open Font Format (WOFF 2.0)

WOFF2 is an upgraded version of WOFF developed by Google with an average compression capability 30% higher than WOFF 1.0.

5. SVG Font / Shape

SVG Font is a font consisting of SVG characters (image - color or colorless), different from the normal font in that the letters are all images, so it has enough visual effects , such as dust effect, color, watercolor . SVG Font is never compressed and is usually quite large in size.

6. Embedded OpenType Fonts (EOT)

EOT , developed by Microsoft, is a compact OpenType format, designed to be used as embedded fonts on websites.

How to use @ font-face

To use @ font-face , we gather many CSS properties in combination with the font format to create the desired font types.

Attribute Value Description font-family name Specify a name for the font. src URL (Required) The path to where the font is located. font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded Specifies whether text is wider or narrower. The default value is "normal". font-style normal
italic
oblique (Optional) Define font-style. The default value is "normal". font-weight normal
bold
100
200
300
400
500
600
700
800
900 (Optional) Determine the font-weight. The default value is "normal". unicode-range unicode-range Specifies the range of UNICODE characters that the font supports. The default value is "U + 0-10FFFF".

For example

Example 1: Use the font you want

 @font-face { 
 font-family: FontQuanTriMang; 
 src: url(sansation_light.woff); 
} 
div { 
 font-family: FontQuanTriMang; 
} 

Results show:

Full code:

By: TipsMake.com

My love - Westlife

An empty street 
 
An empty house 
 
A hole inside my heart 
 
I'm all alone 
 
The rooms are getting smaller  
I wonder how 
 
I wonder why 
 
I wonder where they are 
 
The days we had 
 
The songs we sang together 
 
Oh yeah 
 
And all my love 
 
I'm holding on forever 
 
Reaching for the love that seems so far  
So I say a little prayer 
 
And hope my dreams will take me there 
 
Where the skies are blue 
 
To see you once again, my love 
 
Over seas from coast to coast 
 
To find the place I love the most 
 
Where the fields are green 
 
To see you once again, my love 
 

"sansation_bold.woff" is another font file, containing bold characters for Sansation fonts in example 1.

The browser will use this format whenever the text with the font "FontQuanTriMang" is bold.

ncG1vNJzZmismaXArq3KnmWcp51kwrSxjLCcm2WWpLu1ecinZJyrow%3D%3D