Автор: WDS
Иногда возникает ситуация, когда нужно при создании сайта, компонента, модуля использовать определённые, возможно редкие красивые шрифты, но есть сомнения, что данные шрифты установлены на компьютерах пользователей. Что бы страница выглядела так же хорошо, как и у разработчика, необходимо установить файлы с этими шрифтами на сайт (в компонент, модуль), а потом уже использовать их в файлах CSS в обычном варианте. Сделать это довольно просто.
Для начала скачайте нужные шрифты для сайта (в виде файлов) и сохраните их на компьютере. Затем создайте на сайте (в создаваемом компоненте, модуле) папку fonts и загрузите в эту папку все файлы необходимых шрифтов.
Далее откройте файл CSS создаваемого элемента и пропишите в нём эти файлы и путь к ним. Представим себе, что у вас имеется два шрифта, которые вы установили - Coventry и Pompadur. В этом случае в самом начале файла CSS нужно прописать такие строки:
1 @font-face {
2 font-family: Coventry;
3 src: url(/components/com_my_component/fonts/coventry.otf);
4 }
5 @font-face {
6 font-family: Pompadur;
7 src: url(/components/com_my_component/fonts/pompadur.ttf);
8 }
Теперь вы можете использовать установленные шрифты в любом месте страницы. Для этого нужно вписать их название точно так же, как и названия основных шрифтов, например,
9 p.num_mess {
10 font-family: Coventry;
11 font-weight: bold;
12 font-size: 18px;
13 color: blue;
14 }
Названия шрифтов, состоящие их нескольких слов, должны быть взяты в кавычки.