Force webpage to use a specific font

Question

I have created a question mark button using the Arial font.

The CSS looks like this:

.question {
    font: bold 24px Arial;
}

It appears correctly on almost all browsers, as this screenshot shows.

However, newer versions of Android use the Roboto font face instead of Arial. The question mark is now off-center and the wrong width.

My question: is it possible to force the browser to use Arial?

Answer 1

You cannot force a device/computer which doesn't have Arial installed to use it. You would have to rely on webfonts to use Arial everywhere.

Also, your syntax is wrong, you should be using the shorthand property font, and not font-family (which is only used to specify the font face and potential fallbacks), like so:

.question {
    font: bold 24px Arial, sans-serif;
}