Clever Geek Handbook

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

I am using a custom font to display the content. It works on most devices, but not iOS devices. So I need to change the css font family when the user has an Apple device, but displays fine for others. How can i do this?

I added some pseudocode:

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}
}
+3


source to share


1 answer


One way to approach this task is to use the user agent sniff technique, for example:

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

So in practice it will be:

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

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


I would assume that you have all your styles in a stylesheet file and only include font styles (and only those that change depending on the device). So your complete code might look something like this (assuming this JavaScript is at 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 iOS detection in this answer .

+3


source






More articles:


All Articles