I've applied Open Sans Font to most of a site I am working on. Specifically to the labels. However I am facing a conundrum here. The site is live and rendering the font as it should, but the section I am working on locally (which uses the exact same files as the one live and the code implemented is the same as well) does not render the Open Sans font in the labels. Instead, the System Default font is being rendered which I believe is Helvetica. The interesting thing here is that Helvetica is not even the System Default (browser)! It's the Bootstrap Default font. So, someone is lying.
Here is a screenshot of an Xray of my label font
And here is a screenshot of my Firebug telling me Open Sans is the active font, and Helvetica (inactive) coming from bootstrap.min.css. Yet, this is the one being rendered.
I'd add code to a JFiddler is you need me to, but I don't think it would be of too much help. But ask, and you shall receive :)
Is there a technique I am not using or I should use? It works in the live version, so I know the code has to work.
Thanks
Related
I know there is a total flood of font rendering related questions on all sorts of sites these days. One of them should provide me with an answer, so you would think. However much I search I cannot seem to find a solution for my problem though.
In google chrome almost all fonts are displayed bold. Well that wouldn't really be the end of the world. What bugs me even more is, that they are rendered very jittery. As in they look sort of distorted.
I have made a picture to show the difference between my firefox and chrome font rendering:
http://i.stack.imgur.com/hYRh4.png
I simply want to get rid of this. It has been bothering me for a while and no solution I can find on the web helps.
For the record I have uninstalled and reinstalled chrome. Also I have disabled Direct Write in the chrome://flags.
Any help?
This is actually not a rendering problem, but a font loading problem. Firefox shows Arial (a font optimized for rendering at small sizes), while Chrome shows Helvetica (which is not, at least your installed version).
The editor from your screenshot probably asks for the font Helvetica and, if Helvetica is not available, Arial and other sans-serif fonts. I assume you only have the Bold version of Helvetica installed on your computer. It actually should display the Regular version, but it isn't available.
Firefox therefore falls back on Arial, while Chrome shows the closest weight you do have: the Bold version.
To fix your problem, you should try uninstalling Helvetica Bold (through Control Panel > Fonts). Note it can also go by other names such as Helvetica Neue, Helvetica LT Std, Neue Helvetica, etc. Don't forget to restart just to be sure. Then Chrome should also show the optimized Arial.
Eventhough the question is kind of old, the "problem" may still occur and I found another scenario which causes this text-appearance to happen (which, honestly, brought me here).
In my case, I did not note that my jQuery callback loops and renders the text multiple times to a fix position, about 20 times. I checked the entire css. font-family, text-rendering (geometricPrecision in this scenario), font-weight and what not.
It took me quite a while to figure out that I had 20 divs over each other with the same text, because I've got a very complex and deeply encapsulated DOM there.
So if you ever get here with similar problems, you may also want to check for this one.
The easiest way to check is, to delete the element holding the text using the browser integrated inspector / developer tools (Windows: F12, Mac: ALT+CMD+I) - navigate to "Elements", toggle the left icon (that one with the cursor symbol in it) to blue (active), click the element in your browser. It should be highlighted under "Elements" now, easiest way to find it in the DOM. Right-Click and delete it. If you still see the text, you've most likely got multiple overlays while you only wanted one.
I just want to say that I resolved this issue by deleting a whole Roboto Font Family from the system. (MacOS Big Sur 11.2 (20D64).
I have a website, which is a internet forum, and in my forum posts, I have the following font:
font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;
Now, here's how it looks like in different browsers: (from left: chrome, firefox, IE)
As you can see, chrome is displaying whole different font than the other two. Why? How do I fix that (I want this font to look like the other two)? Also, this is the link to the page I made screenshot of: https://scyk.pl/Forums/Thread/Na%20luzie/8 (look at the post contents)
What is happening is that Google Chrome most likely does not have that font, and is using the fall back fonts instead. To make sure this doesn't happen, you can explicitly load the font using
#font-face
in CSS3, which allows you to explicitly load the fonts by referencing it. You can learn more about using #font-face HERE, where you use src: and get the url of whatever font you are using.
If the font is not that important, however, I recommend not worrying about it and just letting Chrome use the fallback fonts instead.
To do #font-face, the code would be:
#font-face {
font-family:Segoe UI;
src:url(https://github.com/shawnphoffman/shawnphoffman.com/blob/master/Content/fonts/segoe-ui-semilight.woff);
}
You may have to go to the github link and download the raw version of the font, then reference it there.
You have several options but I think you'll find all of them unsatisfactory:
Render the page into an image on the server and send that to the client.
Get the source code for Chrome and replace the font rendering engine with the one used by Firefox.
Oh, btw, it will also look different on Safari (probably a lot different to the other three; Safari is a very sophisticated browser and it will try it's utmost to make a page look good; driving web designers insane in the process is a small price to pay for beauty ;-)).
Rendering text is something that you only have limited control over. Maybe Chrome doesn't find Segoe UI, maybe the font rendering engine can't use the hinting of your font. While not ideal, I suggest not to spend too much time on it.
I have modified the code of someone else who are trying to load three google fonts.
They have 3 css file. Every css file have used one css font from google web fonts. In chrome dev tool I have seen only one fonts work and other 2 not.
it's happen because only one can applied so chrome trying to download one. When they changed the font on dropdown's select change it's not worked because font is even not loaded in chrome.
Because I want to load the font when they changed the dropdown so I write this code:
<div id="hiddenFontLoader"></div>
CSS:
#hiddenFontLoader {
font-family: 'Quicksand', 'Cantarell';
display: none;
}
This code help me to load other 2 fonts that is used nowhere and will be used when dropdown changed.
Now I want to prove that it's working. For me I can just set the font 400% and can check that is working or not.
What is the proper way to test the font is loaded or not. I means if I use fallback fonts then I can't check if all fonts have very small difference and fallback font are very similar to the font I load from Google font.
Suppose I applied to the body{} then how to confirm it's work in chrome dev tool or firebug.
Anybody have trick for it.
You should consider using Google WebFont Loader.
The documentation is very thorough. Specifically, check out the Acting on Events.
https://developers.google.com/webfonts/docs/webfont_loader
I believe you are looking active event (Click Here!).
I am not sure what happened to my css font-family that I was using on my website. Until yesterday it was working on. Then this morning it stopped working on Chrome and then later on FireFox & Safari (Mac).
Weird thing is that it looks fine on one of my teammates computer (Linux) but also looks bad on a friend's Mac computer. No idea what happened. When I inspect the element I can see the CSS font-family attribute but it is crossed out, as if the font did not load.
This is how I have my fonts added on my CSS:
#import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Open+Sans:600italic,400,600,700|Helvetica+Neue:400,500,700);
This is how it looks now and how it should look.
Completely stuck, no idea what happened.
Remove the part |Helvetica+Neue:400,500,700.
Google Web Fonts do not contain Helvetica Neue. It is a commercial font, not available for free, and probably not available as a web font for a fee either.
When you have a font that does not exist at Google Web Fonts in your requests, the Google server responds with 403 Forbidden and does not send any font. You can see this if you use the developer tools (F12) and look at the Network section when loading your page.
When you split your request to three requests, one for each font family, the other requests are successful. But it is more efficient to do have the two font families in one request and drop Helvetica Neue (or replace it with some font that Google actually has).
Ok, got it to work. Not sure what happened. All I did is change the line:
#import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Open+Sans:600italic,400,600,700|Helvetica+Neue:400,500,700);
to:
#import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
#import url(http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,600,700);
#import url(http://fonts.googleapis.com/css?family=Helvetica+Neue:400,500,700);
Helvetica Neue is in fact available at Google Fonts:
http://fonts.googleapis.com/css?family=Helvetica+Neue
I'm having a little difficulty getting Chrome to recognise my font-choice. I've not got a lot of code as I've only just started this website.
Basically I have a reset.css on the website and then my main.css is called afterwards. In the reset.css it declares the below statement under pretty much every html tag under the sun:
font-family:Arial, Helvetica, sans-serif;
In the main.css the same statement is declared under html, body and p, and even some specific p tags such as p.headerText and p.newsDate
This is a pretty standard setup. On Safari, IE and Firefox, the font renders as Arial / Helvetica, on Chrome it renders as Times New Roman.
It's really frustrating. Can anybody help?
UPDATE
The Computed Style on Chrome is showing the correct rule, and I even tested this on a friend of mines machine and it was the same. Both running Chrome 8.0.552.237 on OSX 10.6.6
Cheers
I've figured out the problem. I'd used the font-weight: lighter; command - I removed this and the problem disappeared. This would suggest that it's a clash of fonts on my machine. Still don't understand why it appeared fine on everyone else's machine but the problem is now fixed - doesn't look right because I have to use a heavier font but it's still works.
UPDATE
We're a graphic design agency so there are thousands of font-variations on my machine. It seems the clash was there. I swapped Helvetica and Arial in the font-stack and it seems to be fine all round now.
Also, it seems to do with Chrome and Font Books that aren't the standard ones on a Mac. I did some hunting and I found a script that'll work, albeit temporarily. http://www.danielhanly.com/blog/tutorial/google-chrome-for-mac-broken-fonts/
This will clear your internal font cache and will fix the problem for a short time.
Essentially, this isn't a problem with the code, but rather, a problem with my development machine. There's some clash of fonts happening when we manage our fonts with a non-standard font manager (Linotype FontExplorer). Strange that it's only in Chrome though.
Exactly the same problem (only in Chrome) occurred to me!
But after deactivation of font "Arial" (no matter if truetype, postscript, opentype etc.) in my Mac SnowLeopard system, this effect of displaying Times New Roman instead a Sans Serif Font like Arial, Helvetica, Verdana etc. disappeared completely.
I hope it helps.
Modellname: iMac
Modell-Identifizierung: iMac10,1
Prozessortyp: Intel Core 2 Duo
Prozessorgeschwindigkeit: 3,06 GHz
Anzahl der Prozessoren: 1
Gesamtzahl der Kerne: 2
L2-Cache: 3 MB
Speicher: 4 GB
Busgeschwindigkeit: 1,07 GHz
Please try to "Inspect element" with Chrome, and look at "computed style". What is it written?
Always inspecting styles, is your font-family overwritten?
Update
I tried for you. I see Arial, the right font. See attachment.
Have you tried a cache-less refresh? (Ctrl+Shift+R)
It's possible that chrome is using an older, cached copy of the CSS.
In my case, I was using bootstrap on a page. It was the specification of text-rendering: optimizelegibility; that was causing the rendering problem of my font in Chrome.
I changed it to text-rendering: auto; and that seemed to fix the problem.