Веб-шрифты Google хранятся локально по сравнению с онлайн-источником
Когда я добавляю веб-шрифты Google, используя правило @import в моем файле CSS, все работает нормально.
Но когда я загружаю этот шрифт и сохраняю его локально на своем сервере, а затем перенаправляю правило @ font-face на свой компьютер, он не работает.
Поэтому я заменил эту строку в моем файле css/fonts.css:
@import url(http://fonts.googleapis.com/css?family=Michroma);
с этим:
@font-face {
font-family: 'Michroma';
font-style: normal;
font-weight: 400;
src: url(http://localhost/xampp/mysite/css/fonts/michroma/micrhoma.woff) format('woff');
}
Другими словами, я просто скопировал код из googleapi для этого шрифта. И я сохранил файл шрифта (.woff) по указанному выше пути (я перепроверил, он действительно там).
Я попытался изменить URL-адрес, но безрезультатно:
src: url(fonts/michroma/michroma.woff) format('woff');
Я не могу поверить, что есть какая-то причина, по которой веб-шрифты Google не будут работать, если мы будем использовать их локально, поэтому с тем, что я делаю, должно быть что-то не так. Улики? Разве не так мы определяем наши собственные шрифтовые грани? (Я никогда не пробовал это раньше).
2 ответа
Как указано в комментариях, причиной проблемы было неправильное написание имени шрифта в URL.
Это способ использовать Google шрифты локально. Надлежащим способом является использование относительных URL-адресов, таких как fonts/michroma/michroma.woff, а не http: URL-адреса с localhost (они потребуют от вас запуска HTTP-сервера на вашем компьютере).
Однако он не будет работать в браузерах, которые не поддерживают формат WOFF (в данном случае). Как правило, лучше использовать Google Fonts в качестве удаленного хостинга, поскольку они знают, как обслуживать разные форматы шрифтов для разных браузеров. Ср я должен локально хранить CSS, сгенерированный Google Web Fonts API?
В одном шрифте кавычки для названия семейства шрифтов не нужны. Вы должны удалить и запустить его будет работать нормально. семейство шрифтов: Michroma;