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

Несколько вопросов по font-face

K
На сайте с 10.01.2015
Offline
110
Kepus
881

Всем доброго времени суток!

Начал использовать @font-face для загрузки шрифтов. Хотелось бы узнать, правильно ли я это делаю. Собственно все работает, но есть пара вопросов:

1. У меня два url и src, это нормально?

2. В настоящее время я подгружаю три шрифта: Regular, Bold и Italic. Все они в обязательном порядке грузятся на устройство, если прописаны в основном css ?

3. Откуда лучше всего скачивать шрифты для сайтов, чтобы они были уже проверены и готовы к работе (сконвертированы в форматы для веба) ?

Пример моего кода: 

@font-face {

    font-family: "Helvetica2";

    src: url("https://*.com/wp-content/themes/theme/fonts/HelveticaRegular/HelveticaRegular.eot");

    src: url("https://*.com/wp-content/themes/theme/fonts/HelveticaRegular/HelveticaRegular.eot?#iefix")format("embedded-opentype"),

    url("https://*.com/wp-content/themes/theme/fonts/HelveticaRegular/HelveticaRegular.woff") format("woff"),

    url("https://*.com/wp-content/themes/theme/fonts/HelveticaRegular/HelveticaRegular.ttf") format("truetype");

    font-style: normal;

    font-weight: normal;

}

@font-face {

    font-family: "Helvetica2";

    src: url("https://*.com/wp-content/themes/theme/fonts/HelveticaBold/HelveticaBold.eot");

    src: url("https://*.com/wp-content/themes/theme/fonts/HelveticaBold/HelveticaBold.eot?#iefix")format("embedded-opentype"),

    url("https://*.com/wp-content/themes/theme/fonts/HelveticaBold/HelveticaBold.woff") format("woff"),

    url("https://*.com/wp-content/themes/theme/fonts/HelveticaBold/HelveticaBold.ttf") format("truetype");

    font-style: normal;

    font-weight: bold;

}

@font-face {

    font-family: "Helvetica2";

    src: url("https://*.com/wp-content/themes/theme/fonts/HelveticaItalic/HelveticaItalic.eot");

    src: url("https://*.com/wp-content/themes/theme/fonts/HelveticaItalic/HelveticaItalic.eot?#iefix")format("embedded-opentype"),

    url("https://*.com/wp-content/themes/theme/fonts/HelveticaItalic/HelveticaItalic.woff") format("woff"),

    url("https://*.com/wp-content/themes/theme/fonts/HelveticaItalic/HelveticaItalic.ttf") format("truetype");

    font-style: italic;

    font-weight: normal;

}
tommy-gung
На сайте с 22.11.2006
Offline
303
tommy-gung
#1
Kepus:
1. У меня два url и src, это нормально?

#iefix

Kepus:
Все они в обязательном порядке грузятся на устройство, если прописаны в основном css ?

если шрифт установлен в устройстве, то не грузится с сайта

скачивать можно откуда угодно. только нужно учитывать, что не во всех шрифтах есть кириллица. ну это по необходимости

один из онлайн-конвертеров http://www.fontsquirrel.com/tools/webfont-generator

Здесь не могла быть ваша реклама
Помогите пожалуйста в лендингом В вебмастере появился ИКС! Google запустил обновление Page
K
На сайте с 10.01.2015
Offline
110
Kepus
#2
tommy-gung:
#iefix


если шрифт установлен в устройстве, то не грузится с сайта
скачивать можно откуда угодно. только нужно учитывать, что не во всех шрифтах есть кириллица. ну это по необходимости
один из онлайн-конвертеров http://www.fontsquirrel.com/tools/webfont-generator

Так мой вариант загрузки грамотный, или лучше SVD приделать и еще woff2 ?

Да и еще, допустим у меня прописан woff, ttf и еще пара. Устройство при загрузке сайта будет само себе выбирать один шрифт из этих расширений, либо оно загружает все, тем самым увеличивая время загрузки сайта?

Спасибо.

Как оптимизировать загрузку шрифтов Пользователи WhatsApp смогут выбирать Ускорение сайтов на WordPress
W
На сайте с 09.04.2013
Offline
46
webjey
#3
Kepus:
Да и еще, допустим у меня прописан woff, ttf и еще пара. Устройство при загрузке сайта будет само себе выбирать один шрифт из этих расширений, либо оно загружает все, тем самым увеличивая время загрузки сайта?

Загружает тот, который подходит. Качать шрифты можно например тут http://webfont.ru/ или генерировать самому. Так же рекомендую ознакомится с Grunt и Gulp, раз вы занимаетесь версткой.

