смена гарнитуры в google fonts

[cyklop77]

помогите пожалуйста разобраться

 

скачать и подключил шрифт из хранилища google. не понимаю как мне использовать гарнитуру bold. если я запишу так

font: bold 24px 'Titillium', arial, sans-serif;

, то сработает именно гарнитура bold из хранилища google или просто браузер своими средствами добавит жирность?

Edited November 25, 2013 by cyklop77

[wwt]

своими средствами добавит.

 

Для примера код с гуглфонта для двух стилей одного шрифта:

@font-face {  font-family: 'Titillium Web';  font-style: normal;  font-weight: 400;  src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/7XUFZ5tgS-tD6QamInJTcdGU7DQ8I6RFMlK0vgclk7w.woff) format('woff');}@font-face {  font-family: 'Titillium Web';  font-style: normal;  font-weight: 700;  src: local('Titillium WebBold'), local('TitilliumWeb-Bold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr0bathaSTBR2c4i13_wzlb0.woff) format('woff');}

Но вторая переопределит первую. Так что лучше сделать вот так:

@font-face {  font-family: 'Titillium Web';  font-style: normal;  font-weight: 400;  src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/7XUFZ5tgS-tD6QamInJTcdGU7DQ8I6RFMlK0vgclk7w.woff) format('woff');}@font-face {  font-family: 'Titillium Web Bold';  font-style: normal;  font-weight: 700;  src: local('Titillium WebBold'), local('TitilliumWeb-Bold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr0bathaSTBR2c4i13_wzlb0.woff) format('woff');}

И где нужен жирный использовать шрифт "Titillium Web Bold", а где не нужен "Titillium Web"

Edited November 25, 2013 by wwt

[cyklop77]

ну подгружаю я конечно. так 

@import url('http://www.google.com/fonts#UsePlace:use/Collection:Titillium+Web:400,600,700italic,300');

записать например так 

font-weight: 400;

можно. а так

font-weight: 700italic;

совсем не по феншую ведь...

Edited November 25, 2013 by cyklop77

[Zverushka]

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

Да и вручную гугл фонт лопатить - а если они изменят внутренние ссылки на шрифты и сайт в один момент просто останется без шрифтов?...

Вот пример, доказывающий, что не браузер добавляет жирность (только первый жирный шрифт сделан браузером - остальное взятая ссылка по ключу)

http://jsfiddle.net/3T7Gy/1/

Edited November 25, 2013 by Zverushka

[wwt]

можно. а так font-weight: 700italic; совсем не по феншую ведь...

Так не то что не по феншую, это вообще не валидная запись.

font-weight задает жирность, стиль задает font-style

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

Да и вручную гугл фонт лопатить - а если они изменят внутренние ссылки на шрифты и сайт в один момент просто останется без шрифтов?...

Вот пример, доказывающий, что не браузер добавляет жирность (только первый жирный шрифт сделан браузером - остальное взятая ссылка по ключу)

http://jsfiddle.net/3T7Gy/1/

Вот у меня в системе установлен шрифт Chiller только в обычном начертании, ни полужирного, ни курсивного нет в семействе.

http://jsfiddle.net/LaYLj/

Браузер сам добавляет и курсивный и полужирный варианты.

[cyklop77]

 

можно. а так font-weight: 700italic; совсем не по феншую ведь...

Так не то что не по феншую, это вообще не валидная запись.

font-weight задает жирность, стиль задает font-style

 

так я про это и пишу. я взял эти значения из конца строки, которую гугл предоставляет

@import url('http://www.google.com/fonts#UsePlace:use/Collection:Titillium+Web:400,600,700italic,300');

Edited November 26, 2013 by cyklop77

[Zverushka]

@wwt, браузер добавляет, потому что нет начертания, а если бы было - он бы просто его взял. Видно же по моей ссылке .

[wwt]

@wwt, браузер добавляет, потому что нет начертания, а если бы было - он бы просто его взял. Видно же по моей ссылке .

Да вы правы. Я чото перемудрил. Пытался обьяснить ТС что браузер сам не подгрузит полужирный вариант шрифта сам если он не определен в @font-face  либо не установлен в системе)))

 

Не совсем то сам он берет, мы говорим ему какой вариант когда брать если подгружаем шрифт сами:

@font-face {  font-family: 'Titillium Web';/*какое имя */  font-style: normal;/*какой флаг использовать для этого варианта*/  font-weight: 400;/*какой флаг использовать для этого варианта*//*и далее какой конкретно шрифт использовать если будут указаны данные флаги*/  src: local('Titillium WebBold'), local('TitilliumWeb-Bold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr0bathaSTBR2c4i13_wzlb0.woff) format('woff');}

http://jsfiddle.net/3T7Gy/4/ вот тут это должно быть видно

Edited November 26, 2013 by wwt