Font Face Local
I've just downloaded a font that has font-weight 200 to 800, from here https://tokotype.github.io/plusjakarta-sans/ . It seems it doesn't have the example so I made one.
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-ExtraLight.woff2') format('woff2'), url('../fonts/PlusJakartaSans-ExtraLight.woff') format('woff');
font-weight: 200;
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-ExtraLightItalic.woff2') format('woff2'), url('../fonts/PlusJakartaSans-ExtraLightItalic.woff') format('woff');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-Light.woff2') format('woff2'), url('../fonts/PlusJakartaSans-Light.woff') format('woff');
font-weight: 300;
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-LightItalic.woff2') format('woff2'), url('../fonts/PlusJakartaSans-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'), url('../fonts/PlusJakartaSans-Regular.woff') format('woff');
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-Italic.woff2') format('woff2'), url('../fonts/PlusJakartaSans-Italic.woff') format('woff');
font-style: italic;
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2'), url('../fonts/PlusJakartaSans-Medium.woff') format('woff');
font-weight: 500;
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-MediumItalic.woff2') format('woff2'), url('../fonts/PlusJakartaSans-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2'), url('../fonts/PlusJakartaSans-SemiBold.woff') format('woff');
font-weight: 600;
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-SemiBoldItalic.woff2') format('woff2'), url('../fonts/PlusJakartaSans-SemiBoldItalic.woff') format('woff');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2'), url('../fonts/PlusJakartaSans-Bold.woff') format('woff');
font-weight: 700;
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-BoldItalic.woff2') format('woff2'), url('../fonts/PlusJakartaSans-BoldItalic.woff') format('woff');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2'), url('../fonts/PlusJakartaSans-ExtraBold.woff') format('woff');
font-weight: 800;
}
@font-face {
font-family: "JakartaSans";
src: url('../fonts/PlusJakartaSans-ExtraBoldItalic.woff2') format('woff2'), url('../fonts/PlusJakartaSans-ExtraBoldItalic.woff') format('woff');
font-weight: 800;
font-style: italic;
}