I know this is a common issue, but I haven't been able to solve this issue. I'm using Pictos webfont via tumblr as a CDN on this blog http://mrelliotb.tumblr.com/, however, in FF it does not render. I'm looking for a way to make it work and/or a way to detect the failure in rendering as to remove the extraneous letters that should be rendered.
Thanks in advance!
Check the comments on the accepted answer in this thread. It deals specifically with your problem:
CSS #font-face not working with Firefox, but working with Chrome and IE
In a nutshell, Firefox does not like the cross-domain hosting for the fonts, and you should base64 encode them directly in to the stylesheet
You can easily base64 encode your font by using this wizard and selecting advanced/Base64 encode.
http://www.fontsquirrel.com/fontface/generator
from my browser, your font now is helvetics and not pictos web font. did you have some #font-face at your stylesheet? and second, if it is problem with firefox you just have to make sure your config at
option->content-> advance button at font -> make sure your the setting is allow the web render its own font
may this help
Related
I'm currently building a site where I'm using fonts.com to display a custom font for headers and subheaders. The font gets loaded via fonts.com javascript link and is then referenced in the CSS file as:
font-family: 'MyFontFromFontsDotCom';
It works fine and performs well. In IE8, however, the browser crashes after the font gets loaded (it never loads fully though) and the site. When I hit the "stop" button in the browser, the site gets rendered with the correct font.
I have a modernizr 2.6.2 running aswell which is referenced before the fonts.com javascript. When I remove the fonts.com javascript, the site runs just fine.
The fonts.com javascript reference is at the bottom of the body tag and the modernizr is at the head tag. I tried moving them around without any luck.
Has anyone experienced the same issue?
Thanks in advance.
I came across this issue when I was cross browser testing a site on IE 8. I fixed the issue by using the 'Non-javascript' (CSS) option.
You can get to this by going to the Manage Web Fonts section on fonts.com, selecting your project and then clicking the 'Publish Options' link.
In the window that pops up there is a tab for 'Option 2: Non-Javascript', this will give you a code snippet for CSS instead of Javascript. You should paste this in the head and then remove the Javascript snippet.
I know an answer was already accepted for this, and it is perfectly valid solution (using the CSS option instead of the Javascript option), but there is another possible solution if you do need the Javascript option (I like to have the -active classes added to my document).
It turns out there is a known issue with the fonts.com Javascript on IE8 when there are unclosed tags. So if you have a situation like:
<div><span>March 2014</div>
This will cause the fonts.com Javascript to cause troubles.
So find and fix unclosed tags with the W3C validator!
I have some content on a web page that uses funny fonts to display correctly by using #font-face to use some custom fonts. I include a warning that it might not display correctly on all browsers. The content isn't really essential to the page, so what I'd really like to do instead is simply not show it if the browser isn't going to do it, due to browser version, script blocking, or whatever. Is there a way to do that?
Modernizr has this built-in. Here's a link to a build that just checks for #font-face support.
http://modernizr.com/download/#-fontface-shiv-cssclasses-teststyles-load
Then you can check in JS for Modernizr.fontface or in the css for .fontface { }.
Here's a fancy explanation of how to do it:
http://paulirish.com/2009/font-face-feature-detection/
To be clear you can pretty much support every browser with #font-face, except for some versions of Android.
http://caniuse.com/#search=font
Your bigger problem with #font-face isn't the basic support for #font-face, but support for the specific font file type, which is more limited. I personally suggest to use WOFF, which works in IE9+. Alternatively, if you use Typekit or Font-Squirrel you can pretty much support all browsers out of the box.
When I tried some of the Asian sites (for example http://www.asahi.com/) it displayed the fonts correctly. I did not install those Asian fonts in my PC. Where the browser is getting the fonts from? Is it always dynamically downloads the font from web server ?
How to implement this support in my web server - Should I generate some java script or so?
The fonts are installed on the browsers.
Though, it is possible to define custom fonts thanks to the #font-face technology (entirely in CSS).
Search for #font-face, Cufon fonts etc.
Cufon basically is a font-replacement technique that uses javascript and vector graphics to write fonts from a font file.
I can't find any sign that they specify the font family at all. Certainly the bulk of text is rendered in Times for me, which is the default.
Your default font just includes characters you didn't know it contained.
There are ways to use custom fonts but they aren't using any of them.
When defining the font using css rules, you can add a src attribute specifying a url to fetch the font from a remote location.
Try this link for more info.
Also check out Google Web Fonts, which can provide you with a selection of fonts relatively easily, by adding an appropriate link tag to the header of your page.
Your PC almost certainly does include fonts with many Asian characters. When the web page includes characters that are not supported by the default font (such as Times or Verdana) you're using, browsers will automatically find an alternative font and use that instead, so that you still get readable text.
For Firefox, at least, there's a "fontinfo" add-on you can use to determine what font is actually being used to display any given piece of text - as it may not be the default font, or the font requested by CSS.
Web sites can use various techniques (including libraries like cufon or typeface.js, though CSS #font-face is usually a better option now that it's widely supported) to provide custom fonts for their pages, but this is not necessary in order for Asian text (for example) to be displayed on a typical PC.
What has changed browser wise, that people are using these funky font's w/o graphics by referencing .js files?
like typekit?
In modern browsers (firefox,chrome,safari) javascript create canvas element to create the font text
In Internet Explorer they use Computer Vision Markup Language
You can use the #font-face declaration to specify a custom font that the browser will render. Typekit uses js to make sure #font-face works across browsers.
You can read about implementing custom fonts here: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
like eyelidlessness mentioned, Font Squirrel is a great resource for this. Gives you tha markup and everything.
How can you remove the favicon using Javascript in google chrome? The goal is to return it to the browser default, which is in this case a blank image.
I found this question, but it doesn't work if you leave the link.href attribute as empty.
Even if the favicon is set because there is a favicon.ico file on the server, I'd like to remove it and set it back to the default.
This only needs to work in chrome.
Thanks!
Have you tried using an empty transparent image?
Try:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFFAADATTAuQQAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAEklEQVQ4y2NgGAWjYBSMAggAAAQQAAGFP6pyAAAAAElFTkSuQmCC
Putting those comments into answer form:
Suggestions:
chrome-resource://favicon/ or chrome://favicon/
Dynamic Favicon with AJAX
Chrome extension (hopefully you can base it off of this)
I'm a bit surprised the AJAX solution worked for you because, I'm on Chrome 4.1.249.1064 (45376) and it doesn't work for me.
EDIT: It doesn't seem like you'll need much from the AJAX solution. It seems that favicon.js is all you really need. All it seems to do is what the JavaScript solution you mentioned plus a little more handling (ie remove existing favicon). Their "dynamic" part is just a document.onkeypress.
EDIT: Additional reference:
chrome.tabs.executeScript
Whitelisting the favicon
As a combination of #MatthewFlachen's answer and what I found here: Dynamically generated favicon, one can dynamically generate a blank data url using the canvas API.
link.href = document.createElement("canvas").toDataURL("image/x-icon");