Viewing Custom fonts and Internet Explorer
Custom fonts and Internet Explorer
|
User: Tony H. 11 years ago
|
|
|
I have created my website and have successfully used a custom font which shows up in all browsers apart from internet explorer this is the code i used in the header <style> @font-face { font-family: "Christopherhand"; src: url("{!-ASSETSPATH-!}External%20Files/comesinhandy.ttf"); } </style> Now when i view my webpage in IE the font does not show up. How can i fix this feel free to take a look at my site www.tonyjamesphotos.co.uk Many thanks in advance for anyone's help. Regards Tony |
|
|
User: Roddy 11 years ago
|
|
|
You need to upload .woff for IE versions 9 and up and .eot for older versions.
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Tony H. 11 years ago
|
|
| What would be the code for this and how do I convert a .ttf to this format | |
|
User: Roddy 11 years ago
|
|
|
There are quite a few sites that will convert the font file like THIS one. This will give you a folder containing a fonts.css which will give you the styles. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 11 years ago
|
|
|
I am assuming that you read about adding self hosted fonts in the rather incomplete post in the All About iWeb blog? In the absence of an update to the above I have added a section to THIS PAGE with some more info. Look for the section heading - Self Hosted Fonts Using The EverWeb Server ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Jann S. 11 years ago
|
|
|
I have created my website and used Gil Sans as the basic font. I have now uploaded the site and it looks great on every browser BUT Internet Explorer. I double checked to make sure I had the txt styles.css properly uploaded - and I do. Opening the file shows me that it has the Gil Sans font loaded. This isn't a custom font...pretty standard on all machines...any ideas how to fix this? My website is janngray.com and you can see on the home page that the font is something else entirely - which throws off the alignment of several objects on that screen. This only happens in Internet Explorer. Thanks for your help. |
|
|
User: Jann S. 11 years ago
|
|
|
I have created my website and used Gil Sans as the basic font. I have now uploaded the site and it looks great on every browser BUT Internet Explorer. I double checked to make sure I had the txt styles.css properly uploaded - and I do. Opening the file shows me that it has the Gil Sans font loaded. This isn't a custom font...pretty standard on all machines...any ideas how to fix this? My website is janngray.com and you can see on the home page that the font is something else entirely - which throws off the alignment of several objects on that screen. This only happens in Internet Explorer. Thanks for your help. |
|
|
User: Roddy 11 years ago
|
|
|
Quote: it has the Gil Sans font loaded. This isn't a custom font...pretty standard on all machines... The problem is that Gill Sans is not standard on a zillion computers running Microsoft Windows. If you want to use a font that is not on the web safe list, you either need to host it yourself or use one that is hosted elsewhere such as the Google fonts. All this info is on the How To Use Fonts page. To use a font like this you would need to upload it - in all the required formats - to your server so that the browser can access it when it is not available on a visitor's computer. To do this legally you would need to obtain a license to use the font. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Tony H. 11 years ago
|
|
|
I changed my code in the header on my website to this <style type="text/css"> @font-face { font-family: 'Christopherhand'; src: url('{!-ASSETSPATH-!}External%20Files/comesinhandy.eot?') format('eot'), url('{!-ASSETSPATH-!}External%20Files/comesinhandy.woff') format('woff'), url('{!-ASSETSPATH-!}External%20Files/comesinhandy.ttf') format('truetype');} </style> And put all the fonts in the assets column of Everweb but still IE shows the wrong font. The font is called 'Christopherhand' this is what it says in the family section of the fonts but the font file is called 'Comesinhandy' in the fonts folder www.tonyjamesphotos.co.uk |
|
|
User: Roddy 11 years ago
|
|
|
If the actual font file is named "comesinhandy" you will need to change... font-family:'Christopherhand" .. to font-family:'comesinhandy'; ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Tony H. 11 years ago
|
|
| Unfortunately changing the name does not work the font family is Christopherhand and when i change it the fonts all change on my website | |
|
User: Jumbo T. 11 years ago
|
|
|
The name does not matter. You can use any name. http://trotter.is-best.net/comesinhandy/ I went to the link at the bottom of the page and converted a ttf file to eot. It did not matter, MSIE (in my case 8) did not display the font. But using a google font worked in MSIE. So go to Google font and see if there is a similar font and use that. This one comes close : https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Reenie+Beanie |
|
|
User: Roddy 11 years ago
|
|
|
This what is required for full compatibility and IE 8 and down… @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 */ } I have long since given up supporting any browser lower than IE V10. For geriatric browsers like these you should simply supply a suitable fallback web safe font-family. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Tony H. 11 years ago
|
|
|
So would this be correct? <style type="text/css"> @font-face { font-family: 'christopherhand'; src: url('{!-ASSETSPATH-!}External%20Files/comesinhandy.eot'); /* IE9 Compat Modes */ src: url('{!-ASSETSPATH-!}External%20Files/comesinhandy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('{!-ASSETSPATH-!}External%20Files/comesinhandy.woff') format('woff'), /* Modern Browsers */ url('{!-ASSETSPATH-!}External%20Files/comesinhandy.ttf') format('truetype'), /* Safari, Android, iOS */ } </style> |
|
|
User: Roddy 11 years ago
|
|
|
All you can do is try it! As I mentioned above, I wouldn't bother with supporting these old browsers. Just add a web safe fallback for them like this… @font-face { font-family: 'christopherhand', verdana, sans-serif; } Choose a fallback font that won't alter the page layout when it is substituted by out of date browsers. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |