Веб-сайт извлекает правильные шрифты только при нажатии на определенные ссылки, в противном случае будет вытягивать из системных шрифтов

Question

У меня проблема, описанная в заголовке поста на моем веб-сайте портфолио, и я действительно в растерянности относительно того, в чем может быть проблема. На страницах «Работа» и «Контакт» не будут отображаться правильные шрифты, даже если я перейду к ним с помощью раскрывающихся ссылок, а на отдельных страницах проекта будут только нужные шрифты, если я перейду к одному из проектов с домашней страницы (после нажмите кнопку lo go в левом верхнем углу, чтобы загрузить шрифты вообще), а затем используйте кнопки «предыдущий» и «следующий» в конце каждого проекта. Я проверил все ссылки на файлы в папках, и все, кажется, в порядке. URL-адрес сайта mtbailey.com, и я приложил скриншот того, как все должно выглядеть, если все работает так, как предполагалось. Кто-нибудь знает, что происходит?

https://gyazo.com/d478ce4471e5944eae44af5fcef3c281

CSS:

@font-face {
    font-family: 'Spartan MB';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/SpartanMB/SpartanMB-Regular.eot"); /* IE9 Compat Modes */
    src: url("../fonts/SpartanMB/SpartanMB-Regular.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
         url("../fonts/SpartanMB/SpartanMB-Regular.woff") format('woff'), /* Modern Browsers */
         url("../fonts/SpartanMB/SpartanMB-Regular.woff2") format('woff2'), /* Modern Browsers */
         url("../fonts/SpartanMB/SpartanMB-Regular.ttf") format('truetype'); /* Safari, Android, iOS */
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Spartan MB';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/SpartanMB/SpartanMB-SemiBold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/SpartanMB/SpartanMB-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/SpartanMB/SpartanMB-SemiBold.woff') format('woff'), /* Modern Browsers */
         url('../fonts/SpartanMB/SpartanMB-SemiBold.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/SpartanMB/SpartanMB-SemiBold.ttf') format('truetype'); /* Safari, Android, iOS */
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Spartan MB';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/SpartanMB/SpartanMB-ExtraBold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/SpartanMB/SpartanMB-ExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/SpartanMB/SpartanMB-ExtraBold.woff') format('woff'), /* Modern Browsers */
         url('../fonts/SpartanMB/SpartanMB-ExtraBold.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/SpartanMB/SpartanMB-ExtraBold.ttf') format('truetype'); /* Safari, Android, iOS */
    text-rendering: optimizeLegibility;
}

strong {
    font-weight: 600;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    font-kerning: normal;
    -webkit-font-kerning: normal;
    margin: 0;
    font-family: 'Spartan MB';
}


li {
    list-style: none;
    display: inline;
}

a {
    text-decoration: none;
    color: inherit;
}

p {
    text-decoration: none;
    font-weight: 400;
    font-size: 1em;
}

hr {
    background-color: #293941;
    border-style: solid;
    border-width: 1.2px;
    float: left
    width: 100%;
}

h1 {
    text-decoration: none;
    font-weight: 900;
    font-size: 8vw;
    -webkit-margin-after: 0;
    -webkit-margin-before: 0;
}

h2 {
    text-decoration: none;
    font-weight: 900;
    font-size: 4vw;
    -webkit-margin-after: 0;
    -webkit-margin-before: 0;
}

h3 {
    text-decoration: none;
    font-weight: 900;
    font-size: 1.5em;
    -webkit-margin-after: 0;
    -webkit-margin-before: 0;
}

input[type=text] {
    border-bottom: 2px solid #293941;
    padding: 3px 0px;
    font-family: Spartan MB;
    font-size: 1em;
    width: 100%;
    max-width: 600px;
    margin: 5px 0px 5px 0px;
}

input[type=submit] {
    padding: 10px;
    font-family: Spartan MB;
    background-color: #25bcbd;
    font-weight: 900;
    color: white;
    font-size: 1.35em;
    cursor: pointer;
}

