Times New Roman on Android devices

android css webfonts
remyjacobs picture remyjacobs · Oct 18, 2013 · Viewed 13.1k times · Source

For my client I'm building an website using the Times New Roman font.

Everything seems to work fine, except for Android devices (mobile, tablet). Android doesn't have a Times New Roman font available. As far as I know you can only use the Droid Serif font, which has a different look than Times. Besides that the font-size also differs and causes a lot of alignment issues.

Is there any way to use Times New Roman for Android? I know about fontface, but there isn't any free webfont available for Times New Roman. Maybe there's an (acceptable)equivalent for it?

Thanks in advance!

Answer

Stef picture Stef · Jul 30, 2018

CSS

@font-face {
    font-family: 'Times New Roman';
    src: url(LiberationSerif-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Times New Roman';
    src: url(LiberationSerif-Italic.ttf) format('truetype');
    font-style: italic;
}
@font-face {
    font-family: 'Times New Roman';
    src: url(LiberationSerif-Bold.ttf) format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: 'Times New Roman';
    src: url(LiberationSerif-BoldItalic.ttf) format('truetype');
    font-style: italic;
    font-weight: bold;
}

Download the Liberation Serif .ttf font, unzip and move files to webroot. you could change the @font-face source urls and move your fonts wherever you want.

Related questions

Getting web fonts to work with phonegap and android - how?

Does PhoneGap support web fonts, and if so how do you use them. I've currently got this code in my page, but it doesn't work when loaded into the emulator (inside an android app, I've not tried loading the page …

Read More
Disable scrolling in all mobile devices

This sounds like there should be a solution for it all over the internet, but I am not sure why I cannot find it. I want to disable Horizontal scrolling on mobile devices. Basically trying to achieve this: body{ overflow-x:…

Read More
Rendering HTML in a WebView with custom CSS

My app is using JSoup to download the HTML of a message board page (let's say in this case it is a page containing the posts of a given thread). I'd like to take this HTML, strip out unwanted items, …

Read More