Safari for iOS is badly rendering a custom font. What's going wrong here?
Note how different the rendering of the font is: In chrome, the stroke width is thicker. In Safari, the characters are spaced wider. I think chrome's rendering is more correct.
Update: I incorporated the suggestions from answers so far without solving the problem. I have updated the jsfiddle and screenshots. Now I don't use bold or any default-bold tags, just a single font at normal weight. I incorporated #Vizllx's suggestion although it does not seem to help.
Problem example on jsfiddle:
http://jsfiddle.net/c9eP5/9/
#font-face{
font-family:Lola;
src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola.woff) format('woff');
font-style:normal;
}
.test {
font-size: 200%;
font-family: Lola;
-webkit-text-size-adjust:100%
}
How it looks in Chrome:
And here's how it does look on iOS Safari ("Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A523 Safari/8536.25")
In the real-world problem, I use the regular fontsquirrel font declaration:
#font-face {
font-family: 'Lola';
src: url('../fonts/lola/lola.eot');
src: url('../fonts/lola/lola.eot?#iefix') format('embedded-opentype'),
url('../fonts/lola/lola.woff') format('woff'),
url('../fonts/lola/lola.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
First, you have both fonts marked as Bold which may confuse some browsers.
However I had similar problem when including bold font and the solution was NOT to set font as bold but to make it behave as normal with different name and then switch bold using font name. It's not the HTML standard way but it works.
http://jsfiddle.net/nothrem/ALqt8/6/
#font-face{
font-family:Lola;
src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola.woff) format('woff');
}
#font-face{
font-family:Lola-bold;
src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola_bold.woff) format('woff');
}
h1 {
font-family: Lola-bold;
}
I see you have definen the font Lola twice with the same name, a different file name, but both definitions have the font-weight:bold; which is obviously a typo but might be a reason that the browser interprete the typo differently.
Nevertheless I have seen with other fonts that iOS and Android devices make the font-weight (without any additional parameter) differently even native. This part of your question was not fully clear to me, what machine and what browser engine creates which result.
Related
Pdf font is being render smaller in the production compared to development. I checked stack overflow, but could not get a precise reason for the issue.
development shows the font size as we have given , compared the production renders it smaller than the development.
Below is the snippet for the font family.
body{
font-family: Lato,Arial,Helvetica,sans-serif;
}
.header-spec {
font-weight: bold;
font-size:25px;
}
//how much ever i tried to increase the size(to 25px)in development,after deployment to production it shows the fontsize of 10px;
I'm working on a Ionic project, and for some reason the font we are using is not rendering properly in iOS (in Android it's working well). We used the #font-face rule in order to use the font. It works well if I switch to another font (I've tried with other truetype fonts).
#font-face {
font-family: 'font_title';
src: url('../fonts/font_name.otf') format("opentype");
}
Here's an Example of what happens: The title should say "Notificación", but instead it shows "Notiffjcación". This other image shows how instead of "..." it shows "%.", and you could also see the different color at the accent mark.
¿Can anybody tell me if there's a workaround for this issue or should we just use another font? ¿is this problem caused by the font or by the OS?
Thanks in advance!
You can always convert the font online at:
https://onlinefontconverter.com/
and check if it works. Once done with conversion lets say to true type font. You can use it like this.
#font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
There is an issue OS X where some elements are not displaying the text correctly, even though there are elements alongside it that do show.
Abbreviated example:
Font-face declaration:
#font-face {
font-family: 'FontFamily';
src: src: url(data:application/x-font-woff;...);
font-weight: 700;
font-style: normal;
}
CSS
.navbar-collapse > .nav > li > a {
font-family: "FontFamily", sans-serif;
font-weight: 700;
color: #000;
}
HTML
<div class="navbar-collapse">
<ul class="nav">
<li>Home</li>
<li class="dropdown">
Admin
<ul class="dropdown-menu"></ul>
</li>
</ul>
</div>
Outcome (missing home link above admin):
A second example where a labels height is messed up but the text is visible within the label. Again renders correctly on non-OS X setups.
The link correctly renders in Chrome/Firefox/IE/Chrome Emulator but it does not render in OS X across all browsers (and iOS).
Is it because you've got the link set to be coloured white on a white background?
.navbar-collapse > .nav > li > a {
font-family: "FontFamily", sans-serif;
font-weight: 700;
color: #000000;
}
Try That :)
Or,
.navbar-collapse > .nav > li > a {
font-family: "FontFamily", sans-serif;
font-weight: 700;
color: initial;
}
After researching this I found that it shouldn't be an issue. However, I would suggest adding the full stack of different font file types. Typically, OTF and TTF are iOS friendly. For my sites, I use the following in order:
eot
svg
eot?#iefix
woff
ttf
This is just my preference and has been tested to work in all browsers/devices. I am sure someone can comment to say that other order may work for them.
I use this code for maximum compatibility, but you have to add all format:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
There is a misspelling in your code:
you've typed "src:" twice
src: src: url(data:application/x-font-woff;...);
Maybe this code will work:
src: url(data:application/x-font-woff;...);
This turned out to be an issue with the y-height was being setup in the font when being embedded (or something along those lines) with font squirrel. Changing the settings around on the vertical metrics option fixed it.
In my jQuery mobile app I want to use a custom font family , I have tired the following code but it didnt work .How can I use a custom font file in jQuery mobile ?
Please help me
CSS
#font-face{
font-family:'Roboto-Light';
src: url("Fonts/Roboto-Light.ttf");
}
font {
text-shadow:0 0 0;
-moz-user-select: none;
-webkit-user-select: none;
font-family: "Roboto-Light" !important;
}
Once you define the Roboto font family, you have to apply it as the default font on the page:
body, .ui-btn {
font-family: Roboto-Light;
}
Make sure your path Fonts/Roboto-Light.ttf is correct.
You can also use google fonts if you will be connected to the internet, put this line in your CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
Also, for a more cross-browser solution you get eot, woff, and svg versions of the font as well as the ttf, then define the new font-face like this:
#font-face {
font-family: 'roboto';
src: url('fonts/roboto-regular-webfont.eot');
src: url('fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/roboto-regular-webfont.woff') format('woff'),
url('fonts/roboto-regular-webfont.ttf') format('truetype'),
url('fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
font-weight: 400;
font-style: normal;
}
Here is a DEMO using google fonts
You would do it the same way as you do it in a web page. Just make sure your font directory exists and you are pointing to it correctly.
For a good example of how to do it correct go here:
http://www.fontsquirrel.com/
I'm using the 62.5% font-size trick, and while it works on some bits of text, it doesn't work for others.
Any ideas?
body {
font: 62.5% HelveticaNeue, Arial, Verdana, sans-serif;
}
For example, this isn't 16px: http://jsfiddle.net/vfGJa/6/
On the jsfiddle link, the problem is that em is like a relative value, so that element is recieving first the size 62.5%, than is increased to 1.4em, and than increased again to 1.6em but based on previous 1.4em value. Remove that 1.4em and you'll see that you get the size you're looking for.
Sorry my bad english.
Some elements don't inherit font properties. Use a Css Reset file and this will work fine.