To add your custom font do the following:

  1. Save the font files to the following folder (include all the available versions of the font, like .eot, wof, .ttf and .svg)

  2. Open the custom.css file of the theme and add the following content:
    @font-face {
        font-family: YourCustomFontName;
        src:url("../fonts/yourcustomfontname.eot") format("embedded-opentype"),
            url("../fonts/yourcustomfontname.wof") format("woff"),
            url("../fonts/yourcustomfontname.ttf") format("truetype"),
            url("../fonts/yourcustomfontname.svg") format("svg");
        font-weight: normal;
        font-style: normal;
    /* font family */
    h1,h2,h3,h4,h5,h6,p, .top-bar-section, .top-bar-section ul li > a,
    .side-nav, .side-nav > a:first-child:not(.button), button,
    .button, .label, .sub-nav dt, .sub-nav dd, .sub-nav li, .chosen-container,
    .rating-links.icon-user > span, .newsletter-ribbon .icon-email,
    .footer-links li[class^="icon-"], .footer-links li[class*=" icon-"],
    .layered-nav-container ol li, a.previous, {
        font-family: YourCustomFontName, sans-serif;
    .links-list {
        font-family: YourCustomFontName, sans-serif !important;
    @media only screen and (min-width: 40.063em) {
        .top-bar-section .left ul,
        .top-bar-section .left .arrow-box {
            font-family: YourCustomFontName, sans-serif !important;
  3. Save the file, refresh Magento cache and your browser’s cache
Don’t forget to replace YourCustomFontName and yourcustomfontname with the name of the font you are planning to use.

For more information about how to enable and edit the custom.css file of the theme please refer to this article.