How to use specific font styles with CSS, from Google fonts (ie. thin, extra-light..)
Google served font like Montserrat has a lot of different styles: Thin, Extra-Light, Light, Regular, etc.
I could not find a way to specify a style with CSS. Using Font-weight can access only some of them as can be seen in this CodePen
<p >This is 100 weight</p>
I want to use the Extra-Light style, but regular is the lightest I get.
Is there a straight forward solution to this?
Update: It was a browser problem. My Chrome has issues with fonts. The code i posted works just fine.
2 Answers 2
The Google fonts page will actually tell you how to do it and includes a weight select utility. If you want the thinnest style, this is it for Montserrat (different fonts have different weights available):
Compare that to yours, it has redundant weights and two errors ( href=’// instead of href https://fonts.googleapis.com/css?family=Montserrat:100,200,300″ rel=»stylesheet»>
Remember that you only want to specify those that you are actually going to use, as they will need to be downloaded, hence increasing your page’s load time.
Here is a working example for Montserrat. If 100 isn’t thin enough for you, you’re out of luck.
Как подключить полный шрифт?
Добрый день, не могу понять почему font-weight работает только в двух режимах:
Хотя из этого же браузера открываю google fonts (откуда я его и взял) демонстрацию шрифта и у них все значения работают:
Подключаю шрифт в css так:
в css свойствах указываю так:
- Вопрос задан более трёх лет назад
- 4061 просмотр
Простой 2 комментария
- Вконтакте
Потому что надо указывать все нужные начертания.
Чекбоксы:
Name already in use
Montserrat / fonts / webfonts / README.MD
- Go to file T
- Go to line L
- Copy path
- Copy permalink
- Open with Desktop
- View raw
- Copy raw contents Copy raw contents
Copy raw contents
Copy raw contents
The Montserrat Font Project
To use this font as a webfont, Montserrat.css is included.
You can import the file into your stylesheet as follows:
NOTE: The directory where the stylesheet is placed.
Then we can use it to style elements:
2. <link>ing a stylesheet
Similarly, you could link to the same asset as you would any other CSS filter, in the <head> of the HTML document rather than in the CSS:
NOTE: The directory where the stylesheet is placed.
Then we can use it to style elements:
Footer
© 2023 GitHub, Inc.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Шрифт Montserrat Regular 400
На данной странице представлен шрифт «Montserrat Regular» версии Version 7.200 из семейства Montserrat Family. Шрифт поддерживает латиницу, кириллицу, цифры, знаки препинания и пунктуации, прописные и строчные буквы. Шрифт «Montserrat Regular» Вы можете скачать бесплатно в форматах EOT, OTF, SVG, TTF, WOFF, WOFF2 по отдельности и ZIP-архивом размером 727.16 КБ на ВсеШрифты.рф
Информация о шрифте Montserrat Regular
Montserrat Regular 400
This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is available with a FAQ at: http://scripts.sil.org/OFL
Copyright 2011 The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat)
латинские буквы, русские буквы (кириллица), цифры, знаки препинания и пунктуации
верхний (прописные буквы) и нижний (строчные буквы)
Предварительный просмотр Montserrat Regular
Предварительный просмотр шрифта «Montserrat Regular» с прописными и строчными латинскими буквами (английский алфавит A-Z и a-z ).
Предварительный просмотр шрифта «Montserrat Regular» с прописными и строчными русскими буквами (кириллица, русский алфавит А-Я и а-я ).
Предварительный просмотр шрифта «Montserrat Regular» с цифрами ( 0 1 2 3 4 5 6 7 8 9 ).
Предварительный просмотр шрифта «Montserrat Regular» со знаками препинания и пунктуации ( , . / ? ; ‘ : » [ ] < >\ | `