I've got some #font-face page generated on www.fontsquirrel.com
It works good, even on IE, but IE shows on it request to allow blocked content (font is alredy loaded when request appears, and it looks ok). When one will click 'allow' font just change to default or next on the list.
I havent changed it after generating on squirrel, so code must be ok. Any ideas what to do about it?
ps. its working the same with google fonts api.
Related
I have a webapp that uses #font-face to display TinyMCE icons. When running the app locally, these icons appear as intended in IE11. However, when deploying to a cloud server, the icons do not appear in IE11. I have edited my #font-face to take the .eot file out of the equation so that all browsers just grab the .woff. Also, on both local and remote versions of my app, the icons load and appear as intended on Chrome, Safari, and Firefox. I have noticed 2 key things:
On local app (which is over HTTP), IE11 GETs the icon file, tinymce.woff, without an issue. Before I changed this to get the .woff rather than the .eot, the .eot worked fine too. However, on the remote version of the app (which is over HTTPS), IE11 GETs the tinymce.eot, the tinymce.woff, and the tinymce.ttf (in that order) and all have a 200 Response Code. Why is IE11 downloading 3 different versions of the icon file? Is it possible there is some kind of conflict between these three files and that's causing the icons to not display? If so, how do I fix this? Keeping in mind that on the local version of the app, IE11 only GETs one of the icon files (tinymce.woff) which I believe is the behavior I want.
Research has led me to believe that the issue may be with the "Pragma" and "Cache-Control" headers that are being sent back as a response to the app's GET requests for the icon file. However, I am having trouble figuring out how to remove these headers for the HTTP Response. My application uses Spring MVC.
My current #font-face configuration:
#font-face{font-family:'tinymce';
src:url('fonts/tinymce.woff') format('woff'),
url('fonts/tinymce.ttf')format('truetype'),
url('fonts/tinymce.svg#tinymce') format('svg');
font-weight:normal;
font-style:normal}
It's hard to guess without being able to look at a demo. But since IE11 downloads an EOT, which isn't present in your #font-face rule, it looks like the CSS you think is being executed is not the CSS the browser uses.
If the #font-face rule is okay (but you copy/pasted the wrong one here), then perhaps the installable bit isn't set on the font. IE11 needs that, but on the other hand, you would expect an icon font to have taken care of this.
It's also possible the mime type isn't set correctly on the fonts served. See this thread for some troubleshooting options.
And, if you find the solution, please post it here so others can learn too! :-)
The solution was indeed getting rid of the "pragma" header. Since my project was a Spring Boot application, I created a header filter in my security configuration class. To create a Spring security configuration class:
1. Create a class that extends org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter.
2. Give the class the following annotations:
-#Configuration (org.springframework.context.annotation.Configuration)
-#EnableWebSecurity (org.springframework.security.config.annotation.web.configuration.EnableWebSecurity)
-#EnableGlobalMethodSecurity(securedEnabled = true, prePostEnabled = true) (org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity)
Within the class, create a method with #Bean annotation. Here is my complete definition:
public HeaderWriter cacheControlHeaderWriter()
{
return new DelegatingRequestMatcherHeaderWriter(
new NegatedRequestMatcher(new RegexRequestMatcher(".+\\.((eot(\\?)?)|(woff2?)|(ttf)|(svg))", "GET")),
new CacheControlHeadersWriter()
);
}
I've been using the same google fonts in development for a couple of months by now and today they just stopped to load in Chrome (works fine in FF).
I have the following line in my scss file:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=cyrillic,latin);
and I have the following requests in Chrome Network tab that return 404
Request URL:http://fonts.gstatic.com/s/opensans/v10/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2
Request URL:http://fonts.gstatic.com/s/opensans/v10/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2
Request URL:http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzJX5f-9o1vgP2EXwfjgl7AY.woff2
Also it's worth pointing out that the requests' paths are different for FF and Chrome
Any idea what might've caused google fonts stop to work? I update my ubuntu everytime it offers updates, is there a chance it has to do something with ubuntu update?
PS if I simply open link that I use for the #import, it shows me font-faces for all the types there are for this font, instead of just the three I need, and again, it shows me only 3 in FF
See https://github.com/google/fonts/issues/14. Chrome users of Google Fonts for non-latin scripts for Open Sans were temporarily impacted.
Font Source url > http://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=cyrillic,latin
This looks like an issue with Google fonts, as when I point to /* latin */ http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2 it prompts me a file dialog to save.
Where as while pointing to /* cyrillic-ext */ http://fonts.gstatic.com/s/opensans/v10/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2 throws an error.
So it looks like font type is missing on the google server.
Google generates wrong URL's for some 'fonts.gstatic.com' fonts at the moment. This is Chrome specific issue only. The kernel of problem is wrong 'v10' part of URLs generated by Google.
I have discovered the problem for "Open Sans" font only.
For example, http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,600,700&subset=cyrillic,latin at the moment gives wrong URL for:
/* latin-ext */ "Open Sans", 300 font (add http:// before, as I can't add more than 2 links now as novice):
fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTT0LW-43aMEzIO6XUTLjad8.woff2
At the same time if you'll try to download same font with changed URL ('v10' with 'v11' replaced) using Chrome - the font will be downloaded without any problems. Just try the font link above with 'v10' to 'v11' replaced:
http://fonts.gstatic.com/s/opensans/v11/DXI1ORHCpsQm3Vp6mXoaTT0LW-43aMEzIO6XUTLjad8.woff2
I'm using Google Chrome developer tools to try different CSS values on a localhost site e.g. changing "border-width: 1px" to "border-width: 2px".
For some reason I am unable to edit. If I click on "1px", I can type in a new value e.g. "2px" but as soon as I hit return, the value returns back to "1px".
For some reason, it is only affecting one site - all other sites I can edit fine.
Any ideas what the problem might be?
Earlier on, I saw a "paused in debugger" notification at the top and the page greyed. Might this have something to do with the problem?
I discovered that the problem was the use #import in the site's style sheet, specifically:
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
Once this was commented out, I was able to edit the CSS again.
I have a social network that allows users to choose fonts for their profiles. It works great on Chrome, Safari and Firefox but IE7-9 does not play well.
What should I change in my font php file to echo some nice css? Here is the code:
$fontovi_style='';
foreach(explode(",", str_replace("\n",'',file_get_contents(ROOT.'media/font-list.txt'))) as $k=>$v){
$ime=str_ireplace('.ttf','',$v);
$fontovi_style.='#font-face {font-family:"'.$ime.'";src: url("/media/fonts/'.$v.'")
format("truetype");}'."\n";
}
echo $fontovi_style;
Internet Explorer does not support TTF, it only supports EOT.
Check this link for further explanation.
This is to some extent a duplicate of this question
I'd just like to make an observations though: Generating this list on the fly for every single page slows down page load plus it puts some extra load on your server (ie it's not cacheable, it makes your pages larger, I/O reading the font list every time, etc)
go to this link http://www.fontsquirrel.com/fontface/generator
upload your font
then download all files have different font formats which is supported for different browsers and use in your project. now it will work accurately in all browsers
I have no idea why this is happening. I am following the standard tried and tested method of using google web fonts
<link href='http://fonts.googleapis.com/css?family=Sunshiney' rel='stylesheet' type='text/css'>
<style>
h1{ font-family: 'Sunshiney', cursive; }
</style>
<h1>Hi there</h1>
This works in Safari, Chrome and IE but not FF7.
Has anyone come across this. I've also tried using the JS integration and the #import syntax and it is the same. I'm really stuck.
This is a known issue with Google Web Fonts. An internal configuration change broke serving of one of the headers needed for reliable operation in Firefox and IE9+. The fix is propagating now and it should be working soon.
Thanks for reporting the issue!
(I'm an engineer on the Google Web Fonts team, found this in a twitter search trying to investigate how deep the breakage went)
I think its problem with google
On my browser FF 7.01 is show Comics Sans
http://fonts.googleapis.com/css?family=Sunshiney => redirect to
themes.googleusercontent.com/static/fonts/sunshiney/[...]3HZu7kw.woff
And response with no font data
but when type this adress in url bar i can save this font
so.
Just download this font and simple embennded to webpage
Will be faster
eq
====> 0,20second to download family=Sunshiney
=====> 0,30 to download woff font
There is currently an issue on Google's end with the Webfonts. It's odd because they were working just a few days ago, and I've seen them load up once or twice, but otherwise it's reverting to the fallback font.
Your best option is to download the file and manually embed it into your webpage using #font-face. There's a good article on that at Six Revisions.
I hope Google gets it sorted soon.
Just in case it helps someone, I just had a problem with Google Web Fonts not rendering on a colleague's Mac, but working on other (similarly configured) Macs. It was obviously something client side, and turned out to be the browser.display.use_document_fonts setting (see here).
To stop it happening, it's a case of going to Preferences .. Content .. Fonts & Colors .. Advanced and making sure "Allow pages to chose their own fonts, instead of my selections above" is checked.