style.css

@font-face {
    font-family: 'ChakraPetch';
    src: url(data-base64:~/assets/font/ChakraPetch-Bold.ttf);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'ChakraPetch';
    src: url(data-base64:~/assets/font/ChakraPetch-BoldItalic.ttf);
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'ChakraPetch';
    src: url(data-base64:~/assets/font/ChakraPetch-Italic.ttf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'ChakraPetch';
    src: url(data-base64:~/assets/font/ChakraPetch-Light.ttf);
    font-weight: 300; // Light
font-style: normal;
}

@font-face {
    font-family: 'ChakraPetch';
    src: url(data-base64:~/assets/font/ChakraPetch-LightItalic.ttf);
    font-weight: 300; // Light
font-style: italic;
}

@font-face {
    font-family: 'ChakraPetch';
    src: url(data-base64:~/assets/font/ChakraPetch-Medium.ttf);
    font-weight: 500; // Medium
font-style: normal;
}

@font-face {
    font-family: 'ChakraPetch';
    src: url(data-base64:~/assets/font/ChakraPetch-MediumItalic.ttf);
    font-weight: 500; // Medium
font-style: italic;
}

@font-face {
    font-family: 'ChakraPetch';
    src: url(data-base64:~/assets/font/ChakraPetch-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ChakraPetch';
    src: url(data-base64:~/assets/font/ChakraPetch-SemiBold.ttf);
    font-weight: 600; // SemiBold
font-style: normal;
}

@font-face {
    font-family: 'ChakraPetch';
    src: url(data-base64:~/assets/font/ChakraPetch-SemiBoldItalic.ttf);
    font-weight: 600; // SemiBold
font-style: italic;
}