Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save preetampvp/0226313cf470ac453a6c51c98710baf0 to your computer and use it in GitHub Desktop.
Save preetampvp/0226313cf470ac453a6c51c98710baf0 to your computer and use it in GitHub Desktop.
Montserrat Font Family Styles (Montserrat, Montserrat Alternates, Montserrat Subrayada, Montserrat Arabic). Weights, Font feature settings, Download sources…
/* == Montserrat Font Family Styles == */
/* @group Montserrat
-------------------------------------------------------------- */
/* = Weights Montserrat
-------------------------------------------------------------- */
.thin {
/* Montserrat Thin = 100 */
font-weight: 100;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.extralight {
/* Montserrat Extra Light = 200 */
font-weight: 200;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.light {
/* Montserrat Light = 300 */
font-weight: 300;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.regular {
/* Montserrat Regular = 400 */
font-weight: 400;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.medium {
/* Montserrat Medium = 500 */
font-weight: 500;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.semibold {
/* Montserrat Semi-bold = 600 */
font-weight: 600;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.bold {
/* Montserrat Bold = 700 */
font-weight: 700;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.extrabold {
/* Montserrat Extra Bold = 800 */
font-weight: 800;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.black {
/* Montserrat Black = 900 */
font-weight: 900;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
/* @end Montserrat group */
/* @group Montserrat Alternates
-------------------------------------------------------------- */
/* = Weights Montserrat Alternates
-------------------------------------------------------------- */
.thin-alternates {
/* Montserrat Alternates Thin = 100 */
font-weight: 100;
font-family: "Montserrat Alternates", "Open Sans", Helvetica, Arial, sans-serif;
}
.extralight-alternates {
/* Montserrat Alternates Extra Light = 200 */
font-weight: 200;
font-family: "Montserrat Alternates", "Open Sans", Helvetica, Arial, sans-serif;
}
.light-alternates {
/* Montserrat Alternates Light = 300 */
font-weight: 300;
font-family: "Montserrat Alternates", "Open Sans", Helvetica, Arial, sans-serif;
}
.regular-alternates {
/* Montserrat Alternates Regular = 400 */
font-weight: 400;
font-family: "Montserrat Alternates", "Open Sans", Helvetica, Arial, sans-serif;
}
.medium-alternates {
/* Montserrat Alternates Medium = 500 */
font-weight: 500;
font-family: "Montserrat Alternates", "Open Sans", Helvetica, Arial, sans-serif;
}
.semibold-alternates {
/* Montserrat Alternates Semi-bold = 600 */
font-weight: 600;
font-family: "Montserrat Alternates", "Open Sans", Helvetica, Arial, sans-serif;
}
.bold-alternates {
/* Montserrat Alternates Bold = 700 */
font-weight: 700;
font-family: "Montserrat Alternates", "Open Sans", Helvetica, Arial, sans-serif;
}
.extrabold-alternates {
/* Montserrat Alternates Extra Bold = 800 */
font-weight: 800;
font-family: "Montserrat Alternates", "Open Sans", Helvetica, Arial, sans-serif;
}
.black-alternates {
/* Montserrat Alternates Black = 900 */
font-weight: 900;
font-family: "Montserrat Alternates", "Open Sans", Helvetica, Arial, sans-serif;
}
/* @end Montserrat Alternates group */
/* @group Montserrat Subrayada
-------------------------------------------------------------- */
/* = Weights Montserrat Subrayada
-------------------------------------------------------------- */
.regular-subrayada {
/* Montserrat Subrayada Regular = 400 */
font-weight: 400;
font-family: "Montserrat Subrayada", "Open Sans", Helvetica, Arial, sans-serif;
}
.bold-subrayada {
/* Montserrat Subrayada Bold = 700 */
font-weight: 700;
font-family: "Montserrat Subrayada", "Open Sans", Helvetica, Arial, sans-serif;
}
/* @end Montserrat Subrayada group */
/* @group Montserrat Arabic
-------------------------------------------------------------- */
/* = Weights Montserrat Arabic (see Credits and URLs)
-------------------------------------------------------------- */
.thin-arabic {
/* Montserrat Thin = 100 */
font-weight: 100;
font-family: "Montserrat-Arabic", "Geeza Pro", "Noto Kufi Arabic", "Arial Unicode MS", Helvetica, Arial, sans-serif;}
.extralight-arabic {
/* Montserrat Arabic Extra Light = 200 */
font-weight: 200;
font-family: "Montserrat-Arabic", "Geeza Pro", "Noto Kufi Arabic", "Arial Unicode MS", Helvetica, Arial, sans-serif;}
.light-arabic {
/* Montserrat Arabic Light = 300 */
font-weight: 300;
font-family: "Montserrat-Arabic", "Geeza Pro", "Noto Kufi Arabic", "Arial Unicode MS", Helvetica, Arial, sans-serif;}
.regular-arabic {
/* Montserrat Arabic Regular = 400 */
font-weight: 400;
font-family: "Montserrat-Arabic", "Geeza Pro", "Noto Kufi Arabic", "Arial Unicode MS", Helvetica, Arial, sans-serif;}
.medium-arabic {
/* Montserrat Arabic Medium = 500 */
font-weight: 500;
font-family: "Montserrat-Arabic", "Geeza Pro", "Noto Kufi Arabic", "Arial Unicode MS", Helvetica, Arial, sans-serif;}
.semibold-arabic {
/* Montserrat Arabic Semi-bold = 600 */
font-weight: 600;
font-family: "Montserrat-Arabic", "Geeza Pro", "Noto Kufi Arabic", "Arial Unicode MS", Helvetica, Arial, sans-serif;}
.bold-arabic {
/* Montserrat Arabic Bold = 700 */
font-weight: 700;
font-family: "Montserrat-Arabic", "Geeza Pro", "Noto Kufi Arabic", "Arial Unicode MS", Helvetica, Arial, sans-serif;}
.extrabold-arabic {
/* Montserrat Arabic Extra Bold = 800 */
font-weight: 800;
font-family: "Montserrat-Arabic", "Geeza Pro", "Noto Kufi Arabic", "Arial Unicode MS", Helvetica, Arial, sans-serif;}
.black-arabic {
/* Montserrat Arabic Black = 900 */
font-weight: 900;
font-family: "Montserrat-Arabic", "Geeza Pro", "Noto Kufi Arabic", "Arial Unicode MS", Helvetica, Arial, sans-serif;}
/* @end Montserrat Arabic */
/* @group Montserrat Font-Feature Settings
-------------------------------------------------------------- */
.montserrat-fontfeatures-style-1 {
/* Number Case = Old-Style (onum)
Character Alternatives = Stylistic (salt) */
moz-font-feature-settings:"onum" 1, "salt" 1;
-ms-font-feature-settings:"onum" 1, "salt" 1;
-o-font-feature-settings:"onum" 1, "salt" 1;
-webkit-font-feature-settings:"onum" 1, "salt" 1;
font-feature-settings:"onum" 1, "salt" 1;
}
.montserrat-fontfeatures-style-2 {
/* Number Spacing = Tabular (tnum) */
-moz-font-feature-settings:"tnum" 1;
-ms-font-feature-settings:"tnum" 1;
-o-font-feature-settings:"tnum" 1;
-webkit-font-feature-settings:"tnum" 1;
font-feature-settings:"tnum" 1;
}
.montserrat-fontfeatures-style-3 {
/* Number Case = Old-Style (onum) */
-moz-font-feature-settings:"onum" 1;
-ms-font-feature-settings:"onum" 1;
-o-font-feature-settings:"onum" 1;
-webkit-font-feature-settings:"onum" 1;
font-feature-settings:"onum" 1;
}
.montserrat-fontfeatures-style-4 {
/* Number Case = Old-Style (onum)
Number Spacing = Tabular (tnum) */
-moz-font-feature-settings:"onum" 1, "tnum" 1;
-ms-font-feature-settings:"onum" 1, "tnum" 1;
-o-font-feature-settings:"onum" 1, "tnum" 1;
-webkit-font-feature-settings:"onum" 1, "tnum" 1;
font-feature-settings:"onum" 1, "tnum" 1;
}
/* @end Montserrat Font-Feature Settings group */
/* @group Montserrat Import Embedd Settings
-------------------------------------------------------------- */
/* = Import Montserrat Font with all weights and full language
support, which includes Vietnamese, Latin Extended and Latin
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese');
</style>
*/
/* = Import Montserrat Subrayada Font with all weights and support for Latin
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat+Subrayada:400,700');
</style>
*/
/* = Import Montserrat Alternates Font with all weights with support for Latin,
Latin Extended and Vietnamese.
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese');
</style>
*/
/* @end Montserrat Import Embedd Settings group */
/* @group Credits and URLs
-------------------------------------------------------------- */
/* = [Montserrat Font Family URLs]
Montserrat Family at Google Fonts: https://fonts.google.com/specimen/Montserrat
Montserrat Family at Github: https://github.com/JulietaUla/Montserrat
Montserrat Subrayada at Google Fonts: https://fonts.google.com/specimen/Montserrat+Subrayada
Montserrat Subrayada at Github: https://github.com/google/fonts/tree/master/ofl/montserratsubrayada
Montserrat Arabic at Github: https://github.com/Gue3bara/Montserrat-Arabic
Montserrat issue pull for Arabic at Github: https://github.com/JulietaUla/Montserrat/issues/32
*/
/* = [Font-Feature Sandbox Playground URL]
CSS 3 Font-Feature-Settings OpenType demo: http://clagnut.com/sandbox/css3/
*/
/* @end Credits and URLs group */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment