Using custom fonts CSS @font-face in a WordPress theme

style-01.css

/* Fonts
--------------------------------------------- */

@font-face {font-family: "Century Gothic";
    src: url("fonts/century-gothic.eot");
    src: url("fonts/century-gothic.eot?#iefix") format("embedded-opentype"),
    url("fonts/century-gothic.woff2") format("woff2"),
    url("fonts/century-gothic.woff") format("woff"),
    url("fonts/century-gothic.ttf") format("truetype"),
    url("fonts/century-gothic.svg#Century Gothic") format("svg");
}

@font-face {font-family: "Handel Gothic BT";
    src: url("fonts/handel-gothic-bt.eot");
    src: url("fonts/handel-gothic-bt.eot?#iefix") format("embedded-opentype"),
    url("fonts/handel-gothic-bt.woff2") format("woff2"),
    url("fonts/handel-gothic-bt.woff") format("woff"),
    url("fonts/handel-gothic-bt.ttf") format("truetype"),
    url("fonts/handel-gothic-bt.svg#HandelGothic BT") format("svg");
}

style-02.css

body {
    background-color: #fff;
    color: #000;
    font-family: "Century Gothic", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1 {
    color: #000;
    font-family: "Handel Gothic BT", Helvetica, sans-serif;
    font-size: 24px;
    -webkit-font-smoothing: antialiased;
}