Текст возвращается с пользовательского на веб-безопасный шрифт при перезагрузке (переопределить кеш)

Я изменил свой шрифт на Arial, но установил для шрифтов заголовков собственный шрифт. Я помещаю свои шрифты в папку с именем MYFONT, которая находится в папке с именем fonts, которая находится в моем корневом каталоге. (корневой каталог -> шрифты -> MYFONT -> файлы шрифтов) Вот мой код:

CSS
body {
    font-family: 'Arial', sans-serif;
}

@font-face {
    font-family: 'MYFONT';
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    src: url(fonts/MYFONT/MYFONT.woff2) format('woff2'),
         url(fonts/MYFONT/MYFONT.woff) format('woff'),
         url(fonts/MYFONT/MYFONT.svg) format('svg'),
         url(fonts/MYFONT/MYFONT.eot) format('eot');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


h1, h2, h3 {
    font-family: 'MYFONT', sans-serif;
}

HTML
<h1>MYFONT</h1>
<h2>MYFONT</h2>
<h3>MYFONT</h4>
<p>ARIAL</p>

Когда я впервые открываю страницу на новом устройстве или когда нажимаю Cmd + Shift + R (перезагрузка страницы без кеша браузера), вся страница отображается в формате Arial. В чем может быть проблема? Я хочу, чтобы <h1>, <h2>, and <h3> использовал шрифт MYFONT.

**Обновлено: Я попытался удалить часть "sans-serif" в

h1, h2, h3 {
    font-family: 'MYFONT', sans-serif;
}

и при первой загрузке/загрузке без кеша шрифт превратился в шрифт с засечками по умолчанию.**