I'm working on this site and I have this CSS
.n2-font-d7df9860b9d2e958d0b5b8dadd6b6bd5-paragraph{
font-family:'HelveticaNeue', 'Helvetica Neue', serif !important;
}
This targets the text on the front page image (please don't ask about the selector - its generated by a plugin!). I need to use the Helvetica Neue font and I believe its supported in iOS (iosfonts.com). It looks fine on desktop browsers, but the font-family is ignored on iOS (in Safari) and renders as a flat sans-serif font.
I've tried listing various alternatives but with no success. I am using iOS 9.2.1 which is the latest.
Can anyone say why I'm having this issue? And how to make it apply the correct font? I'm about ready to smash stuff... Thanks for any advice.
Related
Why does the font on the left side within the list look so chopy on Chrome? The used and rendered font-face is Source Sans Pro with a font-size: 16px and line-heigth: 24px.
I have double checked the zoom on chrome which is on 100%. When I zoom into the page, the font gets smoother. Also the text within the badges somehow looks strange.
What can I do, to make this font look smoother?
Update
After some trial and error I found the culprit, though I don't understand why it's causing the issues.
I have integrated the font using an #import statement like the following within my scss:
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:300,300i,400,400i,700,700i&display=swap');
When replacing the import url with this...
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
... or when downloading the font and using it with a #font-face statement the fonts went smooth again...
#font-face {
font-family: "Source Sans Pro";
src: url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
}
Why is that? Also now the bootstrap classes font-weight-normal (400), font-weight-light (300) and font-weight-ligther (lighter?) all look the same.
P.S. This seems to be related: Google Webfonts and Anti-aliasing
Fonts on Windows always look less attractive than they do on macOs. That being said, there are 2 things i always have in my typography css to ensure I have maximum control over how it is rendered.
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
edit: Feel free to play around with values, you will get different results so find the one you prefer, this is my personal preference.
I know there are many questions about different font rendering in different browsers.
But I don't think this is because of rendering.
The website is wikipedia,
When I open this in Chrome it looks like this :
As I open this in other browsers (Opera Firefox or even IE) ,it displays this font :
I wonder why the difference? I don't know much about fonts but I checked the CSS code it just define font-family: sans-serif; So is my chrome have something like default settings which I don't seem to find where to change?
PS: I don't find this difference when browsing other websites using Chrome, So How to avoid this difference when writing CSS?
Because font-family: sans-serif; is set, each browser set's their own standard font. This can ofcourse differ between different browsers.
In chrome, you can set the default fonts at chrome://settings/, under advanced settings.
In safari it is less easy, but I could find this post.
In reaction to your edit, you should always define a font stack in CSS to ensure that the correct font is shown.
A font stack is a stack of fonts, used to define different fonts to be chosen. It looks as follows:
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
This defines Arial as the standard font. If however Arial is not found, Helvetica Neue is chosen. If that font is also not present, Helvetica get's set. In the very unlikely case that even Helvetica isn't present, the standard sans-serif font, set by the browser, is chosen.
For reference, you could check out this website. It has a lot of standard font stacks you can use in your CSS.
Every browser makes it able to chose the fonts you want to be displayed
In chrome you have to go to the settings and click 'Show advanced settings' or something like that to find content display adjustments menu
Fonts compatibility should be differs from various browsers. The way to fix the issue is by using the google fonts or call the font extensions supported for various browsers.
#font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
for more details See this link.
I've created a message board (Within an iframe) which uses Bootstrap's CSS.
Both font size's are at 14px, and everything else is the same, yet IE's font size is way smaller than Chromes.
To get IE the same, I have to bump it up to 24px. Is there any way to forcefully standardize this?
Update
Both their fonts are font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Uploaded the correct pic (Without me changing things UI side).
Notice how IE is using a serif font whereas Chrome is using a sans-serif one?
This means IE didn't recognise your font-family CSS, or you're using a custom font file that IE can't read.
Either way, try looking at the Developer Tools to inspect your element, and look in the CSS rules - if your font is crossed out, that means it doesn't like your font-family rule. Otherwise, it doesn't like the font itself.
I am using Open Sans and Open Sans Light font in my site.
And below is the googleapis font link which I am rendering from google fonts.
I want to use Open Sans Light and Open Sans font in some of the text.
If i choose open sans 300,400,600.
and use font name in the class and add font-weight:300 for light and 400 for regular
it doesn't work for ie7 and 8. It shows the big font on ie 7.
but by using font-weight related to the font styling works fine for other browsers.
Need help to fix this for ie7 and 8.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
With Google fonts you won't be able to solve this problem.
The problem is that IE7/8 understands only
font-weight:700 which it interprets as equivalent of font-weight:bold
and
font-weight:400 which it interprets as equivalent of font-weight:normal.
A solution to this is to serve a separate font file to IE7/8 which contains the desired font face weight - google fonts foes not offer this kind of fallback - but it is very nicely solved with Typekit, which than let's you use this kind of crossbrowser font face rule:
font-family: "proxima-nova-n6", "proxima-nova", sans-serif;
font-weight: 600;
The first declaration - "proxima-nova-n6" - provides a fallback for IE7/8 for a weight of 600.
If you want to solve this without paying for a service, you will have to create separate font files containing different font width - upload them to fontsquirell and generate the complete set of formats needed to cover all the browsers. Take care with licenses - not all font's are free to embed on web.
Making a mobile website, for my main website. And all my code shall be W3C validated. I use Verdana as font, and any body knows that MAC/Iphone/Ipads don't have that font. So I thought what if I just overwrite the font. But what if:
One: Will the code be W3C? Answer: YES.
Two: Will it work on all mobile platforms/browsers? Answer: IDK you tell me, new in this world.
Here is the CSS code i want to use:
#font-face
{
font-family: jsverdana;
src :url('fonts/verdana.ttf')
,url('fonts/verdana.eot'); /* IE9 */
}
body{
background-color :#FFFFFF;
background-image :url('/media/common/newbgtest.gif');
font-family :jsverdana,helvetica, sans-serif;
margin :0;
padding :0;
min-width :600px;
}
And yes, i did convert the font "Verdana" This is tested on Iphone 4, and Ipad 1.
Different devices require different font formats, so you should use services like FontSquirrel to generate all of them (and the CSS code for using them), if you use a downloadable font (web font).
On the other hand, Microsoft has copyright on Verdana, so you would need their permission to use it as downloadable font (and even to convert it to other formats).
A more realistic approach is to try and find a suitable free font, perhaps of the fairly nice sans-serif fonts at Google Web Fonts. Or maybe just let each device that hasn’t got Verdana use its own sans-serif font instead (which is what happens when you set font-family: Verdana, sans-serif).