I have used CSS rule @font-face
for my font Rajdhani. Works perfect on desktop but not on Android and IOS devices:
@font-face {
font-family: "Rajdhani";
src: url("/fonts/rajdhani-light.ttf") format("truetype"),
}
@font-face {
font-family: "Rajdhani";
src: url("/fonts/rajdhani-medium.ttf") format("truetype"),
}
@font-face {
font-family: "Rajdhani";
src: url("/fonts/rajdhani-regular.ttf") format("truetype"),
}
@font-face {
font-family: "Rajdhani";
src: url("/fonts/rajdhani-semibold.ttf") format("truetype"),
}
@font-face {
font-family: "Rajdhani";
src: url("/fonts/rajdhani-bold.ttf") format("truetype"),
}
you should add the files in other formats as well, for example, go to online web font generator and convert your font then add all types because this has to do with the operating system
@font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With