Home / Articles / Web / Tools / How to add custom fonts to a website using @font-face in CSS

How to add custom fonts to a website using @font-face in CSS

How to add custom fonts to a website using @font-face in CSS
How to add custom fonts to a website using @font-face in CSS
Authors: Sergey Fedus
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.

The following article shows a way to embed custom fonts on a website using @font-face rules in CSS.

Every website has its own unique design which in most cases uses common system fonts. But, what if a website design can't be completed without using special and unique font? In that case you will need to add a custom font to the website, and there are several ways to do it. In the recent past, developers used JavaScript, Flash, regular images for adding custom fonts. But, these ways had many disadvantages.

The best way to add a custom font to a website is to use exclusively CSS. A @font-face rule copes well with this task.

In @font-face rule, the first thing you have to define is a name for a font, and then point to a file of that font. The @font-face rule is supported by major browsers, such as Internet Explorer, Firefox, Opera, Chrome, and Safari.

Use of @font-face rule has also some difficulties on its way: different browsers and their versions can only work with particular font formats such as: TTF, WOFF, SVG, EOT. And to make it work in most browsers you will need to convert font into these font formats and then point to these font files in @font-face rule for that font.

The simplest way to do all operations mentioned above is to use online generator which performs all this work. One of the following online generators can be used for this purpose: Font Squirrel, Everything Fonts, Font Face Generator. At the moment of writing this article all of them were free to use. By using one of them, you can generate and then download the complete archive with all needed font formats, CSS styles and HTML sample. Then, all you have to do is to extract and copy fonts and CSS styles from the archive to your website, after this you can use a sample code from HTML file in that archive in order to apply font to your website.

Let's generate fonts and needed styles using Font Squirrel online generator:

  1. Go to this page: www.fontsquirrel.com/tools/webfont-generator.
  2. Choose a font file (for example leaguegothic-regular-webfont.ttf in TTF format) by clicking the button "Add Fonts" (marked as red oval in the screenshot below).
  3. Check a checkbox to sign an agreement (marked as red circle in the screenshot below).
  4. Click "Download Your Kit" button (marked as red oval in the screenshot below).
Font Squirrel online generator

After these steps you will see loading bar and then you will be able to download the archive, for example like this one: webfontkit-20141013-033139.zip.

If you extract the archive you will see the following structure:

Structure of archive

If you open leaguegothic-regular-demo.html file by any browser you will see how the font looks when it's applied to a webpage.

If you open stylesheet.css file with CSS styles, you will see @font-face rule for the current font:

@font-face {
    font-family: 'league_gothicregular';
    src: url('leaguegothic-regular-webfont.eot');
    src: url('leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguegothic-regular-webfont.woff2') format('woff2'),
         url('leaguegothic-regular-webfont.woff') format('woff'),
         url('leaguegothic-regular-webfont.ttf') format('truetype'),
         url('leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;

To apply the current font to website, the font files need be copied into website folder where files with CSS styles are placed and then you need to add @font-face rule from stylesheet.css file to website's styles in order to use them in the following way:

font-family: 'league_gothicregular';

Here is an example, if you want to use this font for all headings of the first level (h1 tags):

h1 {
  font-family: 'league_gothicregular';

Read also

Log in or create a user account to post a comment.


Quick navigation

General navigation