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

Question

Мне действительно нужна помощь с кодом @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; }

Я использовал название «lane» только потому, что оно было у bozdoz.

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

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

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

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

Answer 1

Вы правильно его используете?Вот формат для @ 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>

Answer 2

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

Answer 3

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

@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.

Answer 4

Прежде всего, спасибо всем за вашу огромную помощь!С кодом @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 ...

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

Answer 5

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

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

url("Univers.ttf");

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

font-family: "MyFontName";

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

p { font-family: "MyFontName", Arial, sans-serif; }