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
  • 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

Font size in HTML

Font size in HTML

Details about "float" property

Details about "float" property

Discussion (total 5 comments)

January 15, 2017 at 03:55 am
Viagra En Andorra Propecia Langzeitfolgen Amoxicillin And Asthma <a href=http://dmdrugs.com>viagra online pharmacy</a> Viagra Acquistasi Cheap Viagra Uk Next Day Delivery Cialis Nachnahme Rechnung Que Es Cialis Cialis <a href=http://durazy.com>Buy Viagra</a> Kamagra Oral Jelly Review Forum Levitra Prezzo On Line <a href=http://frensz.com>Buy Viagra</a> Canadian Pharmacy Norx Low Price Generic Viagra Cialis 20 Generico <a href=http://cod24hs.com>cialis</a> Comprar Cialis Generico En Andorra Buy Xenical America Levitra 5mg <a href=http://drugs20.com>cheap cialis</a> Cheap Canadian Pfizer Viagra Glaxomed Zithromax Buy Baclofene Pharmacie En Ligne Propecia Barata Effets Cialis 20 Mg Treat Acne With Amoxicillin <a href=http://shopbyrxbox.com>viagra</a> Viagra Quel Cas Cialis Billigster Preis Prix Viagra Sans Ordonnance <a href=http://euhomme.com>cialis</a> Comprar Cialis Murcia How Much Cephalexin For Canines <a href=http://ciaolis.com>cialis</a> Cephalexin Can Cause Skin Rash Viagra Witout A Prescription Worldwide Macrobid For Sale Visa Accepted Shop Truro Buy Zyloprim Kamagra 100 Mg Order Amoxicillin Without Prescription <a href=http://crdrugs.com>online pharmacy</a> Amoxicillin Clavulanate Assium Levaquin Low Price Propecia Doctor Spfld Ma 10 Mg Cialis Discount Generic Macrobid Worldwide Next Day Cheapeast Cardiff <a href=http://aspills.com>Buy Cialis</a> Gel Kamagra Fast Zithromax Acne Treatment Rayh Health Care Pvt.Ltd Viagra <a href=http://drugssu.com>levitra prices 20 gm free delivery</a> Comprar Viagra India Levitra Germany Priligy Priligy Vs Tramadol Order Medstore <a href=http://frigra.com>Buy Cialis</a> Comprar Cialis Generico En Valencia
February 04, 2017 at 09:05 pm
thanks towards this colossal revealing website, keep up the massive work check out this <a href=http://onlinecasinos-x.com>online casinos</a> offers
February 06, 2017 at 06:06 pm
thanks towards this colossal illuminating website, living up the momentous undertaking check out this <a href=http://onlinecasinos-x.com>online casinos</a> offers
February 13, 2017 at 02:43 pm
thanks towards this colossal revealing website, obstruct up the momentous work check out this <a href=http://onlinecasinos-x.com>online casinos</a> offers
February 20, 2017 at 01:33 pm
thanks due to the fact that this significant revealing website, keep up the skilled work check out this <a href=http://onlinecasinos-x.com>casino</a> offers

Post comment


Quick navigation

General navigation