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;
}

Subscribe to You Live What You Learn

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]
Subscribe