I'm trying to use the Candara font in my Ionic app (v3.19). On local browser it works, but on the Android Oreo device I'm testing with it does not work.
I have included the font files under src/assets/font, e.g.
I have added the #font-face variable to 'variables.scss':
$font-path: "../assets/fonts";
When I've built, I can at least see the woff file appear in the fonts folder under the platforms folder for Android, e.g.
Via Chrome developer tools, I can see that the fonts appear not to have copied across to the build, as the only fonts I can see are the default roboto fonts:
Any ideas what I could be doing wrong here?
My font-face declaration was dodgy I think. I added some new filetypes and then changed my font-face to this and it started to work:
#font-face {
font-family: 'candara';
src: url($font-path + '/candara.eot');
src: url($font-path + '/candara.eot') format('embedded-opentype'),
url($font-path + '/candara.woff2') format('woff2'),
url($font-path + '/candara.woff') format('woff'),
url($font-path + '/candara.ttf') format('truetype'),
url($font-path + '/candara.svg') format('svg');
font-weight: 400;
font-style: normal;
}
Related
I have added a custom font to my website. It is working perfectly fine on desktop on all browsers, but is not working when testing on mobile.
I have been through all the questions on SO regarding this issue and have not found a resolution in them.
Here is my CSS:
#font-face {
font-family: 'Proxima Nova';
src: local('Proxima Nova'),
url('/fonts/Proxima Nova Alt Regular-webfont.svg') format('svg'),
url('/fonts/Proxima Nova Alt Regular-webfont.ttf') format('truetype'),
url('/fonts/Proxima Nova Alt Regular-webfont.woff') format('woff'),
url('/fonts/ProximaNovaA-Regular.woff2') format('woff2'),
url('/fonts/Proxima Nova Alt Regular-webfont.eot') format('embedded-opentype');
}
body {
font-family: 'Proxima Nova', Helvetica, Arial, sans-serif !important;
}
As I said, works perfectly fine on all desktop browsers, but not loading at all on mobile. According to ngrok, the fonts are loading with a response code of 206 Partial Content. No idea why
Any help?
I have two weights of the same font.
Per https://stackoverflow.com/a/41678274/877682, I see that the font-family must match the file name on Android, so I named the font files [Font name] Regular.ttf" and "[Font name] SemiBold.ttf".
I then tried to include the semi-bold via
font-family: [Font name];
font-weight: 600;"
However, Android can't find it, defaulting to a sans-serif font (which I assume is Roboto).
What's the expected font file naming system in this case? Do I need to create separate android and ios CSS files, and then simply name use font-family: [Font name] Semibold; on android?
I believe the best approach here would be to use #font-face to create a font-family composed of all your files.
If I had three weights of a font, and wanted to build a family out of them, I would do it like so:
#font-face {
font-family: 'Open Sans';
src: url('~/fonts/Open Sans Regular.tff') format('truetype');
font-weight: 300;
}
#font-face {
font-family: 'Open Sans';
src: url('~/fonts/Open Sans Light.tff') format('truetype');
font-weight: 100;
}
#font-face {
font-family: 'Open Sans';
src: url('~/fonts/Open Sans Bold.tff') format('truetype');
font-weight: 500;
}
I can then use this else where via:
Label {
font-family: 'Open Sans';
font-weight: 300; // Regular Open Sans
}
Label.mod-light {
font-weight: 100; // Light Open Sans
}
Label.mod-bold {
font-weight: 500; // Bold Open Sans
}
Benefit of this approach is that you don't need to add further properties to your css or HTML to support font weights dependent on each device.
I never found a way to do this without separate iOS and Android files, with font-family definitions for each weight of the font on Android.
Since Android requires exact font file names, I can't use a default font for all labels and vary the font-weights accordingly, like I can on iOS.
app.css:
#import "~/platform.css"; /* Platform-dependent styles */
#import "~/app-common.css"; /* Platform-independent styles */
platform.ios.css:
/* Default font: used everywhere except classes below */
Label {
font-family: "My Body Font"; /* Exact font name */
}
.heading-1, .heading-2, .heading-2-subtext {
font-family: "My Display Font"; /* Exact font name */
}
platform.android.css:
.heading-1, .heading-2 {
font-family: "MyDisplayFont-Bold"; /* file name: MyDisplayFont-Regular-Bold.otf */
}
.heading-2-subtext {
font-family: "MyDisplayFont-Regular"; /* file name: MyDisplayFont-Regular.otf */
}
.heading-3 {
font-family: "MyBodyFont-SemiBold"; /* file name: MyBodyFont-SemiBold.otf */
}
.body-text {
font-family: "MyBodyFont-Regular"; /* file name: MyBodyFont-Regular.otf */
}
app-common.css:
.heading-1 {
font-size: 36;
font-weight: bold; /* Used by iOS, ignored by Android */
}
.heading-2 {
font-size: 24;
font-weight: bold; /* Used by iOS, ignored by Android */
}
.heading-3 {
font-size: 16;
font-weight: 600; /* semi-bold, Used by iOS, ignored by Android */
}
.body-text {
font-size: 14;
}
As I understand it, I could move all the font-weight styles into platform-ios.css, as Android font weights are controlled by the font-family declaration.
However, as I'm defining font-size for each class in app-common.css anyway, also defining the font-weight here makes more sense to me.
I have a custom font that will not work on Android devices but works in chrome and Firefox and IE 11.
On the server I have 2 font files called:
Ventilla Script_0.eot and Ventilla Script_0.ttf
I currently have the following in my css:
/* Fonts */
#font-face {
font-family: 'Ventilla Script';
src: url('../fonts/Ventilla Script_0.eot?') format('embedded-opentype');
}
#font-face {
font-family: Ventilla Script;
src: local(Ventilla Script_font), url('../fonts/Ventilla Script_0.ttf') format('opentype');
}
As far as I can tell that .tff rule should work on Android browsers, can anyone tell me what I might need to add.
Thanks
Ian
You should use Squirrel font generator
It worked for me on android devices.
I had tried Squirrel font generator but I must have pasted something wrong, however after asking this question I found this link
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
now my css looks like this
#font-face {
font-family: 'Ventilla Script';
src: url('../fonts/Ventilla Script_0.eot?#iefix') format('embedded-opentype'),
url('../fonts/Ventilla Script_0-webfont.woff') format('woff'),
url('../fonts/Ventilla Script_0.ttf') format('truetype'),
url('../fonts/Ventilla Script_0-webfont.svg#svgVentilla Script') format('svg');
}
and it works on my phone and Galaxy Tab 3
Cheers
Ian
This question already has answers here:
Is #font-face usable now?
(2 answers)
Closed 8 years ago.
I'm working with fonts for a small language called Dhivehi (Maldivian). The alphabet is called "Thaana". There are a number of Unicode fonts available for it (such as Microsoft's MV Boli). It is written right-to-left.
While it appears perfectly on web browsers on laptops, it does not appear correctly on mobile-phone based browsers.
I'm using the following CSS code to apply the fonts:
#font-face {
font-family: 'Eamaan';
src: url('http://www.sun.mv/css/MvEamaanXP.ttf') format('truetype');
}
.thaana{direction:rtl; float:right; unicode-bidi: bidi-override;font-size:16pt;
float: left;font-family:"Eamaan"; padding:2%;}
For my HTML, I'm using the following:
<p class="thaana">މިއީ ހަމަ ރަގަޅު ކަމެކެވެ</p>
And this produces legible writing on a web browser, however it doesn't work at all (for me) on any mobile-phone based browsers.
Any help would be appreciated.
I wonder if the issue is the use of true-type fonts. Chrome (Blink) and WebKit browsers (Android stock) are supposed to support true-type, yet when I run this code in Chrome on my desktop I don't see Eamaan getting rendered.
This site uses Waheed and they're using the open-type font version which renders in Chrome fine. If the open-type font of Eamaan is available in the URL of your font-face rule, I'd suggest adding it.
Example:
#font-face {
font-family: 'Eamaan';
src: url('http://www.sun.mv/css/MvEamaanXP.ttf') format('truetype'),
url('http://www.sun.mv/css/MvEamaanXP.otf') format('opentype');
}
You may want to expand it further to include .eot, .woff, and .svg for full support for font-face:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
The following #font-face declarations work fine in in every major browser (including Chrome for Android) except for the Android Browser and Firefox for Android (from http://oftn.org/css/global.css):
#font-face {
font-family: "OFTN Aller";
src: url("../fonts/OFTN-Aller-Bold.woff") format("woff"),
url("../fonts/OFTN-Aller-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "OFTN Aller";
src: url("../fonts/OFTN-Aller.woff") format("woff"),
url("../fonts/OFTN-Aller.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
What could I be doing wrong?
Screenshots
Android 4.0.3 browser:
Chrome 19 on Windows 7:
Firefox 13 on Windows 7:
.woff is not supported in android
check
font support
Edit: i think the page is loading correct because it looks same on desktop.
Our Name
ΩF:∅ means "ohm-farad to none", and we usually pronounce it as "often".
I subset OFTN Aller (bold) more since I'm not using it for other headers any more (only the logo) and that seemed to solve the problem.