[Вопрос] Как правильно подключить нестандартный шрифт?

07-01-2017, 11:20 AM

Заголовок архива рубрик, файл category.php

HTML Code:

<div class="page-title"><?php echo single_cat_title( '', false ); ?></div>

css

HTML Code:

.cat_arr .page-title {
    border-bottom: 1px solid # e1e1e1;
    font-size: 24px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #636363;
    line-height: 2.181818182;
    font-weight: 100;
}

Не могу сообразить как подключить импорт шрифта к классу page-title

HTML Code:

@font-face {
    font-family: CyrillicOldBold; 
    src: url(wp-content/font/CyrillicOldBold.Ttf); 
   }

к примеру рубрика - http://ikona-radoneg.ru/troita/

07-01-2017, 01:30 PM

Во-первых, в исходнике http://ikona-radoneg.ru/wp-content/t...-one/style.css я вижу следующее:

HTML Code:

@font-face {
.kewa {
    font-family: CyrillicOldBold; /* Имя шрифта */
    src: url(ikona-radoneg.ru/wp-content/font/CyrillicOld Bold.Ttf); /* Путь к файлу со шрифтом */
}

".kewa {" тут явно лишнее.

Во-вторых, пробела в "CyrillicOld Bold.Ttf" тоже быть не должно -- ваш сайт выплёвывает 404 по такой ссылке. Актуальный шрифт находится по адресу http://ikona-radoneg.ru/wp-content/f...licOldBold.Ttf

В-третьих, без танцев с бубном мне удалось заставить это заработать только в Опере 12.18.
Хром ругался на "Font from origin 'http://ikona-radoneg.ru' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.", и я забил.
Фокс выдал примерно такую же ошибку, а когда я стал пробовать с шрифтом, предварительно скачанным в папку со страницей, пошло вот такое:
Оффтоп

В итоге я пошёл на сайт http://www.font2web.com/ и воспользовался их конвертером с их css-кодом, в Фаерфоксе заработало.
Итоговая страница: https://drive.google.com/open?id=0Bz...URoT0pOdXRlNFE
Обратите внимание на новые файлы шрифта.

Информация по теме: http://htmlbook.ru/blog/svoi-shrift-na-stranitse

07-01-2017, 08:52 PM

TTF это не веб шрифт. Его нужно сконвертировать во все веб-шрифты.
Я пользуюсь всегда https://www.web-font-generator.com/
На выходе будет набор файлов шрифта и css с нужным кодом