What is web font face?
With the introduction of css3, we are able to use custom fonts in our web pages. Before CSS3, our web development was limited with the use of very few number of font family. With the @font-face rule, web/UI developers do no longer have to use one of the “web-safe” fonts. What helps to use custom fonts in our web applications is the ‘@font-face’ css rule.
What is @font-face rule in css?
The @font-face rule in css3 allows custom fonts to be loaded on a webpage. Once the font family is added to a style sheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.
How to add the @font-face rule in css?
Following css snippet is an example for @font-face rule usage.
@font-face {
font-family: 'open_sansregular';
src: url('opensans-regular-webfont.eot');
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff2') format('woff2'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'),
url('opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
Explanation for the css web font face
For demonstration purpose I am using open_sansregular font.
In the new @font-face rule, the first line define the name of the font (e.g. open_sansregular). Then the following lines point to the font file. Here, we can see different formats of fonts, like eot, woff2, woff, ttf and svg. These different formats are used, based on the browser support. ‘eot’ for internet explorer, ‘woff2’ for super modern browsers, ‘woff’ for modern browsers, ‘ttf’ for Safari, Android and iOS, and the last ‘svg’ for legacy iOS.
How to get the web font face?
We have seen what is @font-face rule and what are the font formats that can be used in our web applications, based on the browser support. From where we will get the different formats of fonts? Most of the time, we have seen only ‘ttf’ format of fonts. Obviously we can create different formats of fonts from the available ‘ttf’ format.
How to create web font face?
There are number of online tools with which we can generate web font face. A few of the web font face generating tools are given below.
The process of web font face generating
We will see how to generate web font face using Font Squirrel. Step by step explanation is given. Keep the font ready for web font face generation in a separate folder, so that we can easily open it.
View This Video on YOUTUBE
* Go to Font Squirrel
* Click on upload fonts.
* Select the font from the folder which have saved in our system to create the web font face. Once you click ok, you can see the uploading progress.
* From the 3 options available, ‘Optimal’ is selected by default. So, leave it as it is.
* Next, check the agreement. When you check the agreement, download button will be enabled.
* Click on the download button and save the file. Yes, we have done the web font face generation.
* Extract the zip folder and now you can see different formats of font.
* Open the style.css file. You can see, CSS starts with @font-face rule.
* Copy the fonts to your web application folder.
Either you copy the css to you main styles.css or you change the font css file name to font.css and using @import rule, import to your main style sheet. @import css rule is used to import css files to the main style sheet.
/*Adding with @ import css rule* /
@import url(fonts.css);
/*adding to main stylesheet*/
@font-face {
font-family: 'open_sansregular';
src: url('fonts/opensans-regular-webfont.eot');
src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans-regular-webfont.woff2') format('woff2'),
url('fonts/opensans-regular-webfont.woff') format('woff'),
url('fonts/opensans-regular-webfont.ttf') format('truetype'),
url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
Note that you have added the path properly.
When ever you want to use a particular font for particular element, you can use the font family in the following way.
.myElement {
font-family: 'open_sansregular';
}
/*fall backs*/
.myElement {
font-family: 'open_sansregular', arial;
}
It is always preferable to use fall backs. In any case, if the custom font is not loading or not found, browser will render with the fall back font. So, that the UI does not break.
Hope this article on web font face creation is useful for you developers… Try to create web font face, follow the steps mentioned in the tutorials, to generate web font face.
