Как установить свой шрифт на сайт?

голоса: 0
Здравствуйте! Подскажите, пожалуйста, как установить свой шрифт при помощи @font-family ? Читал несколько форумов, но что-то не получается сделать! Я загрузил шрифт на сайт в папку fonts, создавал код <style> @font-family:{"Ekaterina-Velikaya-Two", scr: url http://semenfandukhov.narod.ru/fonts/Ekaterina-Velikaya-Two.ttf }, но что не вышло.. или подскажите другой способ.... Заранее всем спасибо
Адрес сайта http://semenfandukhov.narod.ru
| Автор: | Категория: Дизайн сайта

Ответов: 1

голоса: 0

Прочтите два материала:

  1. https://yraaa.ru/blogs/kak-postavit-svoj-shrift-na-sajt-ucoz
  2. http://htmlbook.ru/blog/svoi-shrift-na-stranitse

все достаточно подробно и ясно описано.

| Автор:
Спасибо большое за ответ! Но как раз по этим урокам я и делал...но увы! недопираю я
Sem Fandukhov,

Шрифт нужно подключать в таблице стилей CSS не так:

<style>
@font-face{
font-family:Ekaterina-Velikaya-Two
scr url(http://semenfandukhov.narod.ru/fonts/Ekaterina-Velikaya-Two.ttf)
</style> 

а вот так:

@font-face{
font-family:Ekaterina-Velikaya-Two;
scr url(/fonts/Ekaterina-Velikaya-Two.ttf);
}

далее применить данный шрифт у себя на сайте к нужному вам блоку с помощь http://htmlbook.ru/css/font-family

Yuri_Geruk,
Ок! понял. сейчас попробую!
Yuri_Geruk,

доброго времени суток!
Не получается подключить шрифт, наверное не туда прописала. Шрифт залила на сайт и в woff формате тоже. Нужно подключить к заголовкам в новостях. Работает только на моем компе, что я не так прописала? Судя по статье, нужно в html док. подключить к блоку, к какому? пробовала и к head и в body  

css:

@font-face {font-family:Propisi; scr: url(https://orenschool33.ucoz.net/BildSite/fonts/Propisi.ttf);}

.eBlock ---
.eTitle {font-family: Propisi,arial,verdana,helvetica,sans-serif;font-size:20pt;font-weight:bold;color:#0069A9; padding: 0 5px 5px 60px; background: url('https://orenschool33.ucoz.net/BildSite/806_9_2.jpg') no-repeat 0 1px;}

страницы сайта:

 <body>
 <style>
@font-fase {font-family:Propisi; src: url("https://orenschool33.ucoz.net/BildSite/fonts/Propisi.ttf"), url("https://orenschool33.ucoz.net/BildSite/fonts/Propisi.woff"), url("https://orenschool33.ucoz.net/BildSite/fonts/Propisi.woff2")}
 .eTitle {font-family: Propisi,arial,verdana,helvetica,sans-serif;}
 </style>

сайт: https://orenschool33.ucoz.net/

Спасибо

Анастасия Лошадурова,

строку 111 заменить на:

.eTitle {font-family: Propisi!important;font-size:20pt;/* font-weight:bold; */color:#0069A9;padding: 0 5px 5px 60px;background: url('https://orenschool33.ucoz.net/BildSite/806_9_2.jpg') no-repeat 0 1px;}

 

шрифт в стилях подключить так:

@font-fase {
    font-family:Propisi,'Comic Sans MS', cursive; 
    src: local('Propisi'), url('/BildSite/fonts/Propisi.ttf') format("ttf"),url('/BildSite/fonts/Propisi.woff') format("woff"),url('/BildSite/fonts/Propisi.woff2') format("woff2");
}

Yuri_Geruk,

Шрифт поменялся, только Прописи не установились, шрифт заголовока поменялся на шрифт с засечками вроде Times

Анастасия Лошадурова,
Советовал бы пользоваться гугл шрифтами.
...