Как подключить ttf шрифт на сайте

Предлагаю вам подборку красивых кириллических шрифтов для сайта, а также рассмотрим в данной статье – как же подключаются ttf шрифты к сайтам на wordpress.

1. Красивые кириллические шрифты:

Поздравительные шрифты:

shrift7
Скачать artscript.ttf
Скачать boleroscript.ttf
Скачать campanella.ttf
Скачать chocogirl.ttf
Скачать lastochka.ttf
Скачать liberty.ttf
Скачать sladkoeshka
Скачать may.ttf

В стиле японских иероглифов:

shrift8

Скачать bonzai.ttf

В Интернете можно найти множество бесплатных кириллических шрифтов для сайта в формате ttf, однако, оригинальные шрифты, которые тонко украсят ваш сайт и не навредят читаемости текста на нем – нужно заказывать у дизайнеров за деньги. Если Вам не хватает денег на дизайн сайта, то советую прочитать полезные статьи вот очень интересно и познавательно.

2. Как подключить TTF шрифт на wordpress сайте.

2.1. Закачиваем ttf файл шрифта на сайт.

По умолчанию wordpress загрузчик не позволит вам загрузить файлы формата ttf, но это легко исправить, для этого достаточно в файле – functions.php вашей темы добавить следующий код:

function additional_mime_types( $mimes ) {
    $mimes['ttf'] = 'application/x-font-ttf';
     
    return $mimes;
}
add_filter( 'upload_mimes', 'additional_mime_types' );

Для того чтобы открыть файл – functions.php вашей темы – достаточно в админке, в левом меню, выбрать пункт “Внешний вид”, подпункт “Редактор”, справа в списке файлов выбрать – functions.php:

shrift1

Здесь стоит сказать, что если у вас уже есть функция “function additional_mime_types( $mimes )”, в коде файла functions.php – например вы разрешали загрузчику закачивать – apk файлы, тогда нужно просто добавить ещё одну строчку в данную функцию

$mimes['ttf'] = 'application/x-font-ttf';

, вот так:

function additional_mime_types( $mimes ) {
	$mimes['apk'] = 'application/java-archive';
	$mimes['ttf'] = 'application/x-font-ttf';

	return $mimes;
}
add_filter( 'upload_mimes', 'additional_mime_types' );

Иначе может возникнуть ошибка.

И после этого спокойно загружаем ttf шрифты на сайт – для этого в админке wordpress, в левом меню, выбираем пункт “Медиафайлы”, подпункт “Добавить новый”, выбираем ttf шрифт на своем компьютере и загружаем на сайт:

shrift2

Жмем на ссылочку изменить и копируем url адресс шрифта:

shrift3

shrift4

В нашем примере ссылка будет такой:
“https://mnogoblog.ru/wp-content/uploads/2017/05/bonzai.ttf”

Для вашего сайта – ссылка будет аналогичной – её и используйте далее по коду, заменяя ссылку с моего сайта на свою.

2.2. Заходим в файл стилей wordpress – style.css

Для этого в админке wordpress, в левом меню, выбираем пункт “Внешний вид”, подпункт “Редактор” и у нас открывается файл стилей:

И в нем вставляем следующий код:

@font-face {
  font-family: 'Bonzai';
  src: url('https://mnogoblog.ru/wp-content/uploads/2017/05/bonzai.ttf'); 
} 
 
h9 {
 font-family: 'Bonzai', 'Georgia', serif;
 font-size: 30px;
 font-weight: 700;
}

shrift5

Таким образом новый шрифт у нас использует тег h9.

Всё теперь его можно использовать.

Для того чтобы подключить несколько шрифтов достаточно продублировать код, например вот так:

@font-face {
  font-family: 'Bonzai';
  src: url('https://mnogoblog.ru/wp-content/uploads/2017/05/bonzai.ttf'); 
} 
 
h9 {
 font-family: 'Bonzai', 'Georgia', serif;
 font-size: 30px;
 font-weight: 700;
}


@font-face {
  font-family: 'Maya';
  src: url('https://mnogoblog.ru/wp-content/uploads/2017/05/Maya.ttf'); 
} 

h10 {
 font-family: 'Maya', 'Georgia', serif;
}

2.3. Используем новый шрифт на сайте.

Для примера, создайте новую Запись сайта – в админке wordpress, в левом меню, выбираем пункт “Записи”, подпункт “Добавить новую” и попадаем в Редактор Записей – здесь открываем вкладку – “Текст” – и пишем – текст, обернутый в тег h9:

shrift6

Вот так:

<h9> Мой новый шрифт на сайте! </h9>

На этом все, красивых вам сайтов!

Похожие записи: