Skip to content

Instantly share code, notes, and snippets.

@aasmpro

aasmpro/JetBrainsMono.css

Last active October 11, 2022 17:10
Show Gist options
  • Save aasmpro/95776294ecf48bd7d0562504bad848ea to your computer and use it in GitHub Desktop.
Save aasmpro/95776294ecf48bd7d0562504bad848ea to your computer and use it in GitHub Desktop.
Download ZIP
JetBrains Mono css / scss / font-face / stylesheets
Raw
JetBrainsMono.css
/* 0. extract fonts into `JetBrainsMono` folder */
/* 1. check fonts `urls` with your directory structure */
/* normal fonts */
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 100;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-Thin.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-Thin.woff2") format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 200;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-ExtraLight.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-ExtraLight.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 300;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-Light.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-Light.woff2") format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 400;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 500;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-Medium.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-Medium.woff2") format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 600;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-SemiBold.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 700;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-Bold.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-Bold.woff2") format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 800;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-ExtraBold.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-ExtraBold.woff2")
format("woff2");
}
/* italic fonts */
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 100;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-ThinItalic.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-ThinItalic.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 200;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-ExtraLightItalic.ttf")
format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-ExtraLightItalic.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 300;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-LightItalic.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-LightItalic.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 400;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-Italic.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-Italic.woff2") format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 500;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-MediumItalic.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-MediumItalic.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 600;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-SemiBoldItalic.ttf")
format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-SemiBoldItalic.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 700;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-BoldItalic.ttf") format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-BoldItalic.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 800;
src: url("../fonts/JetBrainsMono/ttf/JetBrainsMono-ExtraBoldItalic.ttf")
format("truetype");
src: url("../fonts/JetBrainsMono/webfonts/JetBrainsMono-ExtraBoldItalic.woff2")
format("woff2");
}
Raw
JetBrainsMono.scss
// 0. extract fonts into `JetBrainsMono` folder
// 1. check $fonts-path with your directory structure
$fonts-path: "../fonts/JetBrainsMono";
// normal fonts
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 100;
src: url($fonts-path + "/ttf/JetBrainsMono-Thin.ttf") format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-Thin.woff2") format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 200;
src: url($fonts-path + "/ttf/JetBrainsMono-ExtraLight.ttf") format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-ExtraLight.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 300;
src: url($fonts-path + "/ttf/JetBrainsMono-Light.ttf") format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-Light.woff2") format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 400;
src: url($fonts-path + "/ttf/JetBrainsMono-Regular.ttf") format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-Regular.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 500;
src: url($fonts-path + "/ttf/JetBrainsMono-Medium.ttf") format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-Medium.woff2") format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 600;
src: url($fonts-path + "/ttf/JetBrainsMono-SemiBold.ttf") format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-SemiBold.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 700;
src: url($fonts-path + "/ttf/JetBrainsMono-Bold.ttf") format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-Bold.woff2") format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: normal;
font-weight: 800;
src: url($fonts-path + "/ttf/JetBrainsMono-ExtraBold.ttf") format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-ExtraBold.woff2")
format("woff2");
}
// italic fonts
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 100;
src: url($fonts-path + "/ttf/JetBrainsMono-ThinItalic.ttf") format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-ThinItalic.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 200;
src: url($fonts-path + "/ttf/JetBrainsMono-ExtraLightItalic.ttf")
format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-ExtraLightItalic.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 300;
src: url($fonts-path + "/ttf/JetBrainsMono-LightItalic.ttf")
format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-LightItalic.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 400;
src: url($fonts-path + "/ttf/JetBrainsMono-Italic.ttf") format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-Italic.woff2") format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 500;
src: url($fonts-path + "/ttf/JetBrainsMono-MediumItalic.ttf")
format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-MediumItalic.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 600;
src: url($fonts-path + "/ttf/JetBrainsMono-SemiBoldItalic.ttf")
format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-SemiBoldItalic.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 700;
src: url($fonts-path + "/ttf/JetBrainsMono-BoldItalic.ttf") format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-BoldItalic.woff2")
format("woff2");
}
@font-face {
font-family: JetBrainsMono;
font-style: italic;
font-weight: 800;
src: url($fonts-path + "/ttf/JetBrainsMono-ExtraBoldItalic.ttf")
format("truetype");
src: url($fonts-path + "/webfonts/JetBrainsMono-ExtraBoldItalic.woff2")
format("woff2");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment