Как подключить шрифт на сайте
Подключить любой шрифт для Вашего сайта довольно просто и быстро.
Общий алгоритм подключения шрифтов заключается в следующем - в директории темы расположена папка под названием fonts (её необходимо создать, если её там нет), в эту папку кидаем файлы скачанного нами шрифта.
После этого, находим файл стилей (например, style.css), или создаём новый, и добавляем в документ следующий код:
@font-face {
font-family: test; /*вместо test пишем название нашего шрифта*/
src: url(fonts/test.ttf); /*внутри скобок прописываем путь к файлу шрифта*/}
Далее, нам необходимо подключить файл стиля, в котором прописан код подключения нового шрифта, к нашему сайту. Для того, чтобы это сделать, необходимо в файле index.php в теге <head> написать следующий код:
<link rel="stylesheet" href="/style.css">
При этом, в значении атрибута href необходимо написать путь к нашему файлу стилей, в котором у нас уже подключён наш шрифт.
Вот и всё! Теперь мы можем его использовать.
Пример подключения шрифта Open Sans для системы управления контентом Joomla!
- Находим шрифт через поисковик и скачиваем его.
- В корневой папке сайта на Joomla ищем папку templates, переходим в папку с активным шаблоном.
- Ищем в в директории с шаблоном файл style.css (он может находится в папке css), открываем его.
- Переходим в конец документа и пишем туда следующий код: @font-face { font-family: Open Sans; src: fonts/OpenSans.ttf[название файла] }
- Переходим в папку fonts в папке активного шаблона.
- Скидываем туда файл скачанного шрифта. [Если файл style.css ещё не подключен к сайту]
- Ищем файл index.php (или head.php, или header.php, или template.php и т.д. в зависимости от выбранного шаблона) и между открывающим и закрывающим тегом head пишем следующий код:
Пример использования шрифта в файле style.css:
h1 {
font-family: “Open Sans”;
}
Пример подключения шрифта Open Sans для системы управления контентом Wordpress
Алгоритм абсолютно такой же, за исключением директорий: файл стиля находится в папке <адрес_сайта>/wp_content/themes/<активная_тема>/css/style.css
Папка с шрифтами у сайта на Wordpress находится по адресу <адрес_сайта>/wp_content/themes/<активная_тема>/fonts/
Файл header.php, куда вписывается код подключения файлов стилей, находится в директории <адрес_сайта>/wp_content/themes/<активная_тема>/
Как подключить Google шрифт для сайта
Также существует дополнительный простой путь подключения шрифта без скачивания файлов и прописывания кода в файле стилей.
Переходим на сайт fonts.google.com, ищем там требуемый шрифт и открываем страницу с ним. В правом верхнем углу находится кнопка «Select this font», при нажатии на которую появится окно с кодом тега <link>, который просто нужно добавить в файл header.php. После этого шрифт уже можно использовать.
Рассмотрим пример подобного подключения для системы 1С-Битрикс.
На сайте шрифтов гугла есть интересный шрифт Roboto (fonts.google.com/specimen/Roboto). После нажатия кнопки появился следующий код:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Открываем корневую папку сайта, переходим по пути bitrix/templates/<мой_шаблон>/header.php и внутри тега <head> вставляем код выше. Вот и всё, новый шрифт подключен!
Well done!