tommy-gung
На сайте с 22.11.2006
Offline
303
tommy-gung
#4
Kepus:
Так мой вариант загрузки грамотный, или лучше SVD приделать и еще woff2 ?
Да и еще, допустим у меня прописан woff, ttf и еще пара. Устройство при загрузке сайта будет само себе выбирать один шрифт из этих расширений, либо оно загружает все, тем самым увеличивая время загрузки сайта?
Спасибо.

лучше и woff2, и svg

загружает только нужный, как ответили выше

Joker-jar
На сайте с 26.08.2010
Offline
167
Joker-jar
#5
Kepus:
Откуда лучше всего скачивать шрифты для сайтов, чтобы они были уже проверены и готовы к работе (сконвертированы в форматы для веба)?

Можно даже ничего не скачивать, если найти подходящий шрифт тут - https://www.google.com/fonts они проверены и готовы к работе.

werty1001
На сайте с 30.03.2008
Offline
82
werty1001
#6

Такой должен быть font-face сегодня, если вас не волнуют доисторические браузеры:


@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
  url('fonts/opensans_bold.woff2') format('woff2'),
  url('fonts/opensans_bold.woff') format('woff'),
  url('fonts/opensans_bold.ttf') format('truetype');
}

Можно также подключать из библиотеки гугла, но на мой взгляд это не всегда хорошо, ведь ваш сайт попадает в зависимость от стороннего сервиса, конечно шанс, что у гугла что-то упадет ничтожный, но зато они могут менять исходники как вздумается, помню когда выкатили woff2 остальные форматы просто убрали.

Магазин аккаунтов с балансом Litres,DNS,Ozon,Rotapost и еще 50+ других сервисов тут - vk.cc/7QK0Sk
Как оптимизировать загрузку шрифтов Google Fonts | Font Упал доход
K
На сайте с 10.01.2015
Offline
110
Kepus
#7
werty1001:
Такой должен быть font-face сегодня, если вас не волнуют доисторические браузеры: 

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 700;

  src: local('Open Sans Bold'), local('OpenSans-Bold'),

  url('fonts/opensans_bold.woff2') format('woff2'),

  url('fonts/opensans_bold.woff') format('woff'),

  url('fonts/opensans_bold.ttf') format('truetype');

}


Можно также подключать из библиотеки гугла, но на мой взгляд это не всегда хорошо, ведь ваш сайт попадает в зависимость от стороннего сервиса, конечно шанс, что у гугла что-то упадет ничтожный, но зато они могут менять исходники как вздумается, помню когда выкатили woff2 остальные форматы просто убрали.

Да, Google Font хорош, но мне нужен шрифт Helvetica)

---------- Добавлено 05.02.2016 в 20:52 ----------

Я все голову ломаю над тем, где скачать обычную Helvetica с поддержкой русского языка...

VHS
На сайте с 28.09.2007
Offline
142
VHS
#8
werty1001:
Такой должен быть font-face сегодня, если вас не волнуют доисторические браузеры:

http://caniuse.com/#search=woff

werty1001:
помню когда выкатили woff2 остальные форматы просто убрали.

открой цсс в осле и удивишься, что не все убрали... с woff на http://www.fontsquirrel.com/tools/webfont-generator генеришь себе что угодно. Однако нужно ли вгружать что-то еще, после первой ссылки?

Очень советую не пользоваться сторонними шрифтами вообще, а использовать метод http://css-live.ru/articles-css/bystraya-zagruzka-veb-shriftov-na-adaptivnyx-sajtax.html , шрифты генерировать из woff с обрезанием ненужных символов.

---------- Добавлено 05.02.2016 в 23:33 ----------

Kepus:
Я все голову ломаю над тем, где скачать обычную Helvetica с поддержкой русского языка...

Забанили в ПС?

https://yandex.ru/search/?text=%D1%88%D1%80%D0%B8%D1%84%D1%82%20helvetica%20%D1%80%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9%20%D1%81%D0%BA%D0%B0%D1%87%D0%B0%D1%82%D1%8C&lr=213

Берешь ttf, грузишь в генератор шрифтов, на выходе забираешь в нужном формате...

Как оптимизировать загрузку шрифтов Ускорение загрузки шрифтов на Ускорение сайтов на WordPress
werty1001
На сайте с 30.03.2008
Offline
82
werty1001
#9
VHS:
открой цсс в осле и удивишься, что не все убрали...

Они по агенту отдают нужный формат, круто, а я думал тупо забили.

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