I have the Helvetica Light font for HTML pages used in the Android and iOS application. The problem is when I give font-weight: bold to the headings, it works fine on Android but not on iOS devices.
Here is the font-face:
#font-face {
font-family: 'HelveticaLight';
src: url('./fonts/helveticalight.eot');
src: url('./fonts/helveticalight.eot') format('embedded-opentype'),
url('./fonts/helveticalight.woff2') format('woff2'),
url('./fonts/helveticalight.woff') format('woff'),
url('./fonts/helveticalight.ttf') format('truetype'),
url('./fonts/helveticalight.svg#helveticalight') format('svg');
}
The problem is you're not loading a bold version of Helvetica — you're only loading Helvetica Light. If a proper bold version is missing, like in your case, most OSes or browsers will create a fake bold version by making the thin font "fatter" (a.k.a. faux bold). But iOS won't: it will stick to the original font you requested: Helvetica Light.
The solution is to include a #font-face rule where you load Helvetica Bold.
You can try this:
body{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Try this example;.textweight{
font-family: sans-serif;
font-weight: 800;
}
Related
I'm trying to use the Gill Sans-Light font on my website, but for some reason I can't seem to make the font work on iOS devices only. To demonstrate what I mean, here's a screenshot of the same font when I open my website in an Android phone, and when I open it in an iOS phone.
Android:
iOS:
Yes, I know there are lots of questions in here about this particular problem, I've read through them all but I can't seem to make my font work no matter what solution I use.
If it helps, I used Transfonter to convert the font format to EOT, WOFF2, WOFF, TTF and SVG.
Here's my code:
#font-face {
font-family: 'Gill Sans';
src: url('../fonts/GillSans-Light.eot');
src: url('../fonts/GillSans-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/GillSans-Light.woff2') format('woff2'),
url('../fonts/GillSans-Light.woff') format('woff'),
url('../fonts/GillSans-Light.ttf') format('truetype'),
url('../fonts/GillSans-Light.svg#GillSans-Light') format('svg');
font-weight: 300;
font-style: normal;
}
Thank you for your help.
iOS and macOS both include Gill Sans as a system font, so you are probably getting the default Regular weight of that, rather than your hosted version.
One option would be to intentionally use the system version on platforms that have a font called Gill Sans installed:
#font-face {
font-family: 'Gill Sans';
src: local('GillSans-Light'),
url('../fonts/GillSans-Light.woff2') format('woff2'),
url('../fonts/GillSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
A more predictable option, especially for a typeface like this where there are many different “cuts” or digital versions, is to change the font-family name to something less likely to conflict with a system font. For example:
#font-face {
font-family: 'Example family name';
src: url('../fonts/GillSans-Light.woff2') format('woff2'),
url('../fonts/GillSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
h1 {
font-family: 'Example family name', GillSans-Light, sans-serif;
font-weight: 300;
font-style: normal;
}
Obligatory further reading: https://en.wikipedia.org/wiki/Eric_Gill
I'm trying to load local fonts with custom names. Everything works perfectly in all browsers except IE, as always. The font isn't being rendered in bold or italic. I can't seem to understand what I'm doing wrong here.
Here is a demo:
http://jsfiddle.net/maitreyjukar/5ga5k2oa/
I am loading the font using the following CSS
#font-face {
font-family: k_Arial;
src: local("Arial"),
local("Helvetica"),
local("sans-serif");
font-weight: normal;
font-style: normal;
}
for all combinations of font-weight and font-style.
This is not only not an IE-specific issue it doesn't work on other browsers like Firefox.
Just write one font-face Rule istead of four like this:
#font-face {
font-family: k_Arial;
src: local("Arial"),
local("Helvetica"),
local("sans-serif");
}
Here is My Solution: http://jsfiddle.net/deepak__yadav/1eed9na5 i hope you will understand what you did wrong.
It's not an IE-specific issue - I'm on Firefox 38 and it doesn't work here either...
local sources are usually used to search on a user's machine before pointing to a URL, in order to speed things up.
However, you seem want to solely use locally installed fonts with a certain fallback order.
To achieve this, you could simply do the following:
body {
font-family: Arial, Helvetica, sans-serif;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
Bonus tip: Combine the bold and italic classes and you don't need an additional class bolditalic.
JS-Fiddle
you can define your font like below example, this will work in all the browsers.
#font-face {
font-family: 'ProximaNovaRegular';
src: url('../fonts/ProximaNovaRegular.eot');
src: url('../fonts/ProximaNovaRegular.eot') format('embedded-opentype'),
url('../fonts/ProximaNovaRegular.woff2') format('woff2'),
url('../fonts/ProximaNovaRegular.woff') format('woff'),
url('../fonts/ProximaNovaRegular.ttf') format('truetype'),
url('../fonts/ProximaNovaRegular.svg#ProximaNovaRegular') format('svg');
}
Tahoma and verdana font not work in mobile or tablet
My code is :
* {
font-family:tahoma,verdana !important;
}
But not work in mobile devices
Extract the font file you want, and upload it to fontsquirrel.com.
Then take out the following fonts from the package and add the following into your CSS file:
#font-face {
font-family: 'Tahoma';
src: url('path/to/Tahoma.eot');
src: url('path/to/Tahoma.eot?#iefix') format('embedded-opentype'),
url('path/to/Tahoma.woff') format('woff'),
url('path/to/Tahoma.ttf') format('truetype'),
url('path/to/Tahoma.svg') format('svg');
font-weight: normal;
font-style: normal;
}
You can then use the font in your css file by using:
font-family: 'Tahoma', sans-serif;
Most android phones only have a few fonts available by default.
Tahoma is not available on mobile.
You can upload the font to your site and load it with css. See also Google Fonts ;)
Edit : be careful of copyright
After listening to the latest Google I/O stream I was more than happy that they released a new version/update for their own font Roboto in their style guide.
http://www.google.com/design/spec/style/typography.html#
! Note that this one is newer than the one in their webfont
repo !
This is a screenshot of after(top) and before the update (bottom):
http://img.konrad-abe.de/stackoverflow/screenshot-roboto-new_01.png
This is a live demo of the bold versions:
http://demo.konrad-abe.de/stackoverflow/roboto-font-preview/
As I use Roboto in more than one project (web sites and web apps, both desktop and responsive) I was thrilled to implement it immediately. The preview was clean and well spaced and all but while testing, I had to find out, that the Google Chrome (latest stable) on Windows has problems rendering the bold and bold-italic versions of the font.
a's and e's have the inner space filled with color and the i's dots seem to merge with the shaft of the letter.
I'm using all versions via font-face:
/* ROBOTO REGULAR FONT
* page main font
* can be used with
* - thin/100 ( + italic)
* - regular/400 ( + italic)
* - bold/700 ( + italic)
*/
/* ROBOTO regular / 400 */
#font-face {
font-family: 'Roboto-Regular';
src: url('/includes/fonts/roboto-regular.eot');
src: url('/includes/fonts/roboto-regular.eot?#iefix') format('embedded-opentype'),
url('/includes/fonts/roboto-regular.woff') format('woff'),
url('/includes/fonts/roboto-regular.ttf') format('truetype'),
url('/includes/fonts/roboto-regular.svg#Roboto-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
/* ROBOTO regular / 400 + italic */
#font-face {
font-family: 'Roboto-Regular';
src: url('/includes/fonts/roboto-italic.eot');
src: url('/includes/fonts/roboto-italic.eot?#iefix') format('embedded-opentype'),
url('/includes/fonts/roboto-italic.woff') format('woff'),
url('/includes/fonts/roboto-italic.ttf') format('truetype'),
url('/includes/fonts/roboto-italic.svg#Roboto-Regular') format('svg');
font-weight: normal;
font-style: italic;
}
/* ROBOTO bold / 700 */
#font-face {
font-family: 'Roboto-Regular';
src: url('/includes/fonts/roboto-bold.eot');
src: url('/includes/fonts/roboto-bold.eot?#iefix') format('embedded-opentype'),
url('/includes/fonts/roboto-bold.woff') format('woff'),
url('/includes/fonts/roboto-bold.ttf') format('truetype'),
url('/includes/fonts/roboto-bold.svg#Roboto-Regular') format('svg');
font-weight: bold;
font-style: normal;
}
/* ROBOTO bold / 700 + italic */
#font-face {
font-family: 'Roboto-Regular';
src: url('/includes/fonts/roboto-bolditalic.eot');
src: url('/includes/fonts/roboto-bolditalic.eot?#iefix') format('embedded-opentype'),
url('/includes/fonts/roboto-bolditalic.woff') format('woff'),
url('/includes/fonts/roboto-bolditalic.ttf') format('truetype'),
url('/includes/fonts/roboto-bolditalic.svg#Roboto-Regular') format('svg');
font-weight: bold;
font-style: italic;
}
/* ROBOTO thin / 100 */
#font-face {
font-family: 'Roboto-Regular';
src: url('/includes/fonts/roboto-thin.eot');
src: url('/includes/fonts/roboto-thin.eot?#iefix') format('embedded-opentype'),
url('/includes/fonts/roboto-thin.woff') format('woff'),
url('/includes/fonts/roboto-thin.ttf') format('truetype'),
url('/includes/fonts/roboto-thin.svg#Roboto-Regular') format('svg');
font-weight: 100;
font-style: normal;
}
/* ROBOTO thin / 100 + italic */
#font-face {
font-family: 'Roboto-Regular';
src: url('/includes/fonts/roboto-thinitalic.eot');
src: url('/includes/fonts/roboto-thinitalic.eot?#iefix') format('embedded-opentype'),
url('/includes/fonts/roboto-thinitalic.woff') format('woff'),
url('/includes/fonts/roboto-thinitalic.ttf') format('truetype'),
url('/includes/fonts/roboto-thinitalic.svg#Roboto-Regular') format('svg');
font-weight: 100;
font-style: italic;
}
The other font files seem to render correct and this one does so as well on Mac/Chrome but Win/Chrome has problems rendering Roboto bold and Roboto bolditalic for font sizes between 13px and 16px for a's and e's and between 10px and 14px for the i's.
I "fixed" it by using the .woff files of the old roboto version for bold and bolditalic but that's hardly a fix, I'd call it a dirty workaround...
Any ideas?
If Roboto font is appearing distorted or narrower or whatever unexpected. Its because you have a version of the font in this case Roboto installed on your PC. Go to Control panel > Fonts and remove the roboto font installed on your system and happy you go. What is surprising however is the inability of Chrome to use the font from the web server and pick from the local system. Where as Edge and IE all use the font information from where its supposed to be used that being the web server.
If you have the latest version (v35 today) you can enable DirectWrite, which solved this issue for me.
Just enter chrome://flags in the address bar, locate the Enable DirectWrite setting and click on Enable.
Source: http://www.tekrevue.com/tip/chrome-font-rendering-windows/
The problem comes up after you install the font (Roboto in this case) is in your windows Fonts directory. I solved removing the file.
Go to "X:\Windows\Fonts" where X is your drive where is installed windows select and remove Roboto.
Done. Enjoy it :)
I've found strange problem on my site.
If add font in style like
font: 2.0625em/1em 'ColiseumCRoman';
it doesn't work in FF (28.0 version and in 29.0.1 the same problem)
Does not work neither the size nor the line-height nor the font. Caption is displayed by the default font.
but if I change style like
font-size: 2.0625em;
line-height: 1em;
font-family: 'ColiseumCRoman';
it works absolutely correct in FF!
I don't understand why! What's going on ?
PS. I use #font-face for adding this font
#font-face { /*ColiseumC*/
font-family: 'ColiseumCRoman';
src: url('../fonts/coliseumc.eot');
src: url('../fonts/coliseumc.eot') format('embedded-opentype'),
url('../fonts/coliseumc.woff') format('woff'),
url('../fonts/coliseumc.ttf') format('truetype'),
url('../fonts/coliseumc.svg#ColiseumCRoman') format('svg');
font-weight: normal;
font-style: normal;
}