2015-07-15 3 views
0

пытается добавить пользовательский шрифт на мой сайт WordPress, но он просто не работает. Я пробовал использовать один из плагинов, но я вижу только изменение шрифта в режиме редактирования, но когда я нахожусь в общедоступном webaddress, шрифт не загружается.Добавление пользовательского шрифта в CSS/HTML?

Я конвертирован Futura сгущенного света в различные типы и добавил это в моем style.css на тему я использую

@font-face { 
    font-family: 'Conv_futura-condensedlight-normal'; 
    src: url('fonts/futura-condensedlight-normal.eot'); 
    src: url('fonts/futura-condensedlight-normal.eot?#iefix') format('embedded-opentype'), 
     url('fonts/futura-condensedlight-normal.woff') format('woff'), 
     url('fonts/futura-condensedlight-normal.ttf') format('truetype'), 
     url('fonts/futura-condensedlight.svg#Conv_futura-condensedlight-normal') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

, а также добавил этот

h7{font-family: 'Conv_futura-condensedlight-normal';} 

На страница, где я хочу текст изменить у меня есть:

<h7>LOGIN</h7> 

но текст не меняется ..

Я также загрузил файлы в папку шрифтов в каталоге темы (где другие шрифты)

не может показаться, чтобы найти ошибку. Помощь будет оценена!

+3

ли консоль разработчика '' показать любые 404 для отсутствующих файлов ... – War10ck

+0

Вы можете оставить структуру папок ? Если, например, ваш css находится в таблицах стилей или css, ваш путь будет нуждаться в настройке? – Guy

+1

В HTML не существует тега '', допустимый диапазон от 1 до 6. – Stickers

ответ

1

Попробуйте @ font-face для пользовательских шрифтов. Используйте ниже код.

@font-face { 
font-family: 'MyWebFont'; 
src: url('webfont.eot'); /* IE9 Compat Modes */ 
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
    url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
    url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
    url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

и указать его, как показано ниже:

font-family: 'MyWebFont', Fallback, sans-serif; 

См: https://css-tricks.com/snippets/css/using-font-face/

+0

Это в основном то, что у меня уже есть; шрифт правильно загружается в IE, но в Chrome он не работает. – user5120455

1

Может быть несколько причин, но первое, что я вижу неправильно, это тег <h7>, потому что его не существует. Вы должны использовать от h1 to h6.

Если это не решит проблему, попробуйте использовать консоль браузера, поскольку @ War10ck сказал, что отсутствующие файлы являются сигналом о проблемах с дорогой.

1

Когда я создал специальный шрифт и использовать его на моем сайте, это было CSS я использовал:

@font-face {font-family:'CUSTOM_FONT_NAME';src:local('CUSTOM_FONT_NAME'), url(http://MY_URL/MY_FONT_PATH/MY_FONT.ttf) format('truetype');} 

.my_custom_font_class {font-family:'CUSTOM_FONT_NAME',serif;} 

Я считаю, что я должен был использовать глобальный путь, чтобы получить мой шрифт для загрузки, так что вы могли бы Попробуй это. Часть src:local('CUSTOM_FONT_NAME') предназначена только для проверки того, что она полностью работает с вашей машиной с установленным шрифтом. (В этом случае вам понадобится имя шрифта в соответствии с именем, зарегистрированным на вашем компьютере).

Смежные вопросы