Today, font-style:italic in css is rendering my fonts in bold, only on Chrome and Firefox - not on Safari.
For instance, using this css:
em {
font-style: italic;
}
and this HTML:
<p><em>Hi, I'm showing up in bold.</em></p>
displays in italics AND bold.
I've tried restoring CSS from two days ago before I noticed the bug, to no effect, so it seems like it's something other than the CSS causing this. I've tried validating the HTML and CSS, nothing shows up that seems to be the source.
An example of this shows on this page: https://critter.co/home/orgs/
Actual link/code: https://fonts.googleapis.com/css?family=Open+Sans:800italic,400
on your page...
You have just font-weight:800, for italic.
Change it with:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800italic,400italic,300,300italic,600,600italic,700,700italic,800' rel='stylesheet' type='text/css'>
so you have all possible variations... P.S. Specify then font-weight in CSS, and rendering can be more consistent, in all browsers.
Related
i'm walking into this weird thing where my footer is showing different font weights with the same CSS code.
It is built in wordpress.
The footer is the exact same code on all pages but only shows propperly on the homepage. The font-weight cannot go below 400 on all the pages beside the homepage, also changing the propperty in chrome dev tool does not work below 400?
Homepage: fixed
screenshots: https://imgur.com/a/nlk9p5o
CSS :
.footer-widgets {
color: #333;
font-weight: 300;
}
font-face :
<link href="https://fonts.googleapis.com/css?family=Oswald|Work+Sans&display=swap" rel="stylesheet">
Font-family code on the different pages are also not striped through or anything in the dev tool! So this means they are not being overwritten somewhere else
Try to put this link for your font :)
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700|Work+Sans:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">
https://fonts.googleapis.com/css?family=Oswald|Work+Sans:300&display=swap use this it will work. If you have to use different font weight you have to choose from google font which weight you need as per screenshot.
You probobly have some other css overrideing , this works however ( tested in chrome devtools)
font-weight: 100 !important;
On page load in IE, the page is displayed for a fraction of second with no custom font, then it renders fine. But this behavior is not in Chrome. Any suggestion how to prevent it.
Thanks
Use always google fonts for websites in this way.
Add in Html
<head>
<title>Website Name</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
Add in CSS
body{
font-family: 'Open Sans', sans-serif;
}
font loading speed depend on the size of the font, your browser cache, and the bandwidth of your network.
that aside, why there is no problem in chrome? it might be because of the way the browser was designed. IE is old, and I bet that your chrome is brand new. so it might be that chrome has a better thread management than IE.
what to do to minimize the effect? you can try to reduce the size of your font. for example, if you use the font for icons, then you can remove the icons that you are not using.
another way is to use windows build in fonts for display in IE, that way, the browser does not need to download fonts. for example, you can use century gothic, impact, or calibri
This has me completely stumped. I have a website that used a serif font for the header and a sans-serif font for the body text. The index page loads fine in IE9. However, when navigating to other pages and returning to the index page, text is rendered in a serif font. Navigation styles are not affected.
When the page is refreshed, it displays properly. Only the index page is affected.
This does not happen in any other browser.
The HTML and CSS have been validated with no errors.
I have tried adding !important to the sans-serif font in the CSS with no change.
I have tried adding the font declaration to each element with no change.
The CSS looks like this:
#header {
font-family:"Times New Roman", Georgia, serif;
}
#section {
font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
}
What makes this more mysterious, is that occassionally, the page performs as expected.
Help would be greatly appreciated!
could possibly be #imports not downloading sequentially...although they should already be cashed. easy fix would be to generate open sans #font-face rule declaration via font squirrel, place that in your style sheet. or change your initial import to a link element, as well as pulling the google font import statement out and making it a link element as well, placing it above the other style sheet. you can read more here: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
The problem was caused by the way the CSS sheet was linked within the head.
Original code:
<style>
#import url(css/stylesheet.css);
</style>
New declaration:
<link rel="stylesheet" href="css/stylesheet.css">
What made this mysterious was that pages would load correctly and only a couple pages were affected. The problem appeared only after a page was visited and only with Internet Explorer. Thank you Albert, for giving me a clue to solve this.
Okay, I'm not going to post the entire css code for your own sake lol, but it's here http://pattersoncode.ca/incls/style.css
Anyway, I don't know whether it's a problem with my browser (Safari 7) but whenever the page fully loads, all the writing turns bold, and it looks out of place.
As you can see, I've set font-weight: normal !IMPORTANT on many areas of my code to see if that would solve it, but it didn't.
I guarantee you have a LABEL or H2 that isn't closed properly. You have only have only 2 elements with a bold definition: LABEL and H2 If you have closing tags missing or out of sequence, the style will cascade in the document, making everything bold.
Looks like Google's #font-face declaration is overwriting your own font-weight. That may be because Google's Font CSS comes right AFTER your style.css. Try placing Google's font-face css BEFORE your style.css, like this:
<link href="http://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://pattersoncode.ca/incls/style.css">
Then reset overwrite font-weight again in your style.css
I've been doing front end development for a long time, and I have NEVER come across a bug like this before...
Save the following HTML to a file and view it in Firefox (mine is 3.6.3):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body { font-family: Helvetica, Sans-Serif;}
h2 {font-weight: normal;}
</style>
</head>
<body>
<h2>Some normal text <strong>some bold text</strong> weird huh?</h2>
</body>
</html>
If you don't want to give it a shot the output is like your cat walked across your keyboard while character map was turned on, except in the strong tags.
I feel like this may be a font issue? When I get rid of font-weight: normal it goes back to normal, but I don't want everything to be bolded in my h2... Anyone have any ideas? More importantly, is anyone able to reproduce this??
Thanks.
EDIT
Here's a screenshot. It works fine in all other browsers, and all text that has not previously been set as bold (normal text) renders fine.
This seems to be something Helvetica specific. Here is a number of reports with screenshots that look exactly like your case.
Mozilla Bug #444203 - Helvetica font rendering garbled/garbage on some web sites
Mozilla Forum - Firefox 3 displays garbage characters
They mention workarounds. On server side:
if the CSS definition defines the font family using font: instead of
font-family:, this bug does not occur.
when setting the font-family by way of font-family: (instead of by font:),
the error only occurs once you're showing fonts over 20pixels in size. It
doesn't matter if the font size is set by way of em or px, but once the actual
display size is over 20px, it gets garbled.
On the client side, it seems to be recommended to remove or re-install the Helvetica font. Can you check your fonts folder for any HELVETIC.TTF or similar files?
Have you checked your encoding?
When you remove Helvetica or Sans-Serif and replace them with other fonts, do you have the same problem? For example, have you tried using another fonts and then combinations of Helvetica and Sans-Serif with those:
Courier, Helvetica
Courier, Sans-Serif
This is may be due to a strange version of Helvetica loaded on your machine. Try disabling that font locally and see what happens.
Looks like this is something to do with the encoding (and not font).
Check your encoding as it is decided by firefox: View -> Character Encoding.
Is it UTF-8?
Does changing it to anything else (say Western (ISO8859-1)) change the characters?
Can you try disabling your addons, especially the theme and check (start firefox in safe mode)? Perhaps some add on is meddling with the encodings...