• CSS WEB FONTS
  • css web fonts
  • Different Web Font Types
    • 1. TrueType Fonts (TTF)
    • 2. OpenType Fonts (OTF)
    • 3. The Web Open Font Format (WOFF)
    • 4. SVG Fonts / shapes
    • 5. Embedded OpenType Fonts (EOT)
  • Using Web @font-face to include web fonts
    • online web fonts fallback
    • add multiple font formats
    • how to apply other css style on web fonts
    • alternative ways to include custom fonts

CSS WEB FONTS

css web fonts

some websites uses custom fonts

but the problem is that

all the custom fonts might not be supported

in the user's computers.

So, what is the fix for this?

In CSS3, it is possible to use Web fonts which will fix this issue.

Suppose, you developed a font

or you received a custom font from someone

and you wish to use this on your website,

then the best way to use this

is to insert the font file to your web server.

Follow these steps to use the web fonts -

1. Code @font-face at the start which will include the path of the custom font and the user-defined name of the font.
2. Use the font-family property to set up the font for tags or elements.

Different Web Font Types

1. TrueType Fonts (TTF)

One of the most common & widely used type which is jointly developed by Apple(For Mac) and Microsoft(For Windows).

2. OpenType Fonts (OTF)

Developed by Microsoft

in collaboration with Adobe

but officially,

it is the registered trademark of Microsoft.

The basis of this font type is TrueType font itself

but it has more protection

and better multi-platform support

compared to TTF.

3. The Web Open Font Format (WOFF)

In 2009,

it was developed by Mozilla

in collaboration with Type Supply

and few other organizations.

It uses metadata & private-use data structures

to compress the font data

in order to load faster than TTF and OTF.

Even W3C recommends this font format

and it is compatible with all the major browsers.

There are 2 versions of WOFF.

They are WOFF & WOFF2.

Both are similar in nature

and the only difference is

in the compression technique.

WOFF2 uses a newer compression algorithm.

4. SVG Fonts / shapes

SVG is the shorthand for Scalable Vector Graphics.

This font allows the SVG to embed the glyph

to render the texts.

glyph：字形的意思。

It has limited browser support

and not all browsers support it.

When SVG1.0 was developed,

it had some typography issue

and later SVG fonts were introduced

which uses a font

for the SVG documents.

typography：排版的意思。

5. Embedded OpenType Fonts (EOT)

As the name suggests,

it is the embedded OpenType fonts

which are a compressed form of OTF & some properties of TTF were also added.

The idea was to use the embedded(compact) OpenType fonts on Web pages.

compact: 紧凑的意思

Using Web @font-face to include web fonts

the @font-face property

was introduced in CSS3

where you need to define the source(src) of the path(url)

where you insert the Font Format

and you should give the name of the font

using the font-family property.

The Syntax of Fonts Face:
@font-face {
	font-family: user-defined-font-name;
	src: url(relative-path/absolute-path);
}

@font-face {
    font-family: custom-font;
    src: url(sansation_light_v3.woff);
}
h2 {
    font-family：custom-font;
}

online web fonts fallback

suppose, due to any reason,

the browser is not able to download the custom font

on the user's computer,

then you should always have some fallback fonts

which should be widely available

on most of the computers.

@font-face {
    font-family: "user-font";
    src: url(mycustomfont.ttf);
}

body {
    font-family: "user-font", arial, Helvetica;
}

add multiple font formats

there is an easy way to include multiple font format types in the file

by just setting the required font formats in the Source url.

In the below example, the code format("type") is optional.

It means,

it is optional to code format("woff"), format("ttf") etc

after the font formats.

@font-face {
    font-family: "sansation-font";
    src: url(sansation_light_v3.woff) format("woff"),
         url(https://www.tutorialbrain.com/sansation_light_v3.ttf) format("truetype"),
         url(https://www.tutorialbrain.com/sansation_light_v3.otf) format("opentype"),
         url(https://www.tutorialbrain.com/sansation_light_v3.eot) format("embedded-opentype");
}

body {
    font-family: "sansation-font";
}

how to apply other css style on web fonts

if you wish to apply other css styles on the elements or tags

on which the custom fonts are applied,

then you need to code the required CSS properties

outside the @font-face rule.

@font-face {
    font-family: "font-bold";
    src: url(sansation_light_v3.woff);
}

body {
    font-family: "font-bold";
    font-weight: bold;
    font-size: 30px;
    color: purple
}

alternative ways to include custom fonts

the disadvantage of including the web fonts in the server

is that

it has an impact on the server speed

and it can degrade the performance of the website

because the font has to load from the server

where the website is hosted.

The alternative approach

is to use fonts

which are hosted in some other server

and you just need to import the font.

One of the widely used fonts is Google Fonts.

To use this font on your website,

you need to follow these steps -

1. Just import the link for Google font API link for the type of font family
2. Include the font-family name which you want on your website.

If you are looking for detail information about Google Fonts, then the official link is here.

Note/Warning/Danger/Info/Success

Internally, Google fonts also use the @font-face property to include custom fonts but they do this stuff at their server and this does not increase the load of your server.

To understand this, click on the link Google Fonts API Link.

/*Google Font1*/
@import url(https://fonts.googleapis.com/css?family=Stylish&display=swap);
.gfont1 {
    font-family: 'Stylish', sans-serif;
}
/*Google Font2*/
@import url(https://fonts.googleapis.com/css?family=Indie+Flower&display=swap);
.gfont2 {
    font-family: 'Indie Flower', cursive;
}
/*Google Font3*/
@import url(https://fonts.googleapis.com/css?family=B612+Mono&display=swap);
.gfont3 {
    font-family: 'B612 Mono', monospace;
}