Use Inter variable font (#5540)
This commit is contained in:
+2
-23
@@ -40,31 +40,10 @@ export function applyFonts(
|
||||
fontFamily: 'system' | 'theme',
|
||||
) {
|
||||
if (fontFamily === 'theme') {
|
||||
style.fontFamily =
|
||||
{
|
||||
// '100': 'Inter-Thin',
|
||||
// '200': 'Inter-ExtraLight',
|
||||
// '300': 'Inter-Light',
|
||||
// '500': 'Inter-Medium',
|
||||
// '700': 'Inter-Bold',
|
||||
// '900': 'Inter-Black',
|
||||
'100': 'Inter-Regular',
|
||||
'200': 'Inter-Regular',
|
||||
'300': 'Inter-Regular',
|
||||
'400': 'Inter-Regular',
|
||||
'500': 'Inter-SemiBold',
|
||||
'600': 'Inter-SemiBold',
|
||||
'700': 'Inter-SemiBold',
|
||||
'800': 'Inter-ExtraBold',
|
||||
'900': 'Inter-ExtraBold',
|
||||
}[style.fontWeight as string] || 'Inter-Regular'
|
||||
style.fontFamily = 'InterVariable'
|
||||
|
||||
if (style.fontStyle === 'italic') {
|
||||
if (style.fontFamily === 'Inter-Regular') {
|
||||
style.fontFamily = 'Inter-Italic'
|
||||
} else {
|
||||
style.fontFamily += 'Italic'
|
||||
}
|
||||
style.fontFamily += 'Italic'
|
||||
}
|
||||
|
||||
// fallback families only supported on web
|
||||
|
||||
+8
-88
@@ -7,101 +7,21 @@
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter-Regular';
|
||||
src: local('Inter-Regular'),
|
||||
url(/assets/fonts/inter/Inter-Regular.otf) format('opentype');
|
||||
font-weight: 400;
|
||||
font-family: 'InterVariable';
|
||||
src: local('InterVariable'),
|
||||
url(/assets/fonts/inter/InterVariable.ttf) format('truetype');
|
||||
font-weight: 300 1000;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter-Italic';
|
||||
src: local('Inter-Italic'),
|
||||
url(/assets/fonts/inter/Inter-Italic.otf) format('opentype');
|
||||
font-weight: 400;
|
||||
font-family: 'InterVariableItalic';
|
||||
src: local('InterVariableItalic'),
|
||||
url(/assets/fonts/inter/InterVariable-Italic.ttf) format('truetype');
|
||||
font-weight: 300 1000;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
/*
|
||||
@font-face {
|
||||
font-family: "Inter-Medium";
|
||||
src: local("Inter-Medium"), url(/assets/fonts/inter/Inter-Medium.otf) format("opentype");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter-MediumItalic";
|
||||
src: local("Inter-MediumItalic"), url(/assets/fonts/inter/Inter-MediumItalic.otf) format("opentype");
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Inter-SemiBold';
|
||||
src: local('Inter-SemiBold'),
|
||||
url(/assets/fonts/inter/Inter-SemiBold.otf) format('opentype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter-SemiBoldItalic';
|
||||
src: local('Inter-SemiBoldItalic'),
|
||||
url(/assets/fonts/inter/Inter-SemiBoldItalic.otf) format('opentype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
/*
|
||||
@font-face {
|
||||
font-family: "Inter-Bold";
|
||||
src: local("Inter-Bold"), url(/assets/fonts/inter/Inter-Bold.otf) format("opentype");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter-BoldItalic";
|
||||
src: local("Inter-BoldItalic"), url(/assets/fonts/inter/Inter-BoldItalic.otf) format("opentype");
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Inter-ExtraBold';
|
||||
src: local('Inter-ExtraBold'),
|
||||
url(/assets/fonts/inter/Inter-ExtraBold.otf) format('opentype');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter-ExtraBoldItalic';
|
||||
src: local('Inter-ExtraBoldItalic'),
|
||||
url(/assets/fonts/inter/Inter-ExtraBoldItalic.otf) format('opentype');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
/*
|
||||
@font-face {
|
||||
font-family: "Inter-Black";
|
||||
src: local("Inter-Black"), url(/assets/fonts/inter/Inter-Black.otf) format("opentype");
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter-BlackItalic";
|
||||
src: local("Inter-BlackItalic"), url(/assets/fonts/inter/Inter-BlackItalic.otf) format("opentype");
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
*/
|
||||
|
||||
/**
|
||||
* BEGIN STYLES
|
||||
|
||||
Reference in New Issue
Block a user