@font-face не работает даже после того, как я попробовал все, о чем мог подумать

Мне очень нужна помощь с @font-face код. Это, кажется, не видит мой файл шрифта.

Я попытался изменить путь ко всему, что мог придумать, создал новые папки, переименовал существующие, поместил файл шрифта в мой корень и т. Д.

Я тестирую в Firefox и Chrome.

Вот коды, которые я попробовал в моем CSS:

src: url(http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(http://www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(../wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/thefalltheme/images/Univers.ttf);
src: url(../thefalltheme/images/Univers.ttf);
src: url(thefalltheme/images/Univers.ttf);
src: url(/images/Univers.ttf);
src: url(../images/Univers.ttf);
src: url(images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/Univers.ttf);
src: url(/Univers.ttf);
src: url(Univers.ttf);
src: url(../Univers.ttf);

Можете ли вы узнать, где я должен поместить файл шрифта или что изменить в моем CSS, чтобы он работал?

(Я также проверил подобные вопросы здесь и в других местах в сети и попытался использовать этот сайт безрезультатно.)

Спасибо!

ОБНОВЛЕНИЕ: предложение bozdoz не работает. Я использовал FontSquirrel, чтобы получить шрифты. Это CSS:

@font-face { font-family: 'lane'; src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot'); src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg'); font-weight: normal; font-style: normal; }

h1{ font-size: 110px; font-family: 'lane', georgia, serif; color: #000000; }

Я использовал название "лейн" только потому, что оно было у Боздоса.

Все шрифты здесь:

http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/

и вот их имена:

univers-webfont.eot, univers-webfont.woof, univers-webfont.ttf, univers-webfont.svg

Источник

5 ответов

Решение

Прежде всего, спасибо всем за отличную помощь! Там не было никаких проблем с @font-face код. Проблема была с моим общим CSS. Видите ли, мой CSS был написан так:

/*   
Info
*/

@media screen {
* {
margin: 0px;
padding: 0px;
}
html { background: black url(images/bg.jpg); }
body { font: 14px/1.4 Georgia, serif; }
article, aside, figure, footer, header, nav, section { display: block; }

@font-face {
font-family: 'lane';
src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot');
src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'),
     url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'),
     url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

etc.

Проблема заключалась в том, что @font-face не видел, потому что это было после @media screen! После того, как я положил его перед @media screen и после /* Info */ это работало без нареканий.

Кроме того, похоже, что я могу использовать абсолютные и относительные пути при использовании Wordpress...

Еще раз спасибо всем за помощь!

Источник

Вы используете это правильно? Вот формат для @font-face. Обратите внимание на количество файлов. Вы можете использовать Font Squirrel для создания всех необходимых шрифтов для кросс-браузерной совместимости. Кроме того, похоже, что вы используете WordPress. Я считаю, что вы должны использовать абсолютные пути (т.е. первый в вашем списке) в CSS на WordPress. Надеюсь это поможет.

<style>
@font-face {
    font-family: 'lane';
    src: url('type/lanehum-webfont.eot');
    src: url('type/lanehum-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/lanehum-webfont.woff') format('woff'),
         url('type/lanehum-webfont.ttf') format('truetype'),
         url('type/lanehum-webfont.svg#LaneHumouresqueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.font { font-family:"lane", arial, serif; }
</style>
Источник

Вы хотите сделать что-то вроде этого:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }

Файл определения шрифта должен быть относительно вашего файла CSS. Так что, если ваш CSS находится на:

/Content/css/main.css

Тогда ваш шрифт должен находиться в той же папке. Если вы укажете

@font-face { font-family: Delicious; src: url('fonts/Delicious-Roman.otf'); }

Тогда ваше определение шрифта будет на

/Content/css/fonts/Delicious-Roman.otf

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

Источник

Вам следует попробовать генератор fontSuirrel, их скрипты были тщательно протестированы и совместимы со многими браузерами. Выберите дополнительные настройки при создании ваших шрифтов. Некоторые браузеры могут не иметь возможности использовать ttf в качестве шрифта, чтобы они предоставили вам eotwoff а также ttf

Источник

Мои предложения из комментариев в качестве ответа:

Попробуйте с кавычками:

url("Univers.ttf");

Убедитесь, что у вас есть семейство шрифтов, иначе вы не можете использовать свой шрифт в своем коде:

font-family: "MyFontName";

Ваше пользовательское семейство шрифтов, которое вы бы использовали в css:

p { font-family: "MyFontName", Arial, sans-serif; }
Источник
Другие вопросы по тегам