Локально размещенный Google Font не загружается - PullRequest
Новая
       6

Локально размещенный Google Font не загружается

0 голосов
/ 03 июля 2018

Я хотел бы разместить шрифты Google локально на сервере веб-хостинга. Однако шрифты не загружаются. Я попытался упростить реализацию и использовал эти стили в моем index.html: 

<style>
    @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        src: local('Open Sans Regular'), local('OpenSans-Regular'),
            url('open-sans-v15-latin-regular.woff2') format('woff2'),
            url('open-sans-v15-latin-regular.woff') format('woff'),
            url('open-sans-v15-latin-regular.ttf') format('truetype'),
        }
    @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 700;
        src: local('Open Sans Bold'), local('OpenSans-Bold'),
            url('open-sans-v15-latin-700.woff2') format('woff2'),
            url('open-sans-v15-latin-700.woff') format('woff'),
            url('open-sans-v15-latin-700.ttf') format('truetype'),
    }

    body{ font-family:"Open Sans",serif; }
</style>

Файлы .woff и .ttf, расположенные в корне рядом с index.html.

Я предоставил запасной шрифт 'serif', чтобы попытаться определить причину ошибки. Сайт всегда показывает запасной вариант 'serif' вместо 'Open Sans'. На вкладке «Источники» DevTools видно, что шрифт не загружался, но в консоли или в журнале сервера нет ошибок.

Как я могу это исправить?

Обновление : как и подсказка CrissCrossCrass, произошла синтаксическая ошибка. После последнего определения src вместо запятой должна быть точка с запятой (после формата :( 'truetype')). Правильный стиль был: 

<style>
    @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        src: local('Open Sans Regular'), local('OpenSans-Regular'),
            url('open-sans-v15-latin-regular.woff2') format('woff2'),
            url('open-sans-v15-latin-regular.woff') format('woff'),
            url('open-sans-v15-latin-regular.ttf') format('truetype');
        }
    @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 700;
        src: local('Open Sans Bold'), local('OpenSans-Bold'),
            url('open-sans-v15-latin-700.woff2') format('woff2'),
            url('open-sans-v15-latin-700.woff') format('woff'),
            url('open-sans-v15-latin-700.ttf') format('truetype');
    }

    body{ font-family:"Open Sans",serif; }
</style>

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Откройте вкладку Network в инструментах разработчика и посмотрите, действительно ли файлы загружены, если нет, и вы получите NOT FOUND, затем проверьте структуру каталогов.

0 голосов
/ 03 июля 2018

Как устроен ваш файловый каталог? Существует вероятность того, что ссылки на ваши файлы шрифтов на самом деле не указывают на ваши файлы шрифтов. Кроме того, вы хотели бы, чтобы тег style был помещен перед вашими тегами HTML.

...