добавить в свой сайт шрифт Roboto

[mstdmstd]

Всем привет,
Хочу добавить в свой сайт шрифт Roboto
Для этого захожу на https://www.google.com/fonts и выбираю настройки вроде
&nbsp; &nbsp; &nbsp; &nbsp;<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
Мне крайне не нравится что при способе с внешней ссылкой при работе на локальном сервере сайт лезет на гугл Это инода заметно тормозит
Поэтому нашел ссылку и скачал файл fonts-master.zip в 262 MiB
Судя по всему это ВСЕ файлы гугла?
В каталоге Roboto есть файлы :

• METADATA.pb
• Roboto-BlackItalic.ttf
• Roboto-Black.ttf
• Roboto-BoldItalic.ttf
• Roboto-Bold.ttf
• Roboto-Italic.ttf
• Roboto-LightItalic.ttf
• Roboto-Light.ttf
• Roboto-MediumItalic.ttf
• Roboto-Medium.ttf
• Roboto-Regular.ttf
• Roboto-ThinItalic.ttf
• Roboto-Thin.ttf
•  

Тут http://htmlbook.ru/blog/svoi-shrift-na-stranitse я нашел как подгрузить свой фонт
Но в описании подгружается 1 файл а каков синтаксис для нескольких файлов?
И какие файлы мне нужны Я хочу normal, bold, italic?

  Спасибо !

 

[Xenia Wanger]

Отдельно подключать каждый шрифт и добавлять font-style, font-weight, смотря что надо.

[Джулия]

конвертируйте шрифты с расширением .ttf во все форматы для разных браузеров(https://everythingfonts.com/font-face) и пропишите в стилях подключение этих шрифтов.

[mstdmstd]

Сначала первый способ, В стилях я прописал :
 

@font-face {
    font-family: MyRobotoRegular;
    src: url(fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: MyRobotoBoldItalic;
    src: url(fonts/Roboto-BoldItalic.ttf);
}

@font-face {
    font-family: MyRobotoBold;
    src: url(fonts/Roboto-Bold.ttf);
}

@font-face {
    font-family: MyRobotoItalic;
    src: url(fonts/Roboto-Italic.ttf);
}

...

body {

    font-family: 'MyRobotoRegular', Arial, Verdana, Tahoma, sans-serif;

И теперь получается что что MyRobotoRegular - основной фонт моего класса?
Если же мне нужно к этому фонту добавить свойства Bold, Italic b если эти свойства добавить в стилях - то это работать не будет, а надо назначать font-family,...
Так?


Джулия а предлагаемый Вами способ лучше ?

И подскажите какой-нить фонт который наверняка есть в системе с очень отличным видом - хочется для тестирования если мой фонт не найден...
 

[Джулия]

для всех браузеров надо подключать шрифты с разным расширением, если вы хотите подключать с локального сервера. На локальном сервере вам надо создать папку fonts, конвертировать шрифты .ttf и правильно прописать пути к шрифту в style.css

если вы конвертируете шрифт(.ttf) на том ресурсе,что я вам написала, то получите все нужные расширения.

я подключаю шрифт вот так: http://prntscr.com/bpfg0w

и не надо прописывать для них bold, light. Вы конвертируете изначально(RobotoBold.ttf, RobotoLignt.ttf) уже с жирным, тонким начертанием шрифта.

у меня в проектах очень часто используется шрифт Roboto - очень хороший веб-шрифт, могу ещё посоветовать OpenSans, PTSans. Но Roboto лучше.

 

 

Edited July 6, 2016 by Джулия