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:

Use Web Font in CSS Picture 1

Full code:

@ font-face in CSS

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 
 

 @font-face { 
  font-family: FontQuanTriMang; 
  src: url(sansation_bold.woff); 
  font-weight: bold; 
 } 

 Just a smile and the rain is gone 
 
 Can hardly believe it (yeah) 
 
 There's an angel standing next to me 
 
 Reaching for my heart 
 
 
 Just a smile and there's no way back 
 
 Can hardly believe it (yeah) 
 
 But there's an angel and she's calling me 
 
 Reaching for my heart 
 
 
 I know, that I'll be ok now 
 
 This time it's real 
 
 
 I lay my love on you 
 
 It's all I want to do 
 
 Every time I breathe I feel brand new 
 
 You open up my heart 
 
 Show me all your love, and walk right through 
 
 As I lay my love on you