I was browsing a website earlier with a family of fonts that I didn't recognise as being available for web.
You can view them on this page http://www.etq-amsterdam.com/collection/mid-1-white
According to inspect element, the fonts are:
#font-face {
font-family:AvenirNextLTPro-Demi;
src:url(fonts/28C41E_0_0.eot);
src:url(fonts/28C41E_0_0.eot?#iefix) format("embedded-opentype"),url(fonts/28C41E_0_0.woff)format("woff"),url(fonts/28C41E_0_0.ttf) format("truetype") }
#font-face {
font-family:AvenirNextLTPro-Regular;
src:url(fonts/28C41E_1_0.eot);
src:url(fonts/28C41E_1_0.eot?#iefix) format("embedded-opentype"),url(fonts/28C41E_1_0.woff) format("woff"),url(fonts/28C41E_1_0.ttf) format("truetype") }
I tried using the "font-family:AvenirNextLTPro-Regular;" line as I would do with other typefaces but it didn't work. Is this easily achievable or are they likely to have bought a license to use the font (if that's even possible)?
The font-face tag loads the fonts from files, in this case, from http://www.etq-amsterdam.com/css/fonts/28C41E_0_0.woff, so you would need to also have those fonts loaded on your server in order to access them from the CSS
I want to include a custom font in my CSS like this:
#font-face
{
font-family: TheFont;
src: url(fonts/SourceSansProLight.ttf);
}
The CSS is served with Grails 2.3 and the CSS is modified to become this
#font-face
{
font-family: TheFont;
src: url(resource:/css/fonts/fonts/SourceSansProLight.ttf);
}
The resulting font url scheme is unknown and browsers can't open that file. Chrome, for example, reports:
GET resource:/css/fonts/fonts/SourceSansProLight.ttf net::ERR_UNKNOWN_URL_SCHEME
/css/fonts is prepended to the original URL as well.
How can I instruct Grails to leave the font-face URL exactly as it is?
The solution was to disable CSS processing in Config.groovy:
grails.resources.rewrite.css = false
I found the tip how to do that on the Grails mailing list.
A better solution I think is proposed by dmahapatro at: https://stackoverflow.com/a/22849288/2286664
You need to ensure your font files are known to the Resources plugin.
The following worked for me in my Config.groovy, adapt it based on your paths:
grails.resources.adhoc.includes = [
'/images/**', '/css/**', '/js/**', '/img/**', '/fonts/**'
]
You'll needed to run grails clean after making this change.
I downloaded a custom font (Gotham-Light.eot), but it doesn't work on Internet Explorer 9.
#font-face {
font-family: Gotham-Light;
src: url('Gotham-Light.eot');
}
This doesn't work. I'm using ASP MVC3 rebuilt, used custom tool, still nothing.
First, the goods:
#font-face {
font-family: 'ludger_duvernayregular';
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot?#iefix') format('embedded-opentype'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff') format('woff'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf') format('truetype'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular') format('svg');
font-weight: normal;
font-style: normal;
}
p.test {
font-family: 'ludger_duvernayregular', Arial, serif;
font-weight: 400;
color: blue;
}
Note, I used a font face that was purposefully easy to see as working. (And I don't have access to Gotham in a web font, so... I'm not even sure Gotham is licensed to use in web font form. If you do not have a license or the license does not allow for it, please respect that.) So you will have to do a little thinking about the paths to your font files.
What I've done is consult the blog post AlienWebGuy linked to, which is good. It's not long, so I'd read it. It boils down to:
Possibly a misconfigured MIME type for the font file. See below for more info. There's also a note that Apache may have this problem, it seems to be more of an IIS issue (according to the article).
You can trick (?) IE9 to use the EOT file instead of the WOFF, which apparently fixes the issue (according to the article).
Additionally, and as an aside, IE9 had a problem displaying the font with a jsFiddle demo using the same exact CSS. Very weird. IE7 and 8 worked fine, so I know it was working in some ways. I did not figure out what that was about, but I saved the same markup and CSS to a file on my site and it works fine.
Breakdown...
Let me explain what's going on in the above CSS. I'll go through each line. However, keep in mind I have the web font in the following file formats:
eot
woff
ttf
svg
You really probably only need eot, ttf and woff if you don't care to support legacy iOS. SVG translations are hard to obtain, though.
Now, first name your font so you can reference it:
font-family: 'ludger_duvernayregular';
IE9 Compat Modes:
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
Remember to verify the URLs you're using here actually lead to a real file. Put it in the address bar and see what happens (does it download? 404?).
On the following, though, I'm going to remove the full URL so you can see the entire statement, including the end.
IE6, 7 and 8:
src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),
Note this part:
.eot?#iefix <<< See below for an explanation.
Further IE CSS Fix
In some rare cases, IE will fail because the #font-face declaration
has too many characters. This can be solved in most instances by
adding a ‘#’ hash mark after the ‘?’ question mark. This buys you a
bit of extra room.
- From the Font Spring article
I have no idea why this works, so I'm taking their word for it.
Modern Browsers:
url('http://../ludgerduvernay.woff') format('woff'),
Safari, Android, iOS:
url('http://../ludgerduvernay.ttf') format('truetype'),
Legacy iOS:
url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');
Then use it:
p {
font-family: 'ludger_duvernayregular', Arial, serif;
}
I was actually surprised this works back to IE6. Anyways, notice that I use a full path to the file, not a relative one. That's usually a good place to start; check to make sure the link downloads. I'm making a big deal of this because it's basic and easy to screw up.
So if the file is downloading with the url and you've got it working in other browsers, and in IE6, 7 and/or 8, you can look at another possibility:
Fix IE9 on the Server Side (IIS)
Microsoft’s IIS server will refuse to send resources that it does not
have a MIME type for. The syntax we developed forces IE9 to take the
WOFF over the EOT, but if it is served on IIS, it will fail. This is
because IE9 requests the WOFF file, but since WOFF is not a defined
MIME type in IIS, a 404 Not Found error is returned. To solve this,
you must add ‘.woff’ with MIME type ‘application/x-font-woff’ to your
IIS installation.
- From the Font Spring article
So you may have to check your server isn't borking it. You can also use Chrome Console or Firebug NET tab to view the headers sent with the file.
Now I had a little help here, and I think you should think about the following options:
Google Web Fonts. Don't be a hero. They host the font, give you the include stylesheet markup, and presto whammo, you're in business. They also have some pretty cool fonts. There are other web font services, such as Typekit, Webtype, Fontdeck, and Fonts Live.
Font Squirrel has a #Font-Face Generator, which can give you all of the files you need (Warning: Only submit fonts you know to be licensed for web use.). Use the Expert mode, and it will give you a ZIP file with lots of great stuff, including a demo. The one I received you can download here. The interesting thing is, the generated CSS is identical to the Font Spring one, minus the comments. That's probably not a coincidence.
I found that awesome tool on this Opera Dev page. That is also worth reading.
And of course, that blog post AlienWebGuy linked to at Font Spring.
This stuff isn't hard, but you need to know how to troubleshoot. Always check that the file is downloading; you can use Chrome Console Resources tab or Firefox's Firebug add-on and watch the NET tab to see if it downloads. It if just literally won't work, post the page or code somewhere where we can get to it and we can review it.
Happy coding. :)
The super awesomely cool font used in the demo is Ludger Duvernay Regular. For more information, see Steve Cloutier/Cloutierfontes site. Thank you for making it free for personal use. :)
If you're following the instructions layed out here -- http://www.fontspring.com/blog/fixing-ie9-font-face-problems -- then it's most likely how your calling the fonts.
Make sure you are pointing to the right location from your stylesheet - the code you have above will only work if the font file is in the same directory as the stylesheet.
Hope this helps.
Gotham is a commercial product, and if you have just downloaded it from somewhere, it’s probably an illegal copy or a fake, and may well be technically broken too.
Consider using a free font of similar design, such as Cicle.
For googlers: I had a problem with either long font name or conflict with already installed font. Anyway IE were the only browser having problems.
I changed
font-family: 'HelveticaLTUltraCompressedRegular';
to
font-family: 'HelveticaLTUCR';
which solved my issue.
I'm trying to add a custom font to a site, and I'm not sure where I'm going wrong.
In my SASS (bourbon) file, I have
#font-face {
font-family: "officina";
src: url("../fonts/officina/OfficinaSansStd-Book.otf") format("opentype");
}
body {
font-family: officina;
}
pretty basic. I have looked at the source for the page, and I don't see the officina font-file link anywhere. Should there be one? I'm concerned that the path may be the issue I'm having, but I'm not sure how to check this. I'm using rails, but I don't think I need to create a route to the font directly.
I'm also using backbone, and I've placed the font in my assets directory, which is why it is one level up from my css.
Ok, I got this resolved. The problem was that ruby wanted a route. Rather than keep the font in a separate font path, I put it in the media path which already existed, but using the stylesheets path itself in theory would have worked as well.
I was wandering how can I link font-family in css to a font in your folder. Like PHP you can use your font in your folder.
Example Code:
CSS:
font-family: verdana;
This is what I mean:
font-family: foldername/font
Is there a code for that? or I have to use PHP to browse my own font?
#font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
Just found this one on "A List Apart", haven't checked myself but this webbie is one of the most respectful resources for designers online so i guess your best shot is to give it a try.
It is not possible do like:
font-family: foldername/font
Fonts are read by the browser from the client machine from a specific location, you can not change it that way.
Jordan,
This should help you:
Using #font-face
You are misunderstanding this. PHP can use server-side fonts to generate an image. The font itself is never shown to the client, just the rendered results.
To be able to use a non-standard font in the user's browser, you will have to package the font along with the site.
There are various techniques to do this, all with various degrees of browser support. Here's a good article on the various available techniques, their upsides and downsides. Also check out the duplicate link.
Note that only because you paid for a font, this does not mean necessarily that you are allowed to re-distribute it embedded in a web site! Always check your font license.