font-face не работает при развертывании на хосте

Я использую шрифт otf для моего веб-сайта html, он отлично работает на рабочем столе компьютера, но когда я развернул его для размещения, шрифт перестанет работать. Я добавляю изображение, чтобы показать разницу.

Я включил все файлы, файлы на моем рабочем столе и хосте идентичны.

 <style>
        @font-face
        {
        font-family: proxima-nova-regular;
        src:    url("proxima-nova-regular.otf") format("opentype");
        }
        @font-face
        {
        font-family: proxima-nova-regular-italic;
        src:    url("proxima-nova-regular-italic.otf") format("opentype");
        }
        @font-face
        {
        font-family: proxima-nova-bold-regular;
        src:    url("proxima-nova-bold-regular.otf") format("opentype");
        }
        @font-face
        {
        font-family: proxima-nova-bold-regular-italic;
        src:    url("proxima-nova-bold-regular-italic.otf") format("opentype");
        }
        html, body
        {
            margin: 0px;
            padding: 0px;
        }

        .topbanner
        {
            width: 100%;
            height: 35px;
            background:rgb(35,35,35);
        }
        .topbannerinside
        {
            width: 200px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: white;
            float: right;
            font-family: proxima-nova-regular;
        }
        .topbannerinside:hover
        {
            color: rgb(0, 232, 255);
        }
        .container
        {
            width: 1150px;
            height: 400px;
            background: rgb(250,250,250);
            border-radius: 50px;
            margin: auto;
            position: relative;
        }
        .header
        {
            width: 350px;
            height: 40px;
            font-family: proxima-nova-regular;
            font-size: 42px;
            top: 30px;
            left: 60px;
            position: absolute;
        }
        .subheader
        {
            width: 500px;
            height: 90px;
            font-family: proxima-nova-regular;
            font-size: 14px;
            position: absolute;
            left: 440px;
            top: 30px;
        }
        .selectregion
        {
            width: 460px;
            height: 280px;
            background-size: cover;
            background-image: url(samplescreen.png);
            border: dashed;
            border-color: black;
            border-width: 1px;
            position: absolute;
            left: 55px;
            top: 110px;
        }
        .play
        {
            width: 112px;
            height: 112px;
            background: url(play.png);
            position: absolute;
            left: 540px;
            top: 200px;
        }
        .play:hover
        {
            cursor: pointer;
        }
        .play:active
        {
            top: 202px;
        }
        .stop
        {
            width: 112px;
            height: 112px;
            background: url(stop.png);
            position: absolute;
            left: 666px;
            top: 200px;
        }
        .stop:hover
        {
            cursor: pointer;
        }
        .stop:active
        {
            top: 202px;
        }
        .conversion
        {
            width: 300px;
            height: 220px;
            background: rgb(246,246,246);
            border: dashed;
            border-color: black;
            border-width: 1px;
            position: absolute;
            left: 800px;
            top: 130px;
        }
        .adsense
        {
            width: 733px;
            height: 96px;
            background-image: url(http://www.lostsaloon.com/wp-content/uploads/adsense-image-leaderboard.jpg);
            margin: auto;
            margin-top: 10px;
        }
        .recentlyadded
        {
            width: 1150px;
            height: 190px;
            background: rgb(250,250,250);
            border-radius: 50px;
            margin: auto;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .recentlyaddedtext
        {
            width: 250px;
            height: 50px;
            line-height: 50px;
            color: rgb(120,0,255);
            margin-left: 90px;
            font-size: 18px;
            font-family: proxima-nova-regular;
        }
        .recentlyaddedscreenshot
        {
            width: 190px;
            height: 110px;
            background: lightgrey;
            float: left;
            margin-left: 30px;
        }


.imgareaselect-border1 {
    background: url(border-anim-v.gif) repeat-y left top;
}

.imgareaselect-border2 {
    background: url(border-anim-h.gif) repeat-x left top;
}

.imgareaselect-border3 {
    background: url(border-anim-v.gif) repeat-y right top;
}

.imgareaselect-border4 {
    background: url(border-anim-h.gif) repeat-x left bottom;
}

.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.imgareaselect-handle {
    background-color: #fff;
    border: solid 1px #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.imgareaselect-outer {
    background-color: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.imgareaselect-selection {
}

    </style>