I am using the following CSS to define a custom font on a webpage:
#font-face
{
font-family:zapfino;
src:url("zapfino.ttf");
}
Next, I am defining an id that uses it:
#custom_font
{
font-family:zapfino;
font-size:18px;
}
I've tested the page on Safari and Chrome and it works fine. However, in firefox the font is not showing up, it is reverting to a default. Sorry if this is a repost but I have searched on StackOverflow and cannot find the answer! Does anyone know why this is happening? see it here: www.moosecodes.com (its still under construction! please pardon the mess!)
Each browser only reads one file type for webfonts. Unfortunately, they are all different file formats. In order for the font to display correctly in all browsers, you will need 4 different types of font file- TTF, WOFF, SVG & EOT. Your code will look something like this:
#font-face {
font-family: 'Zapfino';
src: url('Zapfino.eot');
src: url('Zapfino.eot?#iefix') format('embedded-opentype'),
url('Zapfino.woff') format('woff'),
url('Zapfino.ttf') format('truetype'),
url('Zapfino.svg#SansumiRegular') format('svg');
}
That code is based of the stylesheet included with FontSquirell fonts.
FontSquirell has a converter, but you do need to check your license. Zapfino is a commercial font owned by Adobe(?) and as far as I know using their fonts with #font-face is a violation of the fonts EULAs.
TypeKit offers commercial fonts for use with #font-face for a fee that complies with the foundries EULAs.
jlego is right - you should check out the FontSquirrel site - they have an excellent tool for building your kit and converting your files for you, AND you must always be sure that the font is legal to use on your site.
However Firefox and Chrome should both support TTF, which is the format you are using.
In researching your problem on your site, what I've found is that the font is not rendering properly in any browser I check in. What I've found is while the stylesheet is referencing the right file location, but the font file appears to be corrupted. I would suggest getting a new font file new replace the one you are using.
I had the same problem.... the answer by jlego was usefull to me.
My font was recognized in Chrome and IE.
In FF my TTF wasn't recognized untill I added the format('truetype') in my css file.
Related
Although having read some articles about font-family, I still don't have a deep understanding how it works. So I'm hoping this question may help me better understand how font-family works.
I see some beautiful fonts on a website, the CSS of one of them is font-family:'Futura Today Bold',Arial,sans-serif. I try to copy it to my website, but it doesn't work. It seems the elements affected by this website are displaying default font. Here is a side question: how do I check what font an element is actually using? can I do it with javascript?
And the main question is, how do I use this 'Futura Today Bold' font on my website?
The problem with the font you intend to use is that it will not be installed on every user's device, which is why the fallback font (Arial) is specified in the website you checked.
You need to use web fonts if you wish to use a font that is not available on the user's device. Here's an example CSS code to do that:
#font-face {
font-family: 'Futura Today Bold';
src: url('http://path/to/futuratodaybold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('http://path/to/futuratodaybold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
After including the above lines in your CSS code, the font can be applied by the CSS rule font-family:'Futura Today Bold' in your stylesheet.
Also note that as Christina pointed out in a comment, you should not use fonts that you do not have licensing rights to use.
Answering your other question as to how to find out which font is currently being applied, you can use your browser's developer tools to find that out. Here's a screenshot of how it can be done in Firefox.
Source.
Basically you need to have the font actually included in the bundle when the page loads to have access to it. You can easily do this once you have the file by using this html code in your <head>
<link href='font-name' rel='stylesheet' type='text/css' />
or like this into your css
#import('font-name');
After you have done this all you have to do is set the font like you did before
Update
This is needed to define the font name once you have the ttf. Put this in CSS
#font-face {
font-family: 'Futura Today Bold';
src: url('font-name.ttf');
}
If you look at this file:
http://t.whstonecabinet.com/templates/rt_chimera/css-compiled/demo-dee78feaa65fff084c041f8862da3088.css
Then at the beginning you can see this line which is what create the font and if you look in your file tree under fonts/Roboto-Regular-webfont.eot then you can find the eot file:
#font-face {
font-family:'Roboto';
src:url('../fonts/Roboto-Regular-webfont.eot');
src:url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#Roboto') format('svg');
}
There are some sets of fonts that are available in the website by default. If you want to use any other fonts then you must specify the same in your css. Normally font files are available in ttf or otf format.
For example if you want to use Futura Today Bold you should first download the font file from this page.
Next, you can specify in your css, the font path that you intend to use. Visit this link to know more
If you trying to use a font in your website and it doesn't show, in many cases you just doesn't have the font available.
So google and download it (if allowed). To use it in your online websites, you have to provide the font, if you're not sure, wether everybody has this font or not. Providing can be done via #font-face. But keep copyrights in mind.
When a browser renders a page, it uses the fonts from left to right. If the most-left is not available, it goes one step to the right and so on. You will often see something like sans or sans-serif at the right and, to provide a fallback, where the browser just pick a default font of that type.
To see which font is currently used, you can right click that part (in Firefox or Chrome) and inspect the element. Look for the font section. There you can see which font is used. If you see multiple fonts, the most left/top value should be applied.
You would need to actually have the font file in your project or you can download the file using #font-face in your css.
There are quite a few services that offer fonts for download online. Some are free to download (Google Fonts, others are paid (Typekit).
This link explains a bit of how it is with fonts on the web today.
I'm using a custom font in a page I'm developing, Droid Sans, and at certain font sizes, the bottom is cut off, but only in Opera and webkit browsers.
It's easy to reproduce on Google's own webfonts page looking for Droid Sans and showing the whole alphabet at 18px: http://www.google.com/webfonts
It's especially clear for the lower case g.
Is there some css trick / hack I can use to increase the line height / show the whole character or am I really limited to only certain sizes of the font?
line-height and padding for example don't change anything and 20px font-size works fine and at the moment I am using Windows 7.
Edit: By the way, I am aware of a similar question here but as the accepted answer is changing the font size and the rest of the answers do not apply, it is of not much use to me.
Edit 2: An example that at least for now shows the problem (left hand column, under the slideshow, Il Cerca Viaggi).
Edit 3: The problem seems to be limited to Windows although I'm not sure which versions.
Edit 4: I have added a screenshot from Google Webfonts to show that the problem is not specific to the site I'm developing.
Although it is not the solution I am looking for, I have found a possible solution that might work for others:
In my original style-sheet I have specified the font as follows:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
font-weight: normal;
font-style: normal;
}
This is causing webkit browsers to use the woff file / format.
Changing the order of the font specifications and removing the hash-tag after the svg specification (why is that there anyway?), causes webkit browsers to use the svg file / format:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.svg') format('svg'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This solves the problem, all characters are displayed correctly.
However, at least in Windows 7 64bit, the svg font is not as sharp as the woff font, it's kind of blurry so I will not be using this solution and am hoping for a better one.
To a similar question, one answer suggested that, while this appears to be a Windows font rendering issue specifically, hosting svg, eot and otf versions of a TrueType font (TTF) containing the font, which was not optimized for the web, had fixed the problem for its provider. If possible, get a clean, un-optimized version of the DroidSans font and export the web fonts yourself.
EDIT: Sorry all, I was out for the holiday and didn't have access to SO. Since I've been back, I've done a little research into exactly what's causing this problem on Windows machines...
It appears that the issue lies with the way the OpenType format is rendered on Windows machines. The issue with truncated descenders seems to transcend software type to affect multiple Windows programs attempting to render OpenType. Currently, you have the Embedded OpenType format (EOT) version of the font listed first in your CSS document under #font-face. Since Chrome and Opera both recognize this format, they'll disregard the subsequent source declarations and use EOT to display the font. Unfortunately, there doesn't seem to be a quick fix that you could apply to an OpenType font itself to force the software rendering it to allow adequate line-spacing for the lowest of its descenders on Windows machines...
However, you can be choosy about which fonts you feed to your viewers' browsers. Personally, I would recommend placing the SVG version first in your CSS, and for browsers that don't recognize this format, suggest TrueType (TTF) second, then WOFF, then EOT for browsers that don't support any of the aforementioned (some older versions of IE appear to support OpenType exculsively). If the SVG rendering isn't much to your liking, try TrueType first instead.
Alternatively, although I'm no longer really that confident that it will help, you can download a TTF of DroidSans at FontSquirrel and use a software package like Typograf to export web fonts (EOT, WOFF, SVG). Try rearranging the sources in your CSS as outlined above first, though.
ANOTHER EDIT: My erroneous use of TIFF instead of TTF has been redacted to avoid confusion in the future. Apologies for the mix-up, guys...
I am not sure but try to add this for padding to work
display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;
Set the line height to normal, it is a firefox bug and use the line height in %
I think this might do the trick
It all boils down to the font itself.
Look here
http://jsfiddle.net/DdMej/2/
The first row uses Drod Sans by Google fonts.
The second row uses the font you have on your site.
edit 1
Screenshot
http://imageshack.us/photo/my-images/811/screeniy.png/
I too was seeing my Google Font 'Lato' cut off at the bottom portion of the rendered text. In my case, I needed to serve the font files locally instead of using Google Fonts. To do this I:
Converted the font from .ttf to webfont files with Font2Web
Served the font files locally as static file assets from the localhost
Included fonts in my css with the bulletproof #font-face implementation
This eliminated my cut off rendered text issue.
I'm making a Web Portal using Zope/Plone4 CMS.
Well, I used #font-face to declare the typography for headings.
The code and font are from Font-squirrel.
I made the website in local machine (without install the font in my PC) and everything works fine.
But in Plone, IE8 doesn't render the font at all. ONLY IE8, when IE7 and IE9 renders perfectly (?)
I made a test using Google Fonts. Everything works fine, all browsers.
I think it's possible that the error come from read/write permissions or something, because the font doesn't render at all in any IE if I was logged out.
This explains why Google Fonts render correctly (font is hosted outside Plone). But doesn't explain the only-IE8 issue...
I post the code here, well, I think is irrelevant, but if it helps...
#font-face {
font-family: 'TeXGyreAdventorRegular';
src: url('../font/texgyreadventor-regular-webfont.eot');
src: url('../font/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/texgyreadventor-regular-webfont.woff') format('woff'),
url('../font/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('../font/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family:'TeXGyreAdventorRegular'}
I'm not Zope developer and don't have programming skills, Don't know if I'm looking for a solution in right way. I mean, I think CSS is correct and the problem comes from other side. But want to exploit all posibilities in my hand before definitely abandoned custom fonts from this site.
Note: Google Fonts works right, but all the fonts I have tested render very awful in Windows, and the site must be very accesible (and perfect legible). I prefer to avoid it.
You have to add an .eot (Embedded Open Type) file. This format was created by Microsoft over 15 years ago. It’s the only format that IE8 and below will recognize when using #font-face.
You can make one easily by using the free converter ttf2oet
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 using a custom font in a page I'm developing, Droid Sans, and at certain font sizes, the bottom is cut off, but only in Opera and webkit browsers.
It's easy to reproduce on Google's own webfonts page looking for Droid Sans and showing the whole alphabet at 18px: http://www.google.com/webfonts
It's especially clear for the lower case g.
Is there some css trick / hack I can use to increase the line height / show the whole character or am I really limited to only certain sizes of the font?
line-height and padding for example don't change anything and 20px font-size works fine and at the moment I am using Windows 7.
Edit: By the way, I am aware of a similar question here but as the accepted answer is changing the font size and the rest of the answers do not apply, it is of not much use to me.
Edit 2: An example that at least for now shows the problem (left hand column, under the slideshow, Il Cerca Viaggi).
Edit 3: The problem seems to be limited to Windows although I'm not sure which versions.
Edit 4: I have added a screenshot from Google Webfonts to show that the problem is not specific to the site I'm developing.
Although it is not the solution I am looking for, I have found a possible solution that might work for others:
In my original style-sheet I have specified the font as follows:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
font-weight: normal;
font-style: normal;
}
This is causing webkit browsers to use the woff file / format.
Changing the order of the font specifications and removing the hash-tag after the svg specification (why is that there anyway?), causes webkit browsers to use the svg file / format:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.svg') format('svg'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This solves the problem, all characters are displayed correctly.
However, at least in Windows 7 64bit, the svg font is not as sharp as the woff font, it's kind of blurry so I will not be using this solution and am hoping for a better one.
To a similar question, one answer suggested that, while this appears to be a Windows font rendering issue specifically, hosting svg, eot and otf versions of a TrueType font (TTF) containing the font, which was not optimized for the web, had fixed the problem for its provider. If possible, get a clean, un-optimized version of the DroidSans font and export the web fonts yourself.
EDIT: Sorry all, I was out for the holiday and didn't have access to SO. Since I've been back, I've done a little research into exactly what's causing this problem on Windows machines...
It appears that the issue lies with the way the OpenType format is rendered on Windows machines. The issue with truncated descenders seems to transcend software type to affect multiple Windows programs attempting to render OpenType. Currently, you have the Embedded OpenType format (EOT) version of the font listed first in your CSS document under #font-face. Since Chrome and Opera both recognize this format, they'll disregard the subsequent source declarations and use EOT to display the font. Unfortunately, there doesn't seem to be a quick fix that you could apply to an OpenType font itself to force the software rendering it to allow adequate line-spacing for the lowest of its descenders on Windows machines...
However, you can be choosy about which fonts you feed to your viewers' browsers. Personally, I would recommend placing the SVG version first in your CSS, and for browsers that don't recognize this format, suggest TrueType (TTF) second, then WOFF, then EOT for browsers that don't support any of the aforementioned (some older versions of IE appear to support OpenType exculsively). If the SVG rendering isn't much to your liking, try TrueType first instead.
Alternatively, although I'm no longer really that confident that it will help, you can download a TTF of DroidSans at FontSquirrel and use a software package like Typograf to export web fonts (EOT, WOFF, SVG). Try rearranging the sources in your CSS as outlined above first, though.
ANOTHER EDIT: My erroneous use of TIFF instead of TTF has been redacted to avoid confusion in the future. Apologies for the mix-up, guys...
I am not sure but try to add this for padding to work
display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;
Set the line height to normal, it is a firefox bug and use the line height in %
I think this might do the trick
It all boils down to the font itself.
Look here
http://jsfiddle.net/DdMej/2/
The first row uses Drod Sans by Google fonts.
The second row uses the font you have on your site.
edit 1
Screenshot
http://imageshack.us/photo/my-images/811/screeniy.png/
I too was seeing my Google Font 'Lato' cut off at the bottom portion of the rendered text. In my case, I needed to serve the font files locally instead of using Google Fonts. To do this I:
Converted the font from .ttf to webfont files with Font2Web
Served the font files locally as static file assets from the localhost
Included fonts in my css with the bulletproof #font-face implementation
This eliminated my cut off rendered text issue.