Не знаю, почему, но шрифт не отображается. Пожалуйста, помогите.
CSS (в папке css): style.css:
@font-face {
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: local('Gotham-Medium'),
url(../fonts/Gotham-Medium.ttf) format('truetype');
}
a {
font-family:Gotham,Verdana,Arial;
}
Двойной период (..) означает, что вы поднимаетесь на одну папку, а затем ищите папку за косой чертой. Например:
Если ваш index.html находится в папке html/files, а шрифты находятся в html/fonts, то.. прекрасно (потому что вам нужно вернуться в одну папку, чтобы перейти на /fonts). Ваш index.html в html и ваши шрифты в html/fonts, тогда вы должны использовать только один период.
Другая проблема может заключаться в том, что ваш браузер может не поддерживать файлы .eot шрифтов.
Не видя больше своего кода (и, возможно, ссылки на живую версию вашего сайта), я больше не могу помочь вам.
Изменить: Забудьте о части .eot, я пропустил файл .ttf в вашем css.
Попробуйте следующее:
@font-face {
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf);
}
Использование font-face требует небольшого понимания несоответствий браузера и может потребовать некоторых изменений на самом веб-сервере. Первое, что вам нужно сделать, это проверить консоль, чтобы узнать, генерируются ли/какие сообщения. Это проблема с разрешениями или ресурс не найден....?
Во-вторых, потому что каждый браузер ожидает другого типа шрифта, я бы использовал Font Squirrel для загрузки шрифта, а затем сгенерировал дополнительные файлы и CSS. http://www.fontsquirrel.com/fontface/generator
И, наконец, версии FireFox и IE не позволят загружать шрифты в кросс-домен. Вам может потребоваться изменить конфигурацию Apache или .htaccess(Header set Access-Control-Allow-Origin "*" )
У меня была такая же проблема, и я решил поделиться своим решением, поскольку я не видел, чтобы кто-то обращался к этой проблеме конкретно.
Проблема заключалась в том, что я не использовал правильный путь. Мои CSS выглядели следующим образом:
@font-face {
font-family: 'sonhoregular';
src: url('fonts/vtkssonho-webfont.eot');
src: url('fonts/vtkssonho-webfont.eot?') format('embedded-opentype'),
url('fonts/vtkssonho-webfont.woff2') format('woff2'),
url('fonts/vtkssonho-webfont.woff') format('woff'),
url('fonts/vtkssonho-webfont.ttf') format('truetype'),
url('fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg');
font-weight: normal;
font-style: normal;
Проблема с путём заключается в том, что я имею в виду шрифт из моего CSS файла, который находится в моей папке CSS. Сначала мне нужно было подняться на уровень, а затем в папку с шрифтами. Это то, что сейчас выглядит, и отлично работает.
@font-face {
font-family: 'sonhoregular';
src: url('../fonts/vtkssonho-webfont.eot');
src: url('../fonts/vtkssonho-webfont.eot?') format('embedded-opentype'),
url('../fonts/vtkssonho-webfont.woff2') format('woff2'),
url('../fonts/vtkssonho-webfont.woff') format('woff'),
url('../fonts/vtkssonho-webfont.ttf') format('truetype'),
url('../fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg');
font-weight: normal;
font-style: normal;
Я надеюсь, что это поможет кому-то!
У меня была эта проблема в последнее время, и проблема заключалась в том, что мой веб-сервер не был настроен на обслуживание файлов woff. Для IIS 7 вы можете выбрать свой сайт, а затем выбрать значок MIME Types. Если .woff отсутствует в списке, вам нужно добавить его. Правильные значения
File name extension: .woff
MIME type: application/font-woff
Используя оператор.., вы продублировали путь к папке - и получим что-то вроде этого: /wp-content/themes/wp-content/themes/twentysixteen/fonts/.
Используйте консоль в своем браузере, чтобы увидеть эту ошибку.
Не уверен, в чем проблема, но попробуйте следующее:
Проверьте здесь для примеров, если они не работают для вас, тогда у вас есть другая проблема.
Edit:
У вас есть куча повторяющихся деклараций в вашем источнике, это работает?
@font-face { font-family: Gotham; src: url('../fonts/gothammedium.eot'); }
a { font-family:Gotham,Verdana,Arial; }
Я разрабатывал для арабского клиента и имел такую же проблему, после использования генератора шрифтов для создания моих шрифтов. Ни один из созданных мной шрифтов не работал.
Оказывается, в "Расширенных опциях" этого жанратора была настройка, которую мне нужно было выбрать, которая не только использовала бы глифы западного языка (предварительно выбранный вариант).
После удаления этого подмножества мои шрифты затем работали с арабскими символами. Надеюсь, это поможет кому-то еще в этом положении.
Приветствия
Вам нужно поместить имя/путь файла шрифта в кавычки.
Например.
url("../fonts/Gotham-Medium.ttf")
или
url('../fonts/Gotham-Medium.ttf')
а не
url(../fonts/Gotham-Medium.ttf)
Также @FONT-FACE работает только с некоторыми файлами шрифтов.: О (
Все сайты, на которых вы можете скачивать шрифты, никогда не говорят, какие шрифты работают, а какие нет.
Я также сталкиваюсь с этой проблемой. После решения всех решений я получил окончательное решение по этой проблеме. Причинами такого типа проблем являются заданные глобальные шрифты. Для решения этой проблемы используется ключевое слово ! Important для каждой строки в @font-face.
Полное описание и пример для решения этой проблемы: http://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html
попробуйте поставить ниже html в head tag.It работал у меня.
<title>ABC</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">