I am currently using the bulletproof syntax and converted fonts from Font-Squirrel for the fonts on
www.runningwithpurpose.org.nz (fonts inline css in the html - working)
www.runningwithpurpose.org.nz/broken (fonts in css file - not working)
.
The both methods display fontes fine on browsers other than IE which sometimes will display some or all the fonts and other times not at all (but usually not at all).
I have tried playing around with the htaccess file, using the 'smiley' syntax but neither worked.
However I did manage to fix it but putting the font css inline in the html file.
This is ok but I was wondering why I seem to be unable to get it working as many other people have the #font-face declarations in the css file which would be much cleaner and it used to work fine for me but doesn't.
Any suggestions on how to get this working would be great, considering no other existing help has worked.
One of the #font-face declarations used
#font-face {
font-family: 'Aller-Regular';
src: url('assets/fonts/aller-regular.eot');
src: url('assets/fonts/aller-regular.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/aller-regular.woff') format('woff'),
url('assets/fonts/aller-regular.ttf') format('truetype'),
url('assets/fonts/aller-regular.svg#Aller-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
Have you tried using Google webfont instead ?, I used to used fontface but found that Google font are a million times easier to implement, plus the user doesn't have to download the font off your server each time, it just comes straight from Google.
http://www.google.com/webfonts
As stated in my question I was able to fix it at the time by putting the #font-face declarations inline in the html.
But now IE seems to have decided to fix itself and let me declare #font-faces in the CSS.
Related
I'm having problems getting my web font in small caps using "font-variant: small-caps". Here's my findings and what I went through, ruling out possible problems :
My initial thought was that the .woff file was not rendering small-caps for some reason. I've ruled this out because the font renders fine in Safari and Firefox, which as far as I know use the .woff format.
My second thought was that it was a webkit issue, but as Safari displays it fine, I don't think it is.
I'm not using twitter bootstrap, so no text-rendering: optimizelegibility, I've also tried resetting it to auto.
I tried the font-feature-settings: 'smcp' including browser prefixes, which doesn't render small caps (only the first letter is capitalized, across all browsers)
Am I missing something out?
edit
After further research, I found a fix, which is to add font-variant:small-caps to the #font-face, like so :
#font-face {
font-family:'MYFONT';
src:url('../fonts/MYFONT.eot');
src:url('../fonts/MYFONT.eot?#iefix') format('embedded-opentype'),
url('../fonts/MYFONT.ttf') format('truetype'),
url('../fonts/MYFONT.woff') format('woff'),
url('../fonts/MYFONT.svg#myfont') format('svg');
font-variant:small-caps
}
It turns out that only the stack was affected by this. Assigning a #font-face like so works as expected, in every font format supported by Chrome:
<style>
#font-face {
font-family:'MYFONTttf';
src:url('../fonts/MYFONT.ttf') format('truetype');
}
</style>
<div style="font-family:MYFONTttf; font-variant:small-caps">
works as expected, in small-caps
</div>
I think the key is, oddly enough, not to include the SVG-formatted font. Including just the WOFF and TTF seems to make it display alright.
I generated my various font files using Font Squirrel, so I ended up with .woff, .ttf, .svg, and .eot files. My font-related CSS was:
#font-face {
font-family: "foo";
src: url(/fonts/foo.eot);
src: url(/fonts/foo?#iefix) format('eot'), url(/fonts/foo.woff) format('woff'), url(/fonts/foo.ttf) format('truetype'), url(/fonts/foo.svg) format('svg');
font-weight: normal;
font-style: normal;
}
generated by Compass from:
+font-face("foo", font-files("/fonts/foo.woff", "/fonts/foo.ttf", "/fonts/foo.svg"), "/fonts/foo.eot", normal, normal)
which is in keeping with Compass's SASS font-face guidelines.
Removing the reference to the SVG seemed to fix it. I also tried switching the order of the TTF and the SVG (breaking Compass's 'recommended order' for font files) but that didn't help.
Taking a quick look around, it seems like Chrome has other miscellaneous problems with rendering SVG fonts. This isn't a really elegant solution but it might be necessary until Chrome sorts out its SVG issues.
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've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).
And they support a nice amount of browsers.
How does one do that? While also preventing people from having free access to download the font, if possible.
Generically, you can use a custom font using #font-face in your CSS. Here's a very basic example:
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}
Then, trivially, to use the font on a specific element:
.classname {
font-family: 'YourFontName';
}
(.classname is your selector).
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS #font-face rules, so you don't have to write your own).
while also preventing people from having free access to download the font, if possible
Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.
To make sure that your font is cross-browser compatible, make sure that you use this syntax:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
Taken from here.
You have to download the font file and load it in your CSS.
F.e. I'm using the Yanone Kaffeesatz font in my Web Application.
I load and use it via
#font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
in my stylesheet.
Today there are four font container formats in use on the web: EOT, TTF, WOFF,andWOFF2.
Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers:
EOT is IE only,
TTF has partial IE support,
WOFF enjoys the widest support but is not available in some older browsers
WOFF 2.0 support is a work in progress for many browsers.
If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in CSS
#font-face {
font-family: 'besom'; !important
src: url('fonts/besom/besom.eot');
src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
url('fonts/besom/besom.woff2') format('woff2'),
url('fonts/besom/besom.woff') format('woff'),
url('fonts/besom/besom.ttf') format('truetype'),
url('fonts/besom/besom.svg#besom_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
If you dont find any fonts that you like from Google.com/webfonts or fontsquirrel.com you can always make your own web font with a font you made.
here's a nice tutorial: Make your own font face web font kit
Although im not sure about preventing someone from downloading your font.
Hope this helps,
there's also an interesting tool called CUFON. There's a demonstration of how to use it in this blog
It's really simple and interesting. Also, it doesn't allow people to ctrl+c/ctrl+v the generated content.
I am working on Win 8, use this code. It works for IE and FF, Opera, etc.
What I understood are : woff font is light et common on Google fonts.
Go here to convert your ttf font to woff before.
#font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}
First of all, you can't prevent people from downloading fonts except if it is yours and that usually takes months.
And it makes no sense to prevent people from using fonts.
A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below.
But if you want to implement a font into your website read this:
There is a pretty simple and free way to implement fonts into your website.
I would recommend Google fonts because it is free and easy to use.
For example, I'll use the Bangers font from Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers)
This is how it would look like:
HTML
<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
CSS
body {
font-family: 'Bangers', cursive;
}
I've done a lot of reading on this, and tried a lot of different things, and still no dice. Here's an example of one of my #font-face rules:
#font-face {
src: url('/lib/fonts/Museo/Museo500-Regular.eot');
src: local("☺"),
url('/lib/fonts/Museo/Museo500-Regular.ttf') format('opentype');
font-family: Museo;
font-weight: 500;
}
I've checked my paths and tried various CSS, and nothing will make the fonts render in IE. Here's an example page that uses all the custom fonts at once:
http://test.thenewhive.com/test/fonts
It looks fine in all other browsers.
I don't know if it actually has anything to do with your IE problem, but the format('opentype') part here is wrong, as your TTF file is a TrueType file. It should be format('truetype').
That being said, I highly suggest you use something like the Font Squirrel #font-face generator to prevent any mistake. http://www.fontsquirrel.com/fontface/generator
If you prefer doing it manually, I suggest you take a look at this article : http://readableweb.com/new-font-face-syntax-simpler-easier/ it does a great job explaining the right syntax to use, just make sure you read it all since there has been some updates to the original post.
As described above, I have issues with #font-face not displaying in IE9 although it displays fine in every other browser including IE8 and under. Additionally, when viewing locally on my computer, IE9 does display the font, just not when fully live.
The site is:
bigwavedesign.co.uk/gcc/gcc/
The code used is:
#font-face {
font-family: 'LeagueGothicRegular';
src: url('league_gothic_0-webfont.eot');
src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}
Anyone any ideas why this might be occurring?
Cheers!
=============================================
EDIT
I have found the following site that displays the same font ok in IE9, anyine any ideas how he did that?
http://iamthomasbishop.com/
No answer, just confirmation: I have a similar kind of problem. Font works in all other IE versions except IE9, both using IETester and original browser. When changing Document Mode (F12 dev tools) font works. Not how I'd like it though.
Update: With some trickery I managed to get it working. Seems like IE9 is using the .woff version of the font (which I had excluded) over the .eot that I thought it would. I used the #font-face generator from fontsquirrel to get all the different font variations and included them in my project, using the smileyface-local. Did not have to alter my .htaccess file. Now works fine and looks the same in all IE versions:
#font-face {
font-family: "LucidaFax-bold";
src: url("_font/LucidaFax-bold.eot");
src: local("☺"),
url("_font/LucidaFax-bold.woff") format("woff"),
url("_font/LucidaFax-bold.ttf") format("truetype"),
url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
}
h1 { font-family: "LucidaFax-bold", serif;}
(I even got mad fresh using Mark "Tarquin" Wilton-Jones' text-shadow hack, applying same look to IE versions as rest of the browser world. Old school? Looks great! Was it worth it? Well, learned a lot. ;)
I have just had the very same problem with Web Fonts hosted on an IIS7 site, as suggested by Grillz the issue was down to MIME Types.
I have elected to use "application/octet-stream" based upon the answers to the Mime type for WOFF question.
Open IIS and select the site that hosts the fonts (must be the same domain name for IE9 and Firefox)
Double click "Mime Types"
Click "Add..." in the top right hand corner.
In "File name extension:" enter ".woff"
In "MIME type:" enter "application/octet-stream"
Hope that saves someone 10 minutes in the future.
For us the trick was to just change the format on the .eot files we're serving up.
Works in IE6-9, Firefox 3-4, Chrome, Safari, Android, iPhone.
#font-face {
font-family: 'Museo';
src: url('/ui/museo300.eot?') format('eot'),
url('/ui/museo300.ttf') format('truetype')
}
Becomes:
#font-face {
font-family: 'Museo';
src: url('/ui/museo300.eot?') format('embedded-opentype'),
url('/ui/museo300.ttf') format('truetype')
}
My solution is to declare two different fonts:
#font-face {
font-family: "Dereza bold";
src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype");
}
#font-face {
font-family: "IE Dereza bold";
src: url("../../assets/eot/dereza_bold.eot");
}
And then:
.divclass {
font-family: "Dereza bold", "IE Dereza bold";
}
Abalore +1
My solution:
#font-face {
font-family: "OfficinaSansBookSCC";
src: url('font/OfficinaSansBookSCC.eot');
src: url('font/OfficinaSansBookSCC.eot') format('embedded-opentype'),
url( 'font/OfficinaSansBookSCC.ttf' ) format("truetype");
}
working in IE 7-9, chrome, opera, firefox.
first line needed for IE 9, second for IE 7-8.
Well since you've edited your post the below text won't be the answer. Are you pointing to the correct directory? Any chance of this being a mime type issue from the server?
====================================================
This might be it:
It’s important to note that your site must render in documentMode 9 in order to take advantage of the new features included with IE9 (that includes all new features in IE9, not only the ones related to web fonts). If you haven’t heard of documentMode before, Microsoft has put together a guide which explains what it is and how you can use it on your site.
from http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/
In IE9 - F12 look at the debug screen see if there are any CSS3117 errors.
See also: IE9 blocks download of cross-origin web font
Font Squirrel also provides a wonderful generator tool to help you create a font kit that will include the required formats, already-written CSS, and even a demo page to see how it's all used, along with help with problems you may encounter.
It was a breeze to incorporate its output into my site and it did fix the problem perfectly.
You should check out this blog post Paul Irish has a few things to say about the problems you are coming across and he comes up with what he calls a 'bulletproof' #font-face statement.
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://www.fontsquirrel.com uses this for its sample CSS which worked OK for the project I was working on.
#font-face {
font-family: 'QuicksandBook';
src: url('/Quicksand_Book-webfont.eot');
src: url('/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('/Quicksand_Book-webfont.woff') format('woff'),
url('/Quicksand_Book-webfont.ttf') format('truetype'),
url('/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
I had this problem. Turns out I was missing a comma in the font-family declaration.
I wanted to add yet another thing that could possibly go wrong in this scenario. IE9 has a rule that discards all #font-face declarations that can not be cached after the first load. IE9 will actually use the font correctly on the first display, but on subsequent refreshes, the #font-face will be disabled. I discovered this after closing my browser by chance, and then reopening it to find that my font was working mysteriously, only to stop working one refresh later.
To fix this, you simple need to make sure that the request serving your font has a Cache-Control response header of something other than no-cache. I would recommend setting it to max-age=3600. This will ensure your font is cached for an hour. IE9 will then be able to display your font consistently.