Skip to content

Instantly share code, notes, and snippets.

@g-cqd
Last active February 8, 2021 17:28
Show Gist options
  • Select an option

  • Save g-cqd/a5798676653aa7d484f79fe52d14213b to your computer and use it in GitHub Desktop.

Select an option

Save g-cqd/a5798676653aa7d484f79fe52d14213b to your computer and use it in GitHub Desktop.
Font-Face Starter Pack
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-Thin.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-Thin.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-Thin.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-Thin.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-ThinItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-ThinItalic.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-ExtraLight.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-ExtraLight.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-ExtraLightItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-ExtraLightItalic.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-Light.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-Light.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-LightItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-LightItalic.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-Light.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-Light.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-LightItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-LightItalic.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-Regular.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-Italic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-Italic.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-Regular.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-Regular.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-Italic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-Italic.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-Medium.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-Medium.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-Medium.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-Medium.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-MediumItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-MediumItalic.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-SemiBold.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-SemiBold.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-SemiBold.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-SemiBoldItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-SemiBoldItalic.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-Bold.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-Bold.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-Bold.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-Bold.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-BoldItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-BoldItalic.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-ExtraBold.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-ExtraBold.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-ExtraBoldItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-ExtraBoldItalic.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-Black.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-Black.woff") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-Black.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-Black.woff") format("woff");
}
@font-face {
font-family: "Inter Display";
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-BlackItalic.woff2") format("woff2"),
url("https://rsms.me/inter/font-files/InterDisplay-BlackItalic.woff") format("woff");
}
@font-face {
font-family: "Inter Var";
font-weight: 100 900;
font-style: normal;
font-named-instance: "Regular";
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-roman.var.woff2") format("woff2");
}
@font-face {
font-family: "Inter Var";
font-weight: 100 900;
font-style: italic;
font-named-instance: "Italic";
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-italic.var.woff2") format("woff2");
}
@font-face {
font-family: "Inter Display Var";
font-weight: 100 900;
font-style: normal;
font-named-instance: "Regular";
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-roman.var.woff2") format("woff2");
}
@font-face {
font-family: "Inter Display Var";
font-weight: 100 900;
font-style: italic;
font-named-instance: "Italic";
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-italic.var.woff2") format("woff2");
}
@font-face {
font-family: "Inter Var Alt";
font-weight: 100 900;
font-style: normal;
font-named-instance: "Regular";
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-roman.var.woff2") format("woff2");
}
@font-face {
font-family: "Inter Var Alt";
font-weight: 100 900;
font-style: italic;
font-named-instance: "Italic";
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter-italic.var.woff2") format("woff2");
}
@font-face {
font-family: "Inter Display Var Alt";
font-weight: 100 900;
font-style: normal;
font-named-instance: "Regular";
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-roman.var.woff2") format("woff2");
}
@font-face {
font-family: "Inter Display Var alt";
font-weight: 100 900;
font-style: italic;
font-named-instance: "Italic";
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay-italic.var.woff2") format("woff2");
}
@font-face {
font-family: "Inter Var Exp";
font-weight: 100 900;
font-style: oblique 0deg 10deg;
font-display: swap;
src: url("https://rsms.me/inter/font-files/Inter.var.woff2") format("woff2");
}
@font-face {
font-family: "Inter Display Var Exp";
font-weight: 100 900;
font-style: oblique 0deg 10deg;
font-display: swap;
src: url("https://rsms.me/inter/font-files/InterDisplay.var.woff2") format("woff2");
}
@font-face {
font-family: "Hack";
src: url("https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/fonts/hack-regular.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/fonts/hack-regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Hack";
src: url("https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/fonts/hack-bold.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/fonts/hack-bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Hack";
src: url("https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/fonts/hack-italic.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/fonts/hack-italic.woff") format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Hack";
src: url("https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/fonts/hack-bolditalic.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/fonts/hack-bolditalic.woff") format("woff");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Thin.woff2") format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-ThinItalic.woff2") format("woff2");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-ExtraLight.woff2") format("woff2");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-ExtraLightItalic.woff2") format("woff2");
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-LightItalic.woff2") format("woff2");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-MediumItalic.woff2") format("woff2");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-BoldItalic.woff2") format("woff2");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-ExtraBold.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2");
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Fira Code";
src: url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/woff2/FiraCode-Light.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/woff/FiraCode-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Fira Code";
src: url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/woff/FiraCode-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Fira Code";
src: url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/woff2/FiraCode-Medium.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/woff/FiraCode-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Fira Code";
src: url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/woff2/FiraCode-SemiBold.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/woff/FiraCode-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Fira Code";
src: url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/woff/FiraCode-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Fira Code Var";
src: url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/woff2/FiraCode-VF.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5/distr/woff/FiraCode-VF.woff") format("woff");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment