How to let #font-face work in Firefox using Weebly - font-face

I've succesfully used the #font-face rule to use a font on my Weebly website. That is... in Chrome, not Firefox. I've found the 'hack' to use a .htaccess file. But Weebly doesn't allow to add a .htaccess file. So I'm back to square one... Any tips, anyone?
http://www.ziehaar.nl

The problem with your font rendering in Firefox comes from permission directives. For security reasons, Firefox has a set of directives for font-face that includes the dreaded "Same Origin Policy" restriction, which means your fonts have to be served from the same domain the page resides at. So, with that in mind, we can have the easiest solution:
Solution #1
host your fonts at www.ziehaar.nl (and warning: depending on the .htaccess file you have in your site, the www. part will make a difference, meaning that you might be able to see the font if you type www.ziehaar.nl yet not see it if you type ziehaar.nl
Solution #2
Host the fonts elsewhere, and take a look at this thread at Stack Overflow on ways to circumvent the "same origin policy" rule.
Solution #3
Add the following to your .htaccess file:
<FilesMatch "\.(eot|otf|woff|ttf)$">
SetEnvIf Origin ยป
"^http(s)?://(.+\.)?(weebly\.com|ziehaar\.nl)$" origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>
Depending on your skills you may try to use different solution until it works, but just for the sake of it and to show everything other than cross-domain policies are fine, take a look at the image below:
As you may see, I'm seeing your fonts correctly in Firefox after testing. That's because I loaded your font files and now they're in my Firefox cache , hence the cross-domain isn't affecting the rendering of those fonts.
Anyways, hope this helps, just let us know how it goes

Related

Resolving Mixed Content warning from external insecure server

I have a https site and need to show content from other sites that may or may not be themselves https. Predictably enough, I'm getting warning messages like this in the console...
"Mixed Content: The page at 'https://www.example.com/' (my server) was loaded over HTTPS, but requested an insecure image 'http://www.aninsecuredomain.com/image.jpg'. (not my server) This content should also be served over HTTPS."
(not to the mention the fact that I no longer see the little padlock displayed properly in most browsers who now consider my site's network insecure).
I've read through a bunch of posts on SO on this topic, but I can't seem to find a definitive answer on whether there's anything I can do when I don't own the external servers (so can't guarantee they'll have a https version). Appreciate any thoughts on whether this is possible, and if so how I could go about achieving it!
When you need to include content from another domain in an https webpages you can:
Make the owner of the other domain commit to https by explaining him the security reason behind that
Proxy the content through your website or host it yourself (if you have right to do it)
(If you don't see the padlock anymore it's because your page is no longer secure because it include insecure elements that could have been tempered: it's not they "consider my site's network insecure", it is indeed insecure!)
You should use the // prefix. (instead of http[s]://)
On an https page, the secure version wil be loaded.
On on a plain http page, the plain http version will be loaded.
Edit your theme replacing every occurence of http://fonts.googleapis.com/... with //fonts.googleapis.com/...

firefox has blocked content that isn't secure

I am running a site. Some of its pages are not working in Firefox, but work perfect in Chrome. In Firefox it shows me a gray shield next to the URL and when I click on that shield and manually click on disable protection on this page then my page works fine. So now the problem is that there are many users on my site, and some of them don't know how to do it so I want to handle it on my site so its users don't need to do that.
How can I do it? I Googled and found a setting of Firefox in about:config named security.mixed_content.block_active_content. If we set it to false then it works. So is there a way to do it programmatically or other way so that users just view that page without seeing that shield?
As I understand it, content that is blocked by default by Firefox now is http content that is accessed from an https page. Common types of content that fall foul of this are external stylesheets and images.
As far as I am aware the way to prevent the problem on your site is to make sure that if a page is served by https, any and all other files that it references are also served by https.
Hi Friends,
The reason you see this error in Mozilla Firefox is because your
website is a Mixed Box that is, your website has many internal links
which are not SSL protected.
In order to avoid this error from showing up in Mozilla Firefox you
will have to make sure all the internal links on your website are SSL
protected.
So, Use https:// in your page not http://
I hope I was clear enough in answering your query.
firefox has blocked content that isn't secure means there are some contents on your website are not secure.
I had same issue as my fonts were downloading with http://google.apis.something instead of https
Then I change to //google.apis.something and problem get solved.
To know what is not secure in you website use this link

Firefox cross domain fonts

I am trying to write a template for my Blogger blog http://www.mostafa.info, I need to use a custom webfont.Everything goes well in IE and Chrome, but in Firefox that webfont won't render.
If you have a look at my blog with both firefox and chrome, you can see that font are different.
I searched a lot for the problem and I found out that the problem with Firefox is about cross-domain fonts. Those fonts must be hosted on my own Blogger blog (which is impossible!). And let me mention that I tested Google webfonts in Blogger and all went well!
But the question is how can this problem be solved?
Any kind of help will be appreciated.
I found a good way; I embed my webfonts into CSS using base64 like this:
#font-face{
font-family: "myFontName";
src: url(data:font/woff;base64,d09GRgABAAAAAGZ0ABEAA...AAA)
}
In this way It works in all browsers ;) and more important It is not necessary to have access to filesystem of server so I can host my CSS/Fonts on google sites
But the question is how can this problem be solved?
By having the server the fonts are hosted on send the right CORS headers to allow your blogger blog to access them.

Mediawiki can't display images or styles

I`m using MediaWiki v1.19.1.
My wiki works well when I use it locally.
But when I access it over the network (from another computer, or a different IP),
it displays the text only. There are no images.
It seems like a classic skin but it`s not.
The reason is that there is no layout on my wiki (other public wiki pages show ok).
My wiki uses the monobook skin now, but I can see only the text on the page.
I have changed the permission to 777, including on all directories (/var/www/kj/*),
but still no images.
Help me, please...
I got the same issue some time ago and the following worked fine for me.
The issue might be related to the LocalSettings.php file and the general setting $wgServer.
The following link can provide you more details : Manual of $wgServer
Since 1.18 MediaWiki has also supported setting $wgServer to a protocol-relative URL.
eg, //www.mediawiki.org
This is used for supporting both HTTP and HTTPS with the same caches by using links that work under both protocols.
So try removing localhost and provide your URL; eg ; $wgServer = "//mywebsite.com";
There's not enough information to give a definite answer, however general recommendations for such situations are:
If you're using any Apache rewrite rules (for example, to make URLs prettier), try disabling them.
Especially if you're using the http://example.com/Page_title style URLs, you should know that they're unsupported by the developers and require serious MediaWiki/Apache skills (and even then they will likely introduce subtle bugs).
Install Firebug and check what's the HTTP error for your images: is it because access is denied (HTTP 403) or the webserver doesn't see them at all (HTTP 404) - this should give you an idea what's going on.

Apple Safari disrupting image url's

Has anyone every encountered this problem:
Apple's Safari v5 is disrupting the image urls on one of my magento v1.6.1 sites within the same domain. The site in question is http://store.guns-aws.com
When analyzing the lack of images, I have noticed that image urls are being disrupted from www.guns-aws.com to www.guns -aws.com [notice the space]
Ironically Safari 4 does not have this issue and the same site works perfectly fine with IE, FF, Opera and Chrome.
Thinking its a javascript error, I have also disabled java and still the problem persist.
All your help is appreciated.
p.s. Mangento wise, I have cleared the cache, reindexed the whole site to no avail.
With best regards
Fabian
Try going to System > Config > Web > Unsecure and check the Base URL and Base Media URL and make sure there are no spaces.
To determine if its a javascript or server error, right click on the page and hit View Source. If the URLs there have the space, its the server's fault. If they don't have the space, and you only see it in the Inspector its Javascript. However, I suspect its the server not Javascript.
I found out the error within the database -> core_config_data [base_media_url] of the site in mention. [If you ask me how the error developed, I really don't know...]
One will not notice that the url is disrupted via magento's settings panel as the url would display as it should so.
Hence for anyone with this trouble, just go to the database via phpmyadmin, select the core_config_data table and check for the base_media_url of the effected site and amend accordingly.
With best regards
Fabian

Resources