I have implemented a website using AngularJs. I used several fonts including cambria and calibri using font-family, The fonts are working perfect on Webiste and even on Ios Mobiles (Safari browser) however the same is not working on any Android device i have checked for all android versions and browsers
i have used
font-family : cambria
in css.
Any help will be appreciated. Thanking you.
Android devices generally don't have the font Cambria installed on their systems, so the Android browsers can't display text with this font.
You can use a CSS font stack so that if one font is not installed the browser will try to use the next one:
font-family: Cambria, Georgia, serif;
Or you can look at Web Fonts.
On your website, put the font Cambria at a url like /cambria.ttf. Then you can use it in CSS like:
#font-face {
font-family: 'MyCambria';
src: url('webfont.ttf') format('truetype');
}
Now use
font-family: Cambria, 'MyCambria', serif;
Related
I am having issues with the font face in CSS3. I am calling my font with the following code:
#font-face {
font-family: James Fajardo;
src: url('https://www.twoseven.nl/kurkorganicwines/wp-
content/themes/kurk/fonts/James_Fajardo.ttf');
}
The code works when using font-family: James Fajardo in my CSS on the preferred H2's or alinea's. It is also working in Chrome on my desktop. But, it is not working in Firefox or Chrome on Android mobile. Strangely enough it is working in Safari on iPhone.
Does anyone know how to fix this problem? I allready tried installing different font styles (like woff and woff2) but it is still not working on the Android device.
Thnx in advance!
Rob
Try using local path to your font. Sometimes it works.
#font-face{font-family:James Fajardo;src:url(James_Fajardo.ttf)}
As I delve deeper into our next responsive website, I am exploring the options of using system fonts for phone versions. And am wondering a few things.
First would be, if we specify a font that is on the device (such as a system font), but we also have an call for Open Sans (our default body typeface), would the device still download the Open Sans typeface file? Open Sans would be listed after the system fonts in the font-family declaration.
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<style type="text/css">
body { font-family: roboto, segoe, helvetica, 'open sans', sans-serif; }
</style>
Or as a #font-face call.
<style type="text/css">
#font-face {font-family:OpenSans; src: url('https://fonts.gstatic.com/s/opensans.woff'); }
body { font-family: roboto, segoe, helvetica, 'open sans', sans-serif; }
</style>
If this type of set up does eliminate downloading the font and thus decreasing the data usage to view the webpage, I am wondering if someone knows the technical aspects of the system fonts. In particular what names would be used in the css font-family declaration? Newer Androids are easy as the name is simply 'roboto', but how do we declare Segoe on Windows phone or Helvetica Neue / Lucinda on iPhones and iPads. And how does one determine which font weights are present and their values (we use 400 & 600 on Open Sans because we don't want a real heavy bold font).
Updating the question with our solution ....
This really had an oh duh answer, we just set the body css to use system fonts initially (mobile first css), then when we reach the breakpoint for laptops and desktops, use the #font-face call for Open Sans and update the body css to use it.
I found the following font-family setting giving me default system fonts on all mobile devices:
font-family: system,-apple-system,".SFNSText-Regular","San Francisco",Roboto,"Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;
This css snippet (borrowed from issue on github) defaults to system font, on most platforms (OSX, iOS, Windows, Windows Phone, Android, Ubuntu):
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
-apple-system — San Francisco in Safari (on Mac OS X and iOS); Neue Helvetica and Lucida Grande on older versions of Mac OS X.
system-ui — default UI font on a given platform.
BlinkMacSystemFont — equivalent of -apple-system, for Chrome on Mac OS X.
"Segoe UI" — Windows (Vista+) and Windows Phone.
Roboto — Android (Ice Cream Sandwich (4.0)+) and Chrome OS.
Ubuntu — all versions of Ubuntu.
Fonts for other OS or older versions of them could be found in this article on css-tricks.
If you declare, say, body { font-family: roboto, segoe, helvetica, 'open sans', sans serif; } and the user’s device has a font called roboto installed and it contains glyphs for all characters in the content, then the rest of the font family list should be ignored. This means if some of those fonts is declared as a downloadable font with #font-face (directly or indirectly by using code provided by Google), then no download should take place. But if there is any character not present in that font, then the list should be processed further and this should result in a font download if no preceding font in the list contains the character.
In practice, browsers may implement this differently, e.g. they might always load the downloadable font, or they might fail to download it if any preceding font in the list exists in the system, even if it does not cover all the characters. You would need to organize suitable tests for each browser to see exactly how they behave. In general, if you declare a downloadable font, you should expect it to be downloaded, and you should put it first in font-family list to ensure that.
Regarding the specific font names, declaring segoe is useless. There is no such font; Segoe UI exists in many Windows systems. The name helvetica means in principle a font that is mostly available on Apple devices only, but in practice Windows, oddly enough, takes it as meaning Arial, unless the system has actually Helvetica installed. Declaring sans serif is useless; there is no such font; you probably meant sans-serif, which is the valid name for a system-dependent sans serif font.
I'm trying to make a web app without the use of web fonts to keep browser requests at an absolute minimum.
At the same time, I'm trying to use only "good-looking" slim fonts for Headings etc.
This is basically no problem: iOS and Mac OS have HelveticaNeue-UltraLight natively, and Windows (Phone) has Segoe UI (WP) Light.
The fonts do not look the same, but they give a similar overall style and I don't have to use a single webfont. All can be addressed directly via css "font-family".
Is there a way to get a similar appearance on Android? Android has Roboto Light, which would perfectly serve my requirements, but it seems impossible to simply address this via css styles without webfonts.
You can use
font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
Each OS try use font from this list in course. When the browser finds a font that is present in the system, it will start to use it. iOS will use the font "HelveticaNeue-UltraLight" and ignore other. Android will use the font "Roboto Light" ...
Use:
font-family: sans-serif-light;
Edit: Apparently, this only works on HTC devices. But it's a start.
Edit2: Looks like Google has changed this with the recent Android 4.4 update, because now it works on my Nexus 7 as well. Not sure about other devices though.
Download Roboto and link to it in css like this:
#font-face {
font-family: 'Roboto Thin';
src: url('roboto/Roboto-Thin.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I am using the following CSS for #font face. It works on my desktop and the IOS devices that I have tested. But it fails on Android:
#font-face {
font-family: 'ReformaGroteskMedium';
src: url('/css/fonts/reforma_grotesk/26890C_0_0.eot');
src: url('/css/fonts/reforma_grotesk/26890C_0_0.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/reforma_grotesk/26890C_0_0.woff') format('woff'),
url('/css/fonts/reforma_grotesk/26890C_0_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I noticed that the fonts generated from http://www.fontsquirrel.com/ (which work) are embeded in exactly the same way except they also have the following line:
url('SourceSansPro-ExtraLightIt-webfont.svg#SourceSansProExtraLightItalic') format('svg');
Is this why my version isn't working, does Android only support SVG?
The version of Android I am using is 4.0.1 on a Asus tablet. It did work fine on a newer Android phone.
Quoting the Moz Dev Network from THIS ARTICLE:
When SVG was specified support for web fonts was far from being
expected. Since the correct font is however crucial for the rendering
of a graphic, it was decided to add a font description technology to
SVG. It was not meant to concur with other formats like PostScript or
OTF, but as a simple means of embedding glyph information for
rendering engines.
So i guess that SVG (Scalable Vector Graphics) format should always be used as a "parachute" for allowing any browser/device engine to render fonts correctly.
Anyways i didn't find anything official about Android 4.0.1 and font importing, but i strongly suggest to always use also SVG format when importing a Font.
You might be facing this Android bug:
https://code.google.com/p/android/issues/detail?id=73945
According to them it is fixed on Android 4.4 but not on previous versions :(
EDIT 1: Apparently, I don't have enough reputation to post images yet, so I had to externally link them.
EDIT 2: Apparently, I don't have enough reputation to post more than two hyperlinks, sorry for the inconvenience of having to copy and paste a URL.
Built a site (http://vitkodance.com) for a friend, and used the #font-face implementation of a Google Web font. I then invoked the fonts with a series of fallbacks. Titles are in a script-ish style, and the body is serif-ish. When I load up the website on Chrome for Android on my phone, the fonts render differently, depending on the orientation of the phone (and therefore the available resolution).
Here is the site in portrait (fallback font): Chrome for Android Portrait Rendering.
And here is the site in landscape (intended): Chrome for Android Landscape Rendering.
On my Nexus 7 tablet, the font displays as intended in both orientations. Is there a way to fix this? Is this expected behavior based on the fonts that I chose, or is it an issue that has to deal with values for font size (in em's) and line height?
I am having the same problem and asked a similar question.
Currently, this is a bug being tracked here http://code.google.com/p/chromium/issues/detail?id=138257
Chrome for Android displays the fallback font, but Dolphin browser displays the correct font, at least on my devices. So this seems to be a Chromium bug.
For some people, defining an initial scale fixes the problem, like so:
<meta name="viewport" content="initial-scale=1">
Also adding -webkit-text-size-adjust:100% to your CSS could fix the problem as well.
I wish I had a definitive answer, but it seems there is none. Let me know how it goes.
Edited Answer:
My solution to the problem is to ditch Google Webfonts completely and, instead, download the fonts to the web server and call them through CSS, like so:
#font-face {
font-family: 'Droid Sans';
src: url('fonts/DroidSans-webfont.eot');
src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/DroidSans-webfont.woff') format('woff'),
url('fonts/DroidSans-webfont.ttf') format('truetype'),
url('../fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Google's webfonts are open source, so you should have no problem finding the downloads for the fonts.
This solution works in both Dolphin and Chrome for Android.