Develop Reference

Custom fonts not loading on mobile version of website

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?

Ionic - Custom font doesn't load

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;
}

How to include multiple weights of the same font on NativeScript?

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.

Custom Persian And Arabic Fonts in Android 4.1.2 Phonegap (Cordova) not working

I tried to make custom fonts for my application in phonegap. For that, I wrote this code in my html file:
#font-face {
font-family: 'customfont';
src: url('fonts/BMitra.eot?#') format('eot'),
url('fonts/BMitra.woff') format('woff'),
url('fonts/BMitra.ttf') format('truetype');
font-style: normal;
}
body {
font-family: "customfont";
font-size:30px;
}
....
<body>
<h>Custom Fonts</h>
<div style="font-family: 'customfont';" id='txt1'>This is for sample</div>
</body>
It works fine on Ripple (chrome emulator) but it doesn't work on the Device (Samsung Android 4.1.2)
I have googled and stack-overflowed to find the solution, i found this post font-face on android 4.0.x doesn't work which says to have text-rendreing:auto but it didn't work too.
Any help, will be appreciated.

finally I overcome this issue on Persian And Arabic custom fonts,
Keep all the codes with #fontface as same as it is,
Download this package http://averta.net/labs/fa/?p=10
From extracted archive, add bifon-1.1b.js to your html and use this script
function onDeviceReady() {
$('#txt1').text(FarsiStyle.convert('سلام عليكم').split('').reverse().join('').split(' ').reverse().join(' '));
}
which txt1 is a div or span.
p.s Thanks to Mr. Morteza F. Shojaei

Custom font wont embed on Android what am I doing wrong

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