I have a funky css issue specifically, the font-family. I'm using BrandonTextWeb-Regular.
On the chrome inspector - toggle device to the IPhone 6 plus, it looks like this:
http://imgur.com/N8tNqxr
But for some strange reason on the IPhone itself it looks like this:
http://imgur.com/NVjSArB on both the safari and chrome browser.
At first I thought the font-family was not being loaded on the device, but when I applied it, there was no change so I'm assuming it is loaded and it just looks different on the IPhone device? Is that possible?
On the android phone (S4, chrome browser) it looks like it suppose to be (first image).
So it seem to be only the Iphone.
I also check it out on the Mac Safari and the font is fine as well. So it doesn't seem to be a browser issue.
Thanks in advance.
Edit:
Here's the CSS code that should be implementing this:
body
{
font-family: BrandonTextWeb-Regular;
}
Everything should be BrandTextWeb-Regular/Bold/Italic by default.
Related
So there's this problem with the site's UI:
it works fine in Google chrome etc in mobile browsers but when viewing in Apple safari mobile browser, the site's UI gets displaced.
I have tried everything, I guess the margin property is not working in safari. Take a look at Screenshots.
how it looks on android chrome
Second image is how it looks on safari. and it should be like first image on safari as well
First thing I would think of that try to use a css normalizer
https://necolas.github.io/normalize.css/
Along with a css prefixer to ensure the problem is not from the design
https://autoprefixer.github.io/
In case both of these solutions didn't work please provide a JSFiddle Code in order to help you properly.
I'm trying to figure out why the font stylings are completely different on Google Chrome versus Safari on this page: http://brokencartons.com/category.jhtm?cid=90. Chrome reads my stylesheets as I want it to, but Safari just seems to ignore how-it-works.css if you take a look with the inspector. Any idea on why this happens and how I can fix it?
This is what it looks like in Chrome (as I would like it to look like on all browswers):
This is what it looks like in Safari:
I have attached the image for what I am facing right now, there is a lot of difference between firefox for windows and firefox for mac, I have checked other browsers so far, Mac Firefox, Mac Chrome, and Windows chrome are showing the same results, but the firefox on windows is having different font.
I also have included the text properties by inspecting element via firebug.
Any idea why firefox for windows is having different font rendering? and How I can improve it. This issue breaks the whole layout for complex forms.
What I have heard, is that Firefox under Mac uses different font algorithms.
Try the following
html, body {
-moz-osx-font-smoothing: grayscale;
}
They are different browsers on different operating systems. Difference in font rendering is inevitable, and there's nothing much you can do about it.
I am unable to fix this, so my safe exit was using Arial Font. Verdana Font size 9 is like 10/20 and Arial is like 18/20 where first number is FF Windows and later number is Chrome Window
I have built an intro animation using jquery. This looks fine on my machine in all browsers (ff, chrome and safari).
On the clients however, it does not!
Clients screen shot:
http://madmantis.co.uk/debug/screen-shot-client.png
My screen shot:
http://madmantis.co.uk/debug/screen-shot-vs.png
I just cant figure out what is going on here....perhaps something to do with line wrapping in css?
I am on safari 6, he is on safari 5. He reports the same problem in chrome, again I dont see the error.
The website is available at http://dev.system2.co.uk
Thanks for any help
It seems like there has been some changes in the default font rendering method in Safari 6. Here's a little CSS that might work for you:
html {-webkit-font-smoothing: antialiased}
Taken from this topic: Font render safari 6
I am working on a project where client wants to use MotivaSans-Bold.
However on windows browsers it displaces text on twitter bootstrap enabled buttons but looks good on Mac browsers. But if I try to change padding it disrupts Mac browsers.
What can be the problem? Is there any problem associated with webfonts?
EDIT
#font-face {font-family: 'MotivaSans-Bold';src: url('webfonts/279BB3_D_0.eot');src: url('webfonts/279BB3_D_0.eot?#iefix') format('embedded-opentype'),url('webfonts/279BB3_D_0.woff') format('woff'),url('webfonts/279BB3_D_0.ttf') format('truetype');}
The problem is most likely that the spacing on the webfont is going to vary from browser to browser. What's probably going on is that on Chrome on the Mac the font and button look good, but then Firefox on Windows 7 the fonts renders slightly larger and throws off your button.
You should be able to address this with padding/margin via CSS as long as you don't try to set any fixed widths.
If you post a link to the page it'll be easier to suggest a more specific answer, but if the webfonts look relatively similar both Mac and Pc than there's nothing 'wrong' as far as the font goes and it's really a CSS issue.