cssfont-face

Custom font not working on mobile devices

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"),
}
Solution

  • 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");
}