textarea {
    border-bottom: 2px solid #293941;
    border-top: none;
    border-left: none;
    border-left: none;
    border-right: none;
    width: 100%;
    max-width: 600px;
    height: 200px;
    font-family: Spartan MB;
    font-size: 1em;
    padding: 3px 0px;
    margin: 5px 0px 5px 0px;
}

.teal {
    color: #25bcbd;
}

.blue {
    color: #2F90BB;
}

.mobileimg {
    display: block;
}

.desktopimg {
    display: none;
}

.footnote{
    font-size: 0.6em;
    margin: 0.6em 0 0 1 em;
}

#wrap {
    margin-top: 80px; /*Same as Header height*/
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    position: relative;
    color: #293941;
    padding: 0 1vw;
}


#header {
    width: 100%;
    height: 82px;
    background-color: #FFFFFF;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
}

#headerwrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    position: relative;
    color: #293941;
    padding: 0 1vw;
    height: 82px;
    background-color: white;
}

.mobileheaderbar {
    width: 100%;
    height: 2px;
    background-color: #293941;
    float: left;
}

#header img {
    width: 100%;
    height: auto;
}

#logo {
    width: 160px;
    height: 100px;
    float: left;
    display: none;
}

#dhr {
    height: 3px;
    width: 100%;
    border-top: 2px solid #293941;
    border-bottom: 2px solid #293941;
    float: left;
}

#squarelogo {
    width: 45px;
    height: auto;
    float: left;
    margin-left: 10px;
}

#nav {
    display: none;
    float: right;
    font-weight: 900;
    font-size: 23px;
    padding-top: 30px;
    width: 20%;
}

#nav a {
    color: #293941;
    display: inline;
    float: left;
}

input, button, submit {
    border: none;
    padding: 0px;
}

.dropbtn {
    border: none;
    cursor: pointer;
    width: 60px;
    height: 80px;
    background-image: url("../images/hamburger.svg");
    background-size: cover;
    background-color: white;
}

.dropdown {
    position: relative;
    display: inline-block;
    float: right;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    overflow: auto;
    right: 0px;
    font-family: 'Spartan MB';
    font-weight: 900;
}

.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color: #293941;
    border-bottom: 1px solid #293941;
}

.dropdown a:hover {background-color: #e5e5e5}

.show {display:block;}

#landing {
    width: 100%;
    position: relative;
    border-bottom: 2px solid #293941;
    display: block;
    float: left;
}

#lndmain {
    width: 100%;
    clear: both;
    float: left;
}

#lndside {
    width: 100%;
    clear: both;
    float: left;
    line-height: 2;
    padding-bottom: 25px;
}

#lndmain h1{
    font-size: 3em;
    padding-top: 25px;
}

#lndmain h2{
    font-size: 1em;
    font-weight: 400;
    padding-bottom: 25px;
}

#lndside h1 {
    font-weight: 400;
    font-size: 1em;
}

.projlogo {
    width: 100%;
    float: left;
}

.projdesc {
    float: left;
    padding-bottom: 3.4%;
}

.projdesc p {
    margin: 0;
}

.projdesc h1 {
    line-height: 1.2;
    margin-top: 3%;
}

.twocolumn {
    -webkit-columns: 1 0px;
    -moz-columns: 1 0px;
    columns: 1 0px;

    float: left;
}

.thumb {
    float: left;
    margin: 3.4% 0px;

    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.thumb h1 {
    line-height: 1;
    margin-top: 3%;
}

.more {
    font-size: 5vw;
    font-weight: 900;
}

.prevnext {
    font-size: 5vw;
    font-weight: 900;
    display: inline;
}

.fade:hover  {
    opacity: 0.5;
}

.arrow {
    width: 1.75vw;
    height: auto;
}

#portfoliowrap {
    width: 100%;
    -webkit-columns: 2 550px;
    -moz-columns: 2 550px;
    columns: 2 550px;
    -webkit-column-gap: 1.5em;
    -moz-column-gap: 1.5em;
    column-gap: 1.5em;
}

