I have applied some fonts in my CSS. they are applied when I run the website from my visual studio. but when I host the website in IIS fonts are not applied.
I am using CSS3 property font-face to load font files.
I have Googled a lot but I did not find any solution for it.
Can any body help me here?
Thanks.
If you are facing the similar issue , try adding .woff and .svg extensions in IIS MIME Type.
By default, the MIME types in IIS are configured to deliver EOT (as used by IE) and TTF files. But WOFF (Firefox) and SVG (iPhone, iPad & others) will not be served.
Open IIS , go to your IIS Type section and Add following extension there.
.woff application/x-woff
.svg image/svg+xml
Related
So I am using a few custom .woff fonts by loading them in using #font-face and storing them within my src folder. When running the app locally my fonts all work, but after deploying the app to the live domain Chrome and Firefox do not load the fonts for desktop. They do however load on Safari (Desktop and Mobile), Chrome(Mobile), Firefox(Mobile). I am wondering why these fonts will not load on desktop versions of Chrome and Firefox. Do these browsers not read .woff fonts?
The issue was because I was hosting it on Github pages and using a custom domain created a CORS issue. I fixed this by moving my font files into the public folder and creating a CSS file in the public folder as well to load in the fonts.
I am getting 404 errors in IIS7 for embedded .woff font files. Earlier it was working fine but suddenly it stopped on local as well production site. I tried changing MIME type but nothing works.
Try this reference link,
Serving web sites with embedded fonts
I have ttf fonts from the web that are listed in ftp client* directory listing as windows ttf fonts. I am working with embedded fonts on Firefox on Mac OSX platform and I am getting the following web console error:
[17:59:49.201] downloadable font: rejected by sanitizer (font-family: "Cryv2" style:normal weight:normal stretch:normal src index:0) source: http://localhost/html5/css/fonts/new-fonts-ttf/CryUncial/Cryv2.ttf # http://localhos/html5/css/embeddedFontDeclarations.css
Is this because windows ttf is different? Or is the file corrupted?
If so, is there a way of screening font files from the web for usability, or converting windows ttf to more universal file?
I do and have converted ttf file to eot files for the sake of Internet Explorer, but I primarily work on DOM based
browsers, and Firefox for dev, authoring and testing on Mac OSX environment using pre-installed Apache server locally.
*ftp client is Fetch and text editor is BBedit. Firefox 12.0
http://caniuse.com/#feat=ttf
You can use ttf, but it needs to be a completely error free one, and encoded in Unicode, so Wingdings is an example of a problem in Firefox.
Please see this for reference: Wingdings font family does not seem to work on Firefox and Opera
Also, load it like http://www.example.com/xxx with the ws to ensure there isn't any problems. Sometimes servers act weird when you are testing on the site.
Here's a way of converting ttf to a whole set of universal fonts: http://www.fontsquirrel.com/tools/webfont-generator. Font Squirrel is a good choice. ;)
I downloaded the font from http://www.dafont.com/de/cry-uncial.font
and checked it with http://www.fontsquirrel.com/tools/webfont-generator
The only file working is "Cry Uncial Italic - crvy2i.ttf".
The other two font files are corrupt.
I guess, you need to rebuild the font (with a ttf editor) or switch.
What might work, too, is to work with converted fonts from that ttf.
You wrote, that you converted the font to "eot" already.
Try to convert to "woff" and "svg", too.
Then add the urls in this order "eot, woff, svg".
The browser would use the first good one (https://stackoverflow.com/a/21155626/1163786).
Just leave the corrupt ttf out.
Check this out.
Relevant text:
You get this error if you run out of memory when loading the fontfile
or if there is something wrong with the layout (contents) of the
fontfile. This is a protection against bad or malicious font files. It
is probably possible to disable the sanitizer by setting the pref
gfx.downloadable_fonts.sanitize to false in about:config but then you
are no longer protected. Use at your own risk. Do not blame Mozilla if
you are infected with malware.
Firefox does not support .ttf fonts but will accept .woff fonts. The case is same with Internet Explorer which accepts only .eot fonts. Try converting your .ttf to .woff or find .woff version for your font.
To Convert - > http://everythingfonts.com/ttf-to-woff
I'm targeting some SVG images with CSS to use as backgrounds on a few elements and having some strange issues. When going directly to the image it works fine, but when using in CSS I get the following error:
Resource interpreted as Image but transferred with MIME type text/xml
I've added an .htaccess file to the directory that serves the images with the following code, but it didn't help:
AddType image/svg+xml svg
Suggestions?
The probable explanation is that previously the HTTP headers specified a wrong content type, and now that you have fixed it, some software uses cached information. (Not uncommon when using XML files.) The simple way to check things out is to create a copy of the .svg file and refer to it in CSS using the new name.
When I test the URL you gave in a simple background rule, the image shows without problems on Firefox, IE, Chrome, Safari (tested on Win 7). But when I test this so that Content-Type: text/xml is sent by a server, all the browsers simply don’t show a background image; no error message is shown. So I suppose you tested with some special browser or with special settings.
Updating .htaccess did not work for me.
I added following line in /etc/mime.types and restarted apache server, cleared cache and it worked.
image/svg+xml svg
I recently finished a Genesis (v1.5) child theme for WordPress (v3.1), uploaded it to my site and the fonts aren't appearing as they should. I used Font Squirrel to make the appropriate files and CSS for the font. I have permission from the font designer to use it for web embedding. This same code works great on my test site.
I used Firebug (v1.6.2) in Firefox (on OS X, v3.6.15) and found that the font files were getting 404 errors. I've triple checked the files and they are where they should be. I've uploaded them again and again and still get 404 errors on the font files. The fonts do not work in Chrome (on OS X, v10.0.648.133), Internet Explorer (on Win XP SP3, v8.0.6001.18702), or Firefox (on Win XP SP3, v3.6.15).
I tried turning off plugin one-by-one, but that didn't make any difference, so I know it's not a plugin conflict. I'm looking at the font files on the server, so I know they are there. Any ideas what to try next?
NOTE: I changed the CSS for the title font size on the production site since it jacked up the layout without the correct font. Otherwise, the code is identical to the test site. Note the "Remove these once font-face works" section at the top of the CSS file.
I too was getting 404 errors with my face-face files in WordPress. The files were there but I was getting a 404 inside WordPress.
I moved my font directory out of WordPress and put it into the root of the domain and changed my CSS accordingly.
All OK now.
In production site you have your fonts in fonts/ directory, while in the test case only "GuildofProfessionalActorsRegu" links to fonts/ and if you change the font family on #title a with firebug you'll see a your custom font. Try fixing the first rule.
Using any proxy?
At my work I can't see mines in a web I did some time ago...