I would like to use a custom font that I have in TTF format only, so I need to execute a script that would detect a support of #font-face with TTF format. What are my options?
TTF is supported by a lot of browsers. I wrote a check to test #font-face support by trying to render a small custom TTF font. If you disable the test for IE8 and below from this script (which uses an EOT font), you'll have the test you're looking for.
You can find the script here: https://github.com/RoelN/font-face-render-check
There are a ton of posts here that get into this subject in great detail.
Just to get you going if you only have a TTF file you can use Font Squirrel to convert the TTF file into other common web fonts.
These will help provide fallbacks for all of the different major browsers
The site will also help you with the generation and usage of the #font-face tag in CSS to embed the font correctly.
Related
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)
I would like to use the Eurostyle font in my Rails application. We got it a while ago and installed in on our Mac computers. The font shows up in all our applications.
This will be my first time using the #font-face CSS statement in my stylesheet. I could not find any examples using a font suitcase. I have found a few solutions on how to split the font. So far the one I found has not worked. The link below suggested using DFontSplitter but when I did I got an error which is listed below. I have no idea what this is.
Want to embed a font but cannot convert from Font Suitcase or PostScript Type 1 files
The error message is: ‘Can't find an appropriate resource fork in /Users/xxxxxxx/Desktop/Exported Fonts/Eurostile/Eurostile
The only other solution I saw was very complicated and was for Mac OS 9.
Has anyone successfully used a font suitcase with the #font-face statement? If not how do I convert this to ttf or some other font format that works on popular browsers?
Short answer: you can't. #font-face is for loading individual font files, not suitcases/fontbooks/opentype collections/etc.
Long answer: there is no long answer, the short answer is all there is to it.
Convert the individual fonts you need to an opentype format, or ideally an opentype format that's been wrapped by a WOFF (WOFF v1 has massive support, WOFF v2 not yet, it's too new), and point to those with your (possibly multiple due to multiple font styles and weights) #font-face rules.
I was able to find a solution to convert my font suitcase to TTF using the solution from this link below.
http://macthoughts.net/20131112-373
After converting my suitcase file I copied the TTF files into my Rails application. I changed the src value in my stylesheet to point to the font files in my application. Now people who do not have the font installed will see the font I want in my Rails application.
I was able to get ttf files from font suitcase files this way:
I opened the Font Book app on my mac (osx 10.13.2), and located the font (make sure it's installed). Select the font and click file - export fonts and select a location.
The result in my case was a ttc file. I could convert this file easily with an online converter like this one.
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 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.
I'm about to use some custom fonts for my website.
I know that currently there are few websites providing free webfonts like: Google WebFonts
But, the font I want isn't there. I want to know if there is any way to convert this font that I have to a webfont. (my font extension is TTF)
Also, I downloaded a few webfonts, their extension was also TTF. Are webfonts something different?
Different browsers handle webfonts differently. TTF will work in most browsers but not IE or on iPhones. I'd recommend checking out Font Squirrel as it has a lot of fonts on there including a #font-face generator that will help you set things up.
Web fonts are nothing special; they can be TrueType fonts, as long as the browser supports that format (most do). To use a TrueType font in your CSS, use
#font-face {
font-family: {given name};
src: url({path to font file}) format('truetype');
}
Then use
font-family: {given name};
in any rules you want to use the font for.
I've previously used Font Squirrel to generate the web font files from a ttf.
I would recommend trying Cufon as a fallback for browsers that don't support css #font-face
You can just use the ttf files in combination with #font-face. See http://www.html5rocks.com/en/tutorials/webfonts/quick/ for more information.
This might be of use -
make sure the license for the font you are using allows it though.