#wrap img {
    max-width: 100%;
    height: auto;
}

.portfolioimg {
    width: 100%;
    max-width: 600px;
    margin-top: .75vw;
    margin-bottom: .75vw;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    position: relative;
}

.overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
    background-image: url(../images/trans.png);
}

.overlaytext {
    position: absolute;
    bottom: 0;
    padding: 15px;
    color: white;
}

.footerbox {
    float: left;
    display: inline;
    margin: 20px 0px 30px 0px;
}

.h_iframe {
    position:relative;
    clear:both;
}
.h_iframe .ratio {
    display:block;
    width:100%;
    height:auto;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%; 
    height:100%;
}

#contactform {
    padding-top: 3.4%;
}

.h_iframe {
    position:relative;
    clear:both;
}
.h_iframe .ratio {
    display:block;
    width:100%;
    height:auto;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%; 
    height:100%;
}

@media screen and (min-width: 1200px) {

    #wrap {
        max-width: 1200px;
        padding: 0 0;
    }

    #header {
        height: 100 px;
    }

    #headerwrap {
        max-width: 1200px;
        padding: 0 0;
        height: 100px;
        border-bottom: 2px solid #293941;
    }

    .mobileimg {
        display: none;
    }

    .desktopimg {
        display: block;
    }

    .mobileheaderbar {
        display: block;
    }

    p {
        font-size: 19px;
    }

    h1 {
        font-size: 3.25em;
    }

    h2 {
        font-size: 2.5em;
    }

    h3 {
        font-size: 1.75em;
    }

    .footnote {
        font-size: 14px;
    }

    #nav {
        display: inline-block;
    }

    #logo {
        display: inline;
    }

    #logo img {
        height: 100px;
    }

    #squarelogo {
        display: none;
    }

    #landing {
        margin-top: 20px;
    }

    #lndmain {
        width: 74.9%;
        /*Not an even 75% to account for lndmain border-right*/
        border-right: 2px solid #293941;
    }

    #lndside {
        width: 20%;
        /*Not an even 25% to account for lndmain border-right*/
        clear: none;
        box-sizing: border-box;
        margin: 0 0 152px 4.9%;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    #lndmain h1{
        font-size: 8em;
        padding-top: 100px;
    }

    #lndmain h2{
        font-size: 3em;
        padding-bottom: 100px;
    }

    #lndside h1{
        font-size: 1.3em;
    }

    .projlogo {
        width: 25%;
        border-right: 2px solid #293941;
        padding: 2.5% 5% 2.5% 0px;
    }

    .projdesc {
        width: 64%;
        padding: 4.75% 0px 0px 5%;
        /*Not an even 65% to account for projlogo border-right*/
    }

    .dropbtn {
        display: none;
    }

    #nav a:nth-of-type(even){
        float: right;
        text-align: right;
    }
    /*This floats "Contact" to the right on desktop by floating only even numbered nav links to the right*/

    .twocolumn {
        -webkit-columns: 2 590px;
        -moz-columns: 2 590px;
        columns: 2 590px;

        -webkit-column-gap: 20px;
        -moz-column-gap: 20px;
        column-gap: 20px;

    }

    .thumb {
        height: 625px;
        position: relative;
    }

    .more {
        font-size: 2em;
        position: absolute;
        bottom: 0px;
    }

    .prevnext {
        font-size: 2em;
    }

    .arrow {
        width: 11px;
    }
}

htaccess

RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}\.html -f RewriteRule ^(.*)$ $1.html Header add Access-Control-Allow-Origin "*"

Извините за расширенный раздел комментариев, я стараюсь не выходить на этот сайт, чтобы не беспокоить, и я вижу, что у меня был обратный эффект при заполнении комментариев.

Похоже, все прояснилось, независимо от того, используете ли www or, но, вероятно, все же будет хорошей идеей обновить мой htaccess, чтобы принудительно не использовать www.