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 –

Code @font-face at the start which will include the path of the custom font and the user-defined name of the font
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 Font type which is jointly developed by Apple(For Mac) and Microsoft(For Windows).

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.

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 the 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.

SVG Fonts/shapes
SVG is the shorthand for Scalable Vector Graphics. This font allows the SVG to embed the glyph to render the texts. 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.

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.

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);
} ;

Example of using @font-face

@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.

Example of online Web Fonts Fallback

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

Multiple url in the path

There can be multiple paths(url) where you can include the Web fonts. To include all those fonts, just code multiple url property separated by a comma.

Example of multiple url in the path(src)

@font-face {
  font-family: "trainool";
  src:local(Trainool), url(sansation_light_v3.woff), 
      url(https://www.tutorialbrain.com/sansation_light_v3.woff), url(fonts/sansation_light_v3.ttf);
}	  
h2 {
  font-family: "trainool", 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.

Example of adding multiple 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.

Example to style on Web fonts

@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 –

Just import the link for Google font API link for the type of font family
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.

Example of Google Fonts - @import url

/*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;
 }