I am facing a problem that my font weight depends on the font size
Below code doesn't work
font-size: 14px;
font-weight: 500;
Below code works
font-size: 18px;
font-weight: 500;
Figma has no problem with this. what could be the CSS-problem?
The problem is the antialiasing of the text. It can be an issue of the font itself, if it is not optimized for smaller text for example. Or it's because of the If it is optmized, it could be a problem of the generel font rendering. MacOS tend to make fonts bigger then they are. Set font-smoothing to prevent this behavior.
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Here is an example (and mixin for Sass):
https://codepen.io/macx/pen/gOMgKd
Related
I'm hosting my own fonts, but I've also created a fiddle linking to Google fonts and the problem remains.
All browsers change the weight of the font in the H tags.
I find this a bit disconcerting particularly when in my case I'm specifying the font file that should be used.
If for example I set, both <h3> and <p>, with font-family: 'robotoregular'; and use the same exact font-size in both cases, I would expect the same exact result in both of them. Instead, what the browsers produce is a bold version of the font in the <h3>, and the only way to set it right is to specify the font-weight, which shouldn't be necessary if I'm already indicating a specific font file.
Is this behavior to be expected, and why does this happen?
Here's a Fiddle
#font-face {
font-family: 'robotoregular';
src: local('robotoregular'), url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
local('robotoregular'), url('../fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'robotoregular';
font-size: 27px;
}
h3 {
font-family: 'robotoregular';
font-size: 27px;
font-weight: normal; /*IF NOT INCLUDED, THE BROWSER WILL MAKE IT BOLD*/
}
Browsers apply a wide variety of defaults. Headers get font-weight: bold, among other things (like margins).
If you want complete, total control, consider a reset stylesheet.
DUPLICATE CLARIFICATION - This question relates to cross browser differences in font weights, the question highlighted as possible duplicate relates to uploading font files correctly.
I'm uploading a site onto Wordpress using a child theme of html5blank and am getting variations of font-weights across different browsers which I'm not getting with just the stand alone front-end text files.
This is what I mean on text for a hover effect -
Chrome/Safari
Firefox (this is what I want)
I've tried to use the code from the answer of this stack question
body {
-webkit-font-smoothing: subpixel-antialiased;
}
But that hasn't worked. If I use font-weight: bold; then it works for Chrome but throws out Firefox and Safari. This is the font I'm using -
#font-face {
font-family: 'Gotham-Light';
src: url('fonts/Gotham-Light.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Gotham-Light', sans-serif;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
Is there any way I can fix this? The client is a design professional and was quite specific on stuff like this. Any help appreciated.
First, you should have all of the font types associated with that typeface for cross-browser compatibility:
CSS3 Web Fonts
You can actually make them here:
Font Squirrel Webfont Generator
And sometimes you cannot control how browsers will handle different fonts. Safari will act totally different than Firefox, etc.
Lastly: It does help to use actual font WEIGHTS instead of the default "bold" and "light".
Example:
body {
font-family: 'Gotham-Light', sans-serif;
font-weight: 300;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
I hope this helps.
I'm debugging this website. For some reason on IE9, the font sizes load normally and then shrink once everything has loaded.
What's causing this and how can it be fixed? I've double checked with the IE9 inspector and the px values seem to be missing from the body in the CSS.
Here's what I'm seeing via the IE9 inspector:
The CSS should read:
body {
color: #555;
font-family: "Avenir LT W01_55 Roman1475520", Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.875;
font-weight: normal;
}
Apparently IE9 has built-in font-size: 100% for body aswell as html. Set font-sizes for p tag.
I have an issue with trying to maintain a constant font style across all browsers. As seen below, safari's font rendering system makes the font weight smaller than the font weight of chrome's.
Safari:
Chrome:
I've tried using the solutions found on other questions though they have not solved this issue. How can I maintain a constant font style across all the major browsers? That is Chrome, Safari, Opera, Firefox and Internet Explorer.
Here is what I have tried.
-webkit-font-smoothing: antialiased;
font-weight: 800;
text-rendering: optimizeLegibility;
Browsers, by and large, have different font rendering engines/methods. For more details, I recommend reading this, this, and/or this.
Honestly, to the average user, the difference will not be all that noticeable and for the most part, pixel-perfect cross-browser display of anything has been long abandoned as a print-world aftereffect.
If, for some masochistic reason, pixel perfection is more important than sanity and maintainable code, you can try the old standy-bys (text-in-images, image/text replacment) or turning off subpixel rendering via CSS (although not all browser support it, and the text will be less readable).
Hope that helps.
A lot of the differences are more to do with the fact browsers add or omit different default weights / styles to fonts. To stop this happening make sure in your CSS you have font-weight: normal and font-style: normal in your #fontface code block.
You then need to apply the necessary styles to the HTML elements.
So if I have a font called geo-light I would do:
#font-face {font-family: 'geo-light';
src: url('fonts/geo-extralight.woff2') format('woff2'), url('fonts/geo-extralight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
And then add the specific styles for each element that uses that font.
/*SET STYLES ON ELEMENTS*/
h1, h2, h3, h3 > a, p, li {
font-family: 'geo-light', sans-serif;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
I hardly ever see this done on sites, and the pre-cursor to this is what is happening in your image. Those differences are not being caused by an anti-aliasing issue.
This 1st and 3rd articles in the original answer are regarding a completely different problem and the middle article that is being linked to would mean the reverse effect happening in your image examples.
The previous comment helped me a lot, thank you. I managed this way in wordpress and it works. Put this code with your font "YOUR-FONT" in to your CSS.
#font-face {
font-family: 'Conthrax';
src: url('/wp-content/uploads/fonts/conthrax-sb.eot');
src: url('/wp-content/uploads/fonts/conthrax-sb.eot') format('embedded-opentype'),
url('/wp-content/uploads/fonts/conthrax-sb-webfont.wofff') format('woff'),
url('/wp-content/uploads/fonts/conthrax-sb.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Using a combination of the following styles should result in an almost consistent rendering of a font across all browsers.
{
-webkit-font-smoothing: antialiased;
font-synthesis: none;
text-rendering: optimizeLegibility;
}
I'm using #font-face to load the web fonts which is loading correctly:
#font-face {
font-family: 'HelveticaNeueLight';
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot');
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot') format('embedded-opentype'),
url('fonts/HelveticaNeueLight/helveticaneuelight.woff') format('woff'),
url('fonts/HelveticaNeueLight/helveticaneuelight.ttf') format('truetype'),
url('fonts/HelveticaNeueLight/helveticaneuelight.svg#HelveticaNeueLight') format('svg');
font-weight: normal;
font-style: normal;
font-variant:normal;
}
I also have another class to style and bold the text:
.BusinessLeftHeader{
font-family: HelveticaNeueLight;
font-size: 32px;
padding: 30px 0 5px;
text-align: center;
line-height: 1;
font-variant: normal;
}
Now, the problem is that font is not looking bold on iPad 2. It looks like text is showing with blurry effect or something like this.
I also have use this code to fix this problem.
-moz-font-smoothing: none;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
But again, still getting same problem. Text is not looking good on iPad 2. When I zoom in, it looks fine.
There are a few considerations here, firstly you have conflicting style settings:
-moz-font-smoothing: none;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
They should all be set to either antialiased or none.
You also state you wish to have a bold font, however you have not set the font-weight style and are using a font called HelveticaNeueLight which I imagine by its very name, is not bold nor include a bold version. At the least you will need to set:
font-weight:bold
Additionally, the issue is likely that the custom font you are using is not packaged with a bold version. In such instances a browser will typically 'interpret' how it should render a bold version using the available typeface, producing unexpected results. You may want to either include a bold version of the font or reference a specific weight if one is included.