Google Fonts

ionic-v1
1

I have tried to use Google font three different ways. All show up on browser, but not on android. Does any know why? Thanks.

@import url(http://fonts.googleapis.com/css?family=Russo+One);

@font-face {
font-family: ‘Russo+One’;
font-style: normal;
font-weight: 400;
src: local(‘Russo+One’), local(‘Russo+One-Regular’), url(http://themes.googleusercontent.com/static/fonts/Russo+One/v3/w5P-SI7QJQSDqB3GziL8XT8E0i7KZn-EPnyo3HZu7kw.woff) format(‘woff’);
}

<link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'>
1 Like
2

You are missing the other font types… *.eot, *.svg, *.ttf

3

@rdtran have you maybe solved this problem? I’ve got a similar problem. If I use @import from google URL, everything works perfectly and fonts are displayed, but if I try to use the fonts locally, none of the fonts is used in the view. Of course, I’ve got the fonts downloaded; CSS is also correct and I’ve got the local fonts working perfectly on desktop browser. Once the app is uploaded to a device, no fonts are shown on the phone screen.

I’m sure there’s no need to use the eot, svg and others. Fonts linked from Google URL works just perfectly, and there in the CSS importer from remote server, there are no svg, ttf, etc.

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto:400,500,300|Roboto+Condensed:400,300,700|Open+Sans+Condensed:300,700|Open+Sans:400,300,600&subset=latin,cyrillic,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>

If you open the CSS from the link, you’ll see there’s no ttf, etc. and woff2 is enough. But if I copy the fonts to local folder and use it locally from CSS @font-face it works only on desktop Chrome. For example:

/* latin */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(fonts/OpenSans-CondensedLight-Latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

h2 {
  font-family: 'Open Sans Condensed', sans-serif; 
  font-size: 36px!important;
}

I’ve checked over the internet and a guy here used the same method with success, but not me

As I said, the above code works perfectly in a desktop PC Chrome (the font is of course not installed in the local system). It doesn’t work if app is build and run on device.

Could anyone help me with that, please?

–
Rafal

4

Or maybe it’s some uncompatibility on Androids below 4.4 :frowning: Found this and I’ll try:

Seems that Jason was right…

Yes, adding the bunch of all the formats solved the problem. My CSS for just one font looks like this:

@font-face {
    font-family: 'OpenSansCondensedLight';
    src: url('fonts/OpenSans-CondLight/opensans-condlight.eot');
    src: url('fonts/OpenSans-CondLight/opensans-condlight.eot') format('embedded-opentype'),
         url('fonts/OpenSans-CondLight/opensans-condlight.woff2') format('woff2'),
         url('fonts/OpenSans-CondLight/opensans-condlight.woff') format('woff'),
         url('fonts/OpenSans-CondLight/opensans-condlight.ttf') format('truetype'),
         url('fonts/OpenSans-CondLight/opensans-condlight.svg#OpenSansCondensedLight') format('svg');
}

And instead of ~50 kB of additional data for a woff2 format, now this above adds 1.4 MB to the size of application. Not good :frowning:

But WHY the fonts imported from Google Fonts service worked on the Android? I’ve checked the file they provide and there’s woff2 only. Anyone?

1 Like
5

It seems that TTF is enough for all Androids I’ve tested (2.3.6, 4.0.4, 4.1.4), e.g.

@font-face {
    font-family: 'OpenSansCondensedLight';
    src: url('../fonts/opensans-condlight.ttf') format('truetype');
    font-weight: 300;
}

Cheers,
Rafal