How to change the font family css if the user's device is iOS

Question

I'm using a special font to display content. It works on most devices but not on iOS devices. So I need to change the font family css when user has an Apple device but for others display normally. How can I do this?

I have attached some pseudo code:

if(IOS)  { html,body,h1,h2,h3,h4,h5 { line-height: 150%; font-family: "Open Sans", sans-serif}
}else{
html,body,h1,h2,h3,h4,h5 { line-height: 150%; font-family: "Noto Sans Sinhala", sans-serif}
}

Answer 1

One way to approach this task is using the User Agent sniffing technique, like so:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

So, in practise it would be:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (iOS) {
    // iOS specific styles
}
else {
    // other styles
}

I would suggest that you have all of your styles in a stylesheet file and only include the font-family (and only styles that change depending on the device). So your complete code could look something like this (assuming this JavaScript is in the head of your html file):

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (iOS) {
    document.write("<style>body { font-family: x }</style>");
}
else {
    document.write("<style>body { font-family: y }</style>");
}

You can read more about detecting iOS in this answer.