I want to use an amazing font a font-designer made for my organisation. The font is a Mac font with no file extension and Sublime Text 2 doesn't seem to recognise it. I am building a website with Bootstrap and want to use the font - how do I convert it to a woff?
I used the Mac terminal with the file -I command and it gives me:
application/x-empty; charset=binary
You can convert it into a webfont using the Webfont generator by Font Squirrel. After that, you can add this into your CSS to get the font work.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
For anyone else trying to answer this question - the only thing that worked was switching to a PC and using Cross Font.
Related
At work we're developing this component that displays icons next to links. The SVG icons are stored in an icon font (the WOFF2 format is being loaded). On desktop computers they look like they should however on both Android and iOS devices some icons look a bit weird. Some gaps are being "filled in" where they shouldn't.
The correct version of the icons:
And here's how it looks on phones:
Why does this happen?
It's not a media query issue, because it looks as it should when shrinking a browser window, but not in, say, the iOS simulator. It seems to be specific to mobile devices.
This is the method with the deepest support possible right now:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Have a look at this , hope it helps you.
I had troubles with a #font-face these days. My font was not displaying in IE11, but in all others.
Turned out that removing the "woff2" font solved my problems and the font displayed normally.
My question now is: Why could that be the solution? What is going on in IE11s mind, that removing a simple "woff2" tag could be the answer? I mean, normally I read about .htaccess files and other things which are really not easy to find out...
Does IE11 try to load the woff2 first?
IE 11 use woff instead of woff2. If you want maximum compatibility use this:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
For reference: CSS Tricks - Using #font-face
I'm using a TTF and OTF web font to catch all major browsers(FireFox, Chrome and IE11) on most devices. It all looks fine, before relocation to the production server and then IE doesn't want to show my icons.
I guess, the brains in Redmond have some kind of feature to stop this working over the Internet, so it works from localhost only.
What's the deal here? What kind of font type do I need to use for IE?
This is the standard way of loading with #font-face, hacky fixes and all -
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
hey please check the Compatibility tables for support of EOT, check these links -
Link 1
Link 2
Be aware of one thing:
Fonts won't work in IE if the font-family entry in css is named differently than the font name!
This bug took me all day to figure out and can be very frustrating if you are not aware of it!
For IE 6-11, use EOT fonts, but be aware it is not supported by any other browser.
For IE >=9 & all other browsers, use woff fonts, as it has the widest support and the best compression, since it was designed specifically for the web.
as such:
#font-face {
font-family: 'FontName';
src: url('FontName.eot'); /* IE 9 - 11 */
src: url('FontName.eot?#iefix') format('embedded-opentype'), /* IE Fix for IE 6-8*/
url('FontName.woff') format('woff'); /* IE 9-11 & All Modern Browsers */
}
I'm having some issues with the font-face property. This code works in every browser, even IE8 and lower, but I cannot get it to fire off in IE9 or 10. I've scanned this board and google and have found a bunch of solutions, but nothing seems to wanna work for me. Here is my code:
#font-face {
font-family: din_light;
src: url('din_light.ttf?') format('truetype'),
url('din_light.eot');
}
Does anyone see anything wrong here..?
Researching others with similar issues, it seems to be that IE 9 likes to utilize the WOFF version of the font, even if you specify the EOT in another source URL like you have (when using multiple sources at once). Try the following code and let me know how it goes:
#font-face {
font-family: 'din_light';
src: url('din_light.eot'); /* IE9 Compat Modes */
src: url('din_light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('din_light.woff') format('woff'), /* Modern Browsers */
url('din_light.ttf') format('truetype'), /* Safari, Android, iOS */
url('din_light.svg#svgFontName') format('svg'); /* Legacy iOS */
}
If you don't have the other font types you can get them from webfont-generator (fontsquirrel)
Code above was found here: Fixing IE 9 #font-face problems
I have successfully used the font face declarations for two fonts and it works for all browsers except IE8 and below. I am using the code from http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax. The strange thing is on IE8, one font is working and the other is not.
Here is the CSS:
#font-face {
font-family: 'FreestyleScriptRegular';
src: url('freescpt.eot'); /* IE9 Compat Modes */
src: url('freescpt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('freescpt.woff') format('woff'), /* Modern Browsers */
url('freescpt.ttf') format('truetype'), /* Safari, Android, iOS */
url('freescpt.svg#FreestyleScriptRegular') format('svg'); /* Legacy iOS */
}
#font-face {
font-family: 'GillSansMTCondensed';
src:url(Gill_Sans_MT_Condensed.eot);/* IE9 Compat Modes */
src: url('Gill_Sans_MT_Condensed.eot?#iefix') format('embedded-opentype'),
url('Gill_Sans_MT_Condensed.woff') format('woff'),
url('Gill_Sans_MT_Condensed.ttf') format('truetype'),
url('Gill_Sans_MT_Condensed.svg#GillSansMTCondensed') format('svg');
}
The FreestyleScriptRegular is not rendering correctly but the GillSansMTCondensed is. I have tried everything I can think of and every hack I can think of. I even used regenerated the eot file for the font concerned using a different application but it didn't make any difference.
Is there anything peculiar to IE8 that would prevent the second font from working?
Any ideas?
Thanks
The Gill Sans MT font is protected by copyright, and use as downloadable font via #font-face is not permitted. Some browsers technically enforce this legal restriction.
Consider trying to find a suitable free font instead, or a font that can be licensed for a fee for the intended use.
This may be keeping your CSS from rendering properly:
url('freescpt.ttf') format('truetype'), /* Safari, Android, iOS */
There is an extra space between url('freescpt.ttf') and format(. Try removing that and see what happens. Don't forget to empty all caches.
Just from looking at the code you posted, the following does not have single quotations:
src:url(Gill_Sans_MT_Condensed.eot);/* IE9 Compat Modes */
while your code here does:
src: url('freescpt.eot'); /* IE9 Compat Modes */
Try removing the quotations to make it read as such:
src: url(freescpt.eot); /*IE9 Compat Modes */
Hopefully this will help you resolve your problem.