I am getting a
CSS3120: No fonts available for #font-face rule
for the new Microsoft Edge browser on windows 10.
The fonts I am using are from fonts.com and have the normal declarations that I would expect (e.g. woff, ttf, svg etc).
{
font-family:"myfont";
src:url("/dv2/2/asdf.eot?asdf#iefix");
src:url("/dv2/2/asdf.eot?asdf#iefix") format("eot"),url("/dv2/14/asdf.woff2?asdf") format("woff2"),url("/dv2/3/asdf.woff?asdf") format("woff"),url("/dv2/1/asdf.ttf?asdf") format("truetype"),url("/dv2/11/asdf.svg?asdf") format("svg");
}
The sites still work normally on chrome, firefox, and IE for windows 10. my fonts that I used from Icomoon that are on my domain and fonts from google fonts seem to work fine on the edge browser. Anybody else having this problem with fonts.com?
I was using a local version of Google Fonts like one of the commenters, #benoror. My issue ended up being that I used references to woff2 fonts. Edge doesn't support the woff2 format yet.
My solution was to switch back to loading the fonts from Google Fonts since they have logic based on the user-agent that determines which font files get referenced in the #font-face declarations.
Another option would have been to use regular woff instead of woff2: http://caniuse.com/#search=woff
I contacted fonts.com and the solution they gave - which did seem to work for me - was to republish the project. If you go into manage webfonts and to the project, there is a republish button. It will probably take a couple minutes and then it should work.
I had the same issue,
After reading MSDN documentation and adding local parameter error disappeared.
src:url(sURL) format(fontFormat) local(fontName)
Related
I'm using Google's font Rubik on a website (still work in progress) and it stopped showing any text suddenly!
It seems that even on Google Font website the font isn't working:
https://fonts.google.com/?selection.family=Rubik:400,900&query=rubik
("All their equipment and instruments are alive." isn't showing below Rubik, but if you inspect it, it is in there)
Is anyone else having the same problem?
I'm having this issue using Windows and Chrome, Firefox or Edge.
UPDATE: without changing anything, the font started working again today. I guess whatever problem existed, Google fixed it.
Upon further investigation, it seems their font for "Rubik" is corrupt or otherwise problematic. Conversion to ttf gives the same results. The font can be previewed under Windows, but the behavior in-browser (FF56.0b2) is the same.
Browsers that appear to render it might be doing what mine was, using a system fallback that looks similar.
This is an issue on their end as the problem is with the font file and not their stylesheet as I had originally stated in this answer.
I converted the woff to ttf using Google's woff2 tool, then tried the ttf version locally, without unicode-range and the results are the same. Here is a preview of the truetype version of the font, converted from the woff2 version, in FontForge, if anyone wants to see if the glyph's are in the correct location (note that this version of the font also doesn't work in-browser):
Google Fonts pushed an update with hinting that had a bug for some rendering systems, and rolled back the update within 24 hours.
If you remove the "/" after ".com" and add a space it worked for me. This font was working for me yesterday, so now the only problem is if they fix the path it wont work again. Hope this helps
I have created a website based on Grails web framework that uses Groovy.
For some reason I'm not able to get the fonts to load properly.
I'm using: font-family: "Avenir Next Ultra Light","Avenir Next";
On my Mac, the font loads perfectly using Safari and Chrome but not on Firefox. On other systems I've noticed that the font doesn't load at all.
I understand that it's a paid font but just not sure what to do to get the font incorporated into the site properly.
Any advice would be appreciated!
Store the font file somewhere on the server.
#font-face {
font-family: NAME;
src: url('/FILEPATH/FILENAME.ttf');
}
p {
font-family: NAME;
}
Browser Support: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
EDIT: And, as Alex K. said, make sure you have a license if it's a commercial font.
Can't speak for FireFox but a more important fact is that the font must exist in an appropriate format on all machines viewing the page. If the font does not exist as an installed font it must be embedded in the page, something you need a license for if its a commercial font.
I would suggest browsing for something similar and using the boilerplate from https://www.google.com/fonts.
I have been searching for hours, asked friends and it didn't work out. So I hope you guys can help me. My website uses a custom font, but IE(10) doesn't support that on the way I do it. I have no idea it supports other methods. Here is mine:
#font-face { font-family: shardee; src:url('fonts/Shardee.ttf'); }
It is not necessary to have a custom font in Internet Explorer, but it would be nice.
When Internet Explorer doesn't know the font, it used its default font. But the problem is, that the font-size of the custom font is perfect, but of the Internet Explorer default font it is way too big. I tried to fix it with a IE specific css code, but it just doesn't work at all. I am using the following css code for Interner Explorer:
<!--[if IE]>
<style>
#menu ul li{ font-size:15px; }
</style>
<![endif]-->
I have also tried it by a external stylesheet, which looked like this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ?>/style/ie.css" />
<![endif]-->
The function I use in the php is a wordpress function that takes you to the path of your website. If you are not using wordpress, you can forget that code and leave it blank.
The problem is not the path, the path is correct. I have looked into the source code in the browser, and it showed me the code I have in ie.css. The code in ie.css is exactly the same as above, but without the tags ect.
I hope you guys can help me with this problem. 2 solutions are possible as far as I know. Let the ie specific css work, or show me a way to create custom fonts in IE. I am using Internet Explorer version 10.
You can see the site here, but once it is fixed it will disappear because I don't need to put it on a subdomain once it is fixed.
Kind regards,
Bart Roelofs
Multiple font formats
To support a wide range of browsers, use a .ttf, .woff and .eot version of the font.
#font-face {
font-family: 'shardee';
src: url('fonts/Shardee.eot');
src: url('fonts/Shardee.eot?#iefix')
format('embedded-opentype'),
url('fonts/Shardee.woff') format('woff'),
url('fonts/Shardee.ttf') format('truetype');
}
You can use a Font conversion website like Font Squirrel, to convert the .ttf font into .woff and .eot.
DRM false positive
As #Jukka pointed out, there's a legal issue with the TTF file that's preventing it from being usable in Windows. In the IE developer console, the following error message is displayed :
CSS3114: #font-face failed OpenType embedding permission check.
Permission must be Installable.
Shardee appears to be an abandoned font with an unknown license type. Although it may be legal to use this font, Windows seems to require that every TTF file has DRM info that explicitly says it's legal to embed it in web pages. The error in IE is most likely a false positive.
To test this, I took a TTF font that's known to be legally licensed for use on websites. The TTF version didn't work in IE because of the DRM error. This example is definitely a false positive. This is one of the reasons why it's necessary to use multiple font formats, and why a single format like TTF will not work on all browsers.
Although Windows doesn't allow IE to use the TTF file, IE can still use the WOFF or EOT version. When I tested the above #font-face rule on a local webserver, using all three font formats, the Shardee font rendered correctly in all versions of IE (though with an error message in the IE developer console).
Steps to try:
Convert the .ttf file to .woff and .eot
Upload the .woff and .eot files to the same directory as the existing .ttf file.
Replace the #font-face rule with the one above. I fixed a couple typos in the initial version of it.
If you still have a problem, there may be an issue with the web server settings. Related question: IE9 blocks download of cross-origin web font
IE11:
If you are receiving the CSS3114 error code in dev tools, you need to modify the first bits of the font file. This will allow IE to install the font.
Npm Module:
You can use ttembed-js npm module, which will make the modifications for you.
https://www.npmjs.com/package/ttembed-js
Usage: ttembed-js path/to/Shardee.ttf
By searching the web, I found this online tool that performs a fix on the TTF font, making it displayable by Explorer:
https://www.andrebacklund.com/fontfixer.html
So the problem is apparently that on IE 10, the menu, inside the element with id=menu, does not appear in the declared font “shardee” but in the browser default font. This actually makes the menu readable. But technically, the explanation can be seen in Developer Tools (press F12 to enter them), in the Console pane. The error message, with code CSS3114, tells that #font-face did not pass the checks for usage rights for embedding.
Check out the usage rights of the font, and contact the copyright holder (which is to be presumed to be Bright Ideas) for obtaining the rights if possible.
FontPrep is an excellent Web Font Generator for the Mac OS X. it will even create a fonts.css
I ran into this same issue and ran F12. It seems compatibility view was enabled in IE10 for the site I was on. Once I disabled compatibility view the custom font displayed. Hope this helps someone...
I am using:
body {
font-family:"Franklin Gothic Demi";
}
It shows the font correctly in Chrome, Safari, and Internet Explorer, but shows Times New Roman in Firefox. Am I missing something? I thought Franklin Gothic Demi was a built in web font...
Try clearing the cache in Firefox.
Also consider embedding the fonts so that it is more compatible across all browsers and clients. http://www.google.com/webfonts
Some people discussed this exact problem.
http://forums.madcapsoftware.com/viewtopic.php?f=9&t=15267
If your are using Mac or Linux based operating systems, you can follow this:
1) go to https://fonts.google.com/
2) Download the fonts of your choice.
3) Go to your HOME directory.
4) Go to the .fonts folder (Create one, if it's not created before!)
5) Extract the .ttf files from the downloaded zip folder (fonts.zip) into the .fonts folder.
6) Use the appropriate CSS command with the fonts' family name and it shall work.
Tip: Google Fonts also provide you with the appropriate CSS line of code of the font family you are going to use!
i want to add pretty fonts to my Bootstrap site. i'm a programmer, not a designer.
I googled around and ended up at Google Webfonts website. Google's own font browser does not work (all the fonts default to a serif or something) for any of my browsers (OSX Chrome, OSX Safari, Win7 Chrome, Win7 IE9), all the fonts show up the same.
why doesn't google's webfont broswer work for me? http://www.google.com/webfonts
how can i trust them to work for everyone else
what is the bulletproof way to use custom
fonts?
to i have to buy them and host them myself? is this a bad idea?
Web fonts are fonts that have been licensed specifically for web-use. Besides Google Webfonts, there are other font sites that offer free (and legal) fonts for use on the web like Font Squirrel (free), and Typekit (mostly a paid service). Font Squirrel has a lot of fonts with #face kits that can help end the "browser blues", and make it easy to host the fonts on your own server (my preference).
There's a good article on A List Apart that will help you a bunch - have a read
BTW - it's a violation of your font license to take a font from your computer and run it through a true-type converter (for use on the web)...unless you've purchased/established licensing for web-use via the font provider/manufacturer/creator, etc.
But i used them a couple of times so thought of sharing with you guys. I am just answering for How to use them?
For ex:
When you use a particular web font Archivo then you need to include its style sheet as follows
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
In other way you need to install the fonts API so that you dont need to make a online request every single time.
They should be supported by most of the modern browsers.
Can't guess the reason for the first question.
Google web-fonts will work with every browser and I'm sure it is working. There are some issues.
** Fonts will be not smooth or fonts will be jugged in some browsers such as IE. Also fonts are not clear some times (Some fonts). You have to use CSS shadows ..etc to fix this.
You can use your own web-fonts. Download font and convert it to .ttf, .svg, .eot and .woff and call them in CSS with #font-face
You don't have to buy them if you are using like above example. But you will have to buy the font if it is commercial.
** You can use cufon.js too.