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...
Related
I have the following problem: I'm using the variable font from the family inter (https://rsms.me/inter/) and implemented it the following way:
#font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
src: url("Inter-roman.var.woff2?v=3.15") format("woff2");
}
html { font-family: 'Inter var', sans-serif; }
When styling a font, I only want to change the font-weight, therefore I declare it like this:
p { font-variation-settings: 'wght' 200; }
The browser renders the font in the correct family and weight, but unfortunately on page load, the font always "flickers" shortly. It seems to me, that the browser first renders the font in the normal font-weight and then re-renders it with my wanted weight. This issue is happening on all fonts I use with the variable font-variation-settings.
The behaviour happens on every page load, also on reloads. You can have a look at the issue during page-reload here:
Thanks for a hint!
As we have found there are many causes for font flickering.
The solution for the problem that promted this post was found by the post creator:
"I have fixed it somehow: I have asked the creator of the font and this was his answer: "Probably because you are using font-display:swap (it intentionally causes "flicker" for requests to fonts that are not cached in the client, which should be rare.) See developer.mozilla.org/en-US/docs/Web/CSS/#font-face/…" If I change the font-display to block, it does not flicker anymore but there is a longer period of time, where the font doesnt get rendered. I have decided to change the project and work with an standard not variable font. – Mista K."
Loading on a server:
While I am certainly not an expert on this. Loading the file on a server fixes the problem. This is likely due to the style sheet being cached when loaded on a server.
Changing font:
This is not so much a fix, but errors may be caused by the font itself infortunately.
Another quick fix:
Adding a loading screen may be required for a project and thus the font can be loaded within this.
Sorry this is not the most definitive post, this is just what we have found to be solutions over discussing this problem. Feel free to comment on this to add to this or even to tell me I'm wrong.
This seems to be a problem with the font it's self the best solution I can give is to simply use another font. I would recommend using google fonts
HTML:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
</head>
CSS:
p {
font-family: 'Open Sans';
}
----------Original Post----------
Why not just simply use p {font-weight: 200;} instead, this might solve the problem and would probaly be easier to read (at least from an external persective)
Also try adding your font-family to body instead of html if this doesn't work
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
I'm using Open Sans font from Google Fonts on one of my page, and altho I'm using almost the same style regarding the font as Google does, my diacritics are somewhat thicker than the rest of the letters:
(you can see the live version at www.cabsurf.com)
The only difference in my CSS is the way I declare the font family:
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
But it will look the same even if I leave only Open Sans in the declaration.
I've placed the same text in Google Fonts page above (using inspect element in Chrome) and the text is rendered correctly on their side, so I know the font is ok.
Any idea what am I doing wrong ?
EDIT:
Using Chrome 27 / Firefox 22 on MacOS X 10.8.4
Google will use any sub-set of the font it wants. Did you make sure to check the correct boxes when you got the code for it?
When I append <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300&subset=latin,cyrillic-ext,cyrillic,latin-ext' rel='stylesheet' type='text/css'>to your <head>, all the characters look correct.
Just make sure to check whichever sub-sets you need so you don't get unnecessarily large files.
I'm doing a Photoshop-to-XHTML conversion, and the website designer used the Myriad Pro Semi-bold font which looks good in the photoshop file, but when I try the semi-bold option in CSS, it looks pretty much like a normal bold font, which is too bold for my purpose. Is there a way to achieve a nicer looking semi-bold font in HTML and CSS or am I just stuck with 'font-weight: 600;'?
In CSS, for the font-weight property, the value: normal defaults to the numeric value 400, and bold to 700.
If you want to specify other weights, you need to give the number value. That number value needs to be supported for the font family that you are using.
For example you would define semi-bold like this:
font-weight: 600;
Here an JSFiddle using 'Open Sans' font family, loaded with the above weights.
The practical way is setting font-family to a value that is the specific name of the semibold version, such as
font-family: "Myriad pro Semibold"
if that’s the name. (Personally I use my own font listing tool, which runs on Internet Explorer only to see the fonts in my system by names as usable in CSS.)
In this approach, font-weight is not needed (and probably better not set).
Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work.
Testing with Segoe UI, which often exists in different font weight versions on Windows systems, I was able to make Internet Explorer 9 select the proper version when using the logical approach (of using the font family name Segoe UI and different font-weight values), but it failed on Firefox 9 and Chrome 16 (only normal and bold work). On all of these browsers, for example, setting font-family: Segoe UI Light works OK.
For me the following works good. Just add it. You can edit it as per your requirement. This is just a nice trick I use.
text-shadow : 0 0 0 #your-font-color;
font-family: 'Open Sans'; font-weight: 600; important to change to a different font-family
By mid-2016 the Chromium engine (v53) supports just 3 emphasis styles:
Plain text, bold, and super-bold...
<div style="font:normal 400 14px Arial;">Testing</div>
<div style="font:normal 700 14px Arial;">Testing</div>
<div style="font:normal 800 14px Arial;">Testing</div>
Select fonts by specifying the weights you need on load
Font-families consist of several distinct fonts
For example, extra-bold will make the font look quite different in say, Photoshop, because you're selecting a different font. The same applies to italic font, which can look very different indeed. Setting font-weight:800 or font-style:italic may result in just a best effort of the web browser to fatten or slant the normal font in the family.
Even though you're loading a font-family, you must specify the weights and styles you need for some web browsers to let you select a different font in the family with font-weight and font-style.
Example
This example specifies the light, normal, normal italic, bold, and extra-bold fonts in the font family Open Sans:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
<style>
body {
font-family: 'Open Sans', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div style="font-weight:400">Didn't work with all the fonts</div>
<div style="font-weight:600">Didn't work with all the fonts</div>
<div style="font-weight:800">Didn't work with all the fonts</div>
</body>
</html>
Reference
(Quora warning, please remove if not allowed.)
https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts
Testing
Tested working in Firefox 66.0.3 on Mac and Firefox 36.0.1 in Windows.
Non-Google fonts
Other fonts must be uploaded to the server, style and weight specified by their individual names.
System fonts
Assume nothing, font-wise, about what device is visiting your website or what fonts are installed on its OS.
(You may use the fall-backs of serif and sans-serif, but you will get the font mapped to these by the individual web browser version used, within the fonts available in the OS version it's running under, and not what you designed.)
Testing should be done with the font temporarily uninstalled from your system, to be sure that your design is in effect.
I used Google web fonts for my H1 text and the text looks very pixelated on my screen.
<link href='http://fonts.googleapis.com/css?family=Forum&v2' rel='stylesheet' type='text/css'>
<style media="screen" type="text/css">
h1 {
color:#544E4F;
font-family: 'Forum', cursive;
text-align:center;
margin: auto;
font-size:210%;
}
</style>
Thanks in advance!
After suffering the same problem for a long time, and after doing a lot of research about it, I finally did the following:
I found http://www.fontsquirrel.com
I downloaded the (pixellated) font I was using (Exo family)
I uploaded it to my site
I referenced it locally to avoid using Google Fonts (you can achieve this by downloading a #font-face Kit that is available at fontsquirrel.com also).
It looks OK to me. However note that h1 receives the style:
font-weight: bold;
in most browsers' default style sheets. Since you only have a normal-weight variant of the font available, the browser has to synthesise the bold weight automatically from the normal. There are various different methods of auto-bolding of varying levels of quality, but it's never going to look as good as a real designed bold. Maybe you are getting a poorly-synthesised font variant.
If you want to use Forum for headings I suggest adding the rule:
font-weight: normal;
which will allow the browser to use the regular, unmolested font. Alternatively if you really do want that bold, best choose a different font that does actually have a bold weight.
Another possibility is that you've got anti-aliasing turned off at a system level, and it's being overridden for your normal browser font but not for web fonts. If that's the problem then you could try to override for everything else using eg:
font-smooth: always;
-webkit-font-smoothing: antialiased;
although it's questionable whether it's really a good idea to be ignoring the user's preferences, and also arguable whether it should be subpixel-antialiased instead for WebKit...
Well I'm just throwing these out there, but..
My best guess is to use em rather than % for your font size. Such as, font-size:4.5em.
Maybe try using a div instead of h1, though I doubt that would do much of anything.
Try adding this:
h1 {
text-shadow:0 0 1px transparent;
}