Форум Сайтостроение Веб-строительство

Как установить Google Fonts на свой сайт?

JB
На сайте с 11.06.2014
Offline
1
JohnnyBJJ
2451

Доброго времени суток.

Подскажите пожалуйста, как установить Google Fonts на свой сайт?

Вариант с 

@import url(http://fonts.googleapis.com/css?family=Poiret+One&subset=latin,cyrillic);
не совсем подходит, так как изредка бывают какие то глюки с гуглом, и в эти моменты шрифт на сайте не отображается. Да и замедляет это все загрузку страниц.

Возможно ли установить шрифт непосредственно разместив его в какой то из папок на сервере? Я скачал с сайта гугла архив со шрифтом, распаковал в одну из папок и там оказалось два файлика:

OFL.txt
PoiretOne-Regular.ttf

Как, где и что необходимо прописать в стилях, что бы на сайте отображался скачанный шрифт?

Заранее благодарю за любую помощь!

P.S. Попробовал заменить 

@import url(http://fonts.googleapis.com/css?family=Poiret+One&subset=latin,cyrillic);
на следующий код (ссылка на папку в которую разархивировал скачанный с Google Fonts архив): 

@import url(http://file:///E:/Biryukovych/fonts/Poiret_One/PoiretOne-Regular.ttf);

Но, увы, результата достиг не полностью....а именно на FireFox шрифт отображается тот который нужен, а вот Chrome его не показывает :-(

SocFishing
На сайте с 26.09.2013
Offline
118
SocFishing
#1

Зайдите по

http://fonts.googleapis.com/css?family=Poiret+One&subset=latin,cyrillic


<style>
@font-face {
font-family: 'Poiret One';
font-style: normal;
font-weight: 400;
src: local('Poiret One'), local('PoiretOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/poiretone/v2/cKr_e199f0xMkxMkRbEJXxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
</style>

скачайте и пропишите локально путь до

http://themes.googleusercontent.com/static/fonts/poiretone/v2/cKr_e199f0xMkxMkRbEJXxsxEYwM7FgeyaSgU71cLG0.woff

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

★Сервис идентифицирует (https://socfishing.com/?utm_source=searchengines) посетителей вашего сайта и предоставляет их профили ВКонтакте, Телефон, Почта! Цены копеечные, работаем 8 лет.
JB
На сайте с 11.06.2014
Offline
1
JohnnyBJJ
#2

SocFishing, спасибо Вам огромное!

1. Сначала, перешел по ссылке, указанной в коде (который вставлял в файл style.css):

@import url(http://fonts.googleapis.com/css?family=Poiret+One&subset=latin,cyrillic);

2. Открылась страничка з указанными стилистическими данными и ссылкой на скачивание необходимого мне файла.

3. Скопировал себе в style.css все кроме ссылки указанной в src

4. По той ссылке (указанной в src) перешел и скачал необходимый мне файлик с расширением .woff

5. Разместил его в одно из папок своего сайта (у меня это /fonts)

6. В своем файле style.css в @font-face { указал: 

src: url(местонахождение файла .woff у меня на сайте);

Проблема решена. Еще раз спасибо большое SocFishing !!!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий