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?
Related
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;
}
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
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.