0

Our project had a @font-face rule like this for using a custom font:

@font-face {
  font-family: "Foo Light";
  src: url("foo.eot"); /* IE9 Compat Modes */
  src: url("foo.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
  url("foo.woff") format("woff"), /* Modern Browsers */
  url("foo.ttf") format("truetype"), /* Safari, Android, iOS */
  url("foo.svg#ca4650e2-5aa3-4755-9c6d-256cbb4f5115") format("svg"); /* Legacy iOS (and Galaxy S2/Android 4.0.3 and possibly other Android 4.0.3 devices) */
}

We faced an issue with SVG fonts and text-overflow: ellipsis (see here [search for ellipsis]). As we no longer support legacy iOS devices, I removed the SVG font fallback to fix the ellipsis bug.

Then Android 4.0.3's default browser (on a Galaxy S2) stopped using our custom font. Turns out it also falls back on SVG, while Android 2.3 and newer Android devices can use the TTF font.

Has anybody encountered this issue of Android 4.0.3 default browsers not working with TTF fonts? And are there any workarounds for it?

Behrang
  • 46,888
  • 25
  • 118
  • 160

1 Answers1

0

SVG is not (fully) supported in stock Android browser, but Chrome supports it. RTL languages with characters outside standard English language has no support at all in stock browser.

user2455524
  • 19
  • 4
  • The problem is, in this case, only SVG fonts are working in Android 4.0.3/Galaxy S2 and for the standard English language characters. – Behrang Jun 05 '13 at 13:39
  • What is the exact font you are trying to use? can I download and test it? – user2455524 Jun 05 '13 at 13:47
  • The fonts in question are "VAG Rounded W01 Light" and "VAG Rounded W01 Bold". You can download them from [here](http://mobile.yellow.com.au/static/SDjL2Y6JwCoSi2fs2u8oXRWRJQRSrtxIcE2dWscG8pF.css). Just search for `font-face`. If we remove the SVG font fallback, Galaxy S II/Android 4.0.3 does not pick up the TTF font. – Behrang Jun 06 '13 at 05:36