Im trying to get my font to be compatible with Internet Explorer. My font works in all browsers except IE. I know that .ttf and .otf files are not compatible with IE, however I thought .eot files were. Ive looked at similar situations but I can't seem to understand the problem. My current code looks like:
#font-face {
font-family: Gotham;
src: url('../Gotham-Book.eot') format('embedded-opentype'),
url('../Gotham-Book.ttf') format('truetype');
}
The .ttf file works fine (what is working on all other browsers), so I don't believe it is the pathing of the files.
I have purchased this font and have the license.
Use below codes:
#font-face{ /* for IE */
font-family:FishyFont;
src:url(fishy.eot);
}
#font-face { /* for non-IE */
font-family:FishyFont;
src:url(http://....) format("No-IE-404"),url(fishy.ttf) format("truetype");
}
From: CSS #font-face not working in ie
Related
I am dealing with a strange issue here.. It seems that Microsoft Edge browser doesn't load fonts when I use #font-face. I checked all my computers that run Windows 10 & Microsoft Edge.
I checked http://caniuse.com/#search=font%20face
It says that font-face is compatible with Edge so I don't know what's going on.
In my example I just have a div and its font parameter.
CSS
#font-face{font-family:'Dosis';font-style:normal;font-weight:200;src:local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(http://fonts.gstatic.com/s/dosis/v4/RPKDmaFi75RJkvjWaDDb0vesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}
#font-face{font-family:'Dosis';font-style:normal;font-weight:700;src:local('Dosis Bold'), local('Dosis-Bold'), url(http://fonts.gstatic.com/s/dosis/v4/22aDRG5X9l7obljtz7tihvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}
HTML
div {
font-family:'Dosis';
}
Live version
http://codepen.io/mariomez/pen/YwGGWy
You are using only WOFF2 format which has no support on Microsoft Edge.
WOFF2 Compatibility
To solve the problem include WOFF format in your #font-face declaration. Most of the modern browser supports WOFF
For maximum browser support include all possible format.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#svgFontName') format('svg');
}
I just found that if you have the google font installed locally (eg if you've been doing a mockup), edge will not display the web font version. I did a lot of reading round to find the root of the issue and did not see anyone mention this.
hope this helps someone else :)
Procedure:
The procedure I followed in order to install all necessary formats was to find which font-weight I needed from each font and then go and download it from Google Fonts. Then using the https://everythingfonts.com/font-face (font face generator) I downloaded all the formats along with the CSS code. Then I incorporated them all into my CSS and HTML.
CSS:
#font-face {
font-family: 'JosefinSansLight';
src: url('/fonts/JosefinSansLight.eot');
src: url('/fonts/JosefinSansLight.eot') format('embedded-opentype'),
url('/fonts/JosefinSansLight.woff2') format('woff2'),
url('/fonts/JosefinSansLight.woff') format('woff'),
url('/fonts/JosefinSansLight.ttf') format('truetype');
}
HTML (excerpt):
.testim{
font-family:'JosefinSansLight', sans-serif;
line-height:normal;
color:#969696;
font-size:1.2em;
}
Files: (my domain folder)/fonts
fonts/JosefinSansLight.eot
fonts/JosefinSansLight.eot
fonts/JosefinSansLight.woff2
fonts/JosefinSansLight.woff
fonts/JosefinSansLight.ttf
Things have changed for Microsoft Edge regarding .woff fonts. I recently purchased a Windows 10 laptop. The websites that had .woff fonts in #font-face did not display them in Microsoft Edge but did display them in Internet Explorer. The Microsoft developer website as of 5/11/2016 says that .woff2 is supported in Edge as follows.
Microsoft Edge supports the Web Open Font Format (WOFF) File Format 2.0 specification which provides an improved compression algorithm from WOFF 1.0. The font format "woff2" is supported.
Here is an example of the CSS code I implemented in all of my websites to successfully display my special fonts using Microsoft Edge based on the link above.
#font-face {
font-family: Eurostile;
src: url("http://mylink/eurostile.woff"), url("http://mylink/eurostile.woff2"), url("http://mylink/eurostile.eot"), url("http://mylink/eurostile.ttf") format('truetype');
}
I've been tasked with creating a movie poster using HTML5 and CSS3. On Internet Explorer 10, the .ttf font works great, and the poster looks great. However, running the index.html file on Chrome or Safari does not properly render the font.
I asked my professor why this was the case, and he says not all OS's and browsers use the same font file type, and I need to generate multiple types for multiple browsers. He suggested I use FontSquirrel.
I attempted to upload my file, Starjedi.ttf, but I received a corrupt file error. I then attempted to use Transfonter, which successfully gave me a .zip package, but looking at the test page, the font doesn't render properly. Am I doing something wrong, or is my font not able to convert properly?
Here is my code that I use in my CSS file:
#font-face {
font-family: "logo";
src: url("../fonts/logo/Starjedi.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
Any help would be appreciated!
Edit: With help from #Stephen_Thomas, I managed to get the conversion working. The conversion's test.html works fine in Chrome, but now my issue is implementing it into my code.
Here is the updated font-face:
#font-face {
font-family: 'star_jediregular';
src: url('starjedi-webfont.eot');
src: url('starjedi-webfont.eot?#iefix') format('embedded-opentype'),
url('starjedi-webfont.woff2') format('woff2'),
url('starjedi-webfont.woff') format('woff'),
url('starjedi-webfont.ttf') format('truetype'),
url('starjedi-webfont.svg#star_jediregular') format('svg');
font-weight: normal;
font-style: normal;
And here is when I set my font-family:
/* ---------------------------------------------------------------------
Star Wars Title -------------------------------------------------- */
.logo {
/* "Star" & "Wars" */
font-family: 'star_jediregular'; /* TODO: Font doesn't work in Chrome */
font-size: 180px;
color: black;
/* More code below, but irrelevant ... */
My font does not work in any browser, IE10, Chrome or Opera. Clearly I am embedding this font-face incorrectly, but I'm not sure where I went wrong?
GOT IT WORKING -- I was using incorrect file paths since the converted CSS code didn't account for my project directory structure (which makes total sense). Thanks!
I am making a website for a friend of mine. He is very specific about the font on the page.
I have downloaded a custom font from the Internet, but the weird thing; it's only working in Internet Explorer (what a suprise).
This is my code:
#font-face
{
font-family: eurostile;
src: url(../font/eurostile.ttf);
}
#font-face
{
font-family: eurostile;
src: url(../font/eurostile.eot);
}
And this is how I am calling the font-family:
p
{
font-family: eurostile;
}
etc... What am I doing wrong?
You'll need to format it in a cross platform style. Look here.
The problem is that different browsers support different font styles.
Something like:
#font-face {
font-family: 'fontMN';
src: url('/fonts/font_font-webfont.eot'); /* IE9 Compat Modes */
src: url('/fonts/font_font-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/font_font-webfont.woff') format('woff'), /* Modern Browsers */
url('/fonts/font_font-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/font_font-webfont.svg#fontMN') format('svg'); /* Legacy iOS */
}
Would work.
You will need to acquire the formats that are valid for the browsers you're looking to support, as seen above.
Browser use different formats. IE uses the eot format, most use woff, but some use svg or ttf/otf.
Check this out:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
You can create all these fonts by uploading a ttf/otf to fontsquirrel and using it's converter:
http://www.fontsquirrel.com/tools/webfont-generator
http://jasonlau.biz/home/css/embedding-custom-fonts-with-css
If you ever need to embed custom fonts in your website, this bit of CSS will accomplish the task. Follow the steps below to embed custom fonts in your website.
Use this tool to generate the font-face rule - http://www.fontsquirrel.com/tools/webfont-generator.
I am attempting to use #font-face for Chrome, Safari, Firefox, and IE. For IE i am not even sure what to do but for the other browsers I want the #font-face part to work.
Here's what I have used:
#font-face {
font-family: "Handwriter";
src: url("/folder/Font-Regular.otf");
}
And then I also tried:
#font-face {
font-family: "Handwriter";
src: url("http://www.domain.com/folder/Font-Regular.otf");
}
Using either of these will render it properly in Chrome and Safari but not in Firefox. The funny thing is that if I use Firebug and go to the CSS file and rewrite the name again then it renders it. In addition, the font file is on my server and I am rending this on the same domain. So not sure what is going wrong here.
try this (with your custom fonts). Remember the format is important:
#font-face {
font-family: 'WebFont';
src: url('myfont.woff') format('woff'), /* Firefox 3.6+, IE9+, Chrome 6+, Safari 5.1+*/
url('myfont.ttf') format('truetype'); /* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ */
}
source: css3please
It's not an advertisement :D
I succefully use http://www.fontsquirrel.com/fontface generator :) If You have z ttf file the rest is a piece of cake :)
I need to include a font (OpenSymbol) in a html file and the font file is in a local folder (I know the exact absolute path to it). If I use #font-face like this:
#font-face {
font-family: "OpenSymbol";
src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}
It works in Chrome, Opera and Safari, but not in Firefox neither IE9. Other #font-face usage works perfectly fine in all browsers.
Btw, in Chrome, I get a warning:
Resource interpreted as Font but transferred with MIME type application/octet-stream
What can I do to cleanly include a locally stored font which is not installed on the OS?
Edit:
I found out that the listing of different urls seems not to work! Chrome loads the font if I put the [...].ttf url in the first place, but not if it's somewhere else!
2nd Edit:
I got it to work in all browsers except firefox:
#font-face {
font-family: 'OpenSymbol';
src: url('file:<path>/openSymbol.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OpenSymbolEOT';
src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
...
and then
.element {
font-family: OpenType, OpenTypeEOT, [...];
}
Anyway, it does work in IE but not in eclipse, which uses IE's rendering engine... o.O
Btw, firefox has problems because of security issues: See here
You just need one font file in web open font format. Go to http://www.fontconverter.org to convert your OpenSymbol.tff to OpenSymbol.woff. I am a cross-platform developer and i tested this works okay on:
Safari 10.1 and Firefox 52.0.2 on macOS 10.12.4 (iMac)
Internet Explorer 11.0 and Firefox 52.0.1 and Google Chrome 52.0 and Opera 53.0 on Windows 7 (PC)
Safari on iOS 10.3.1 (iPhone)
Chrome 57.0 and Asus Browser 2.0.3 on Android 5.0.2 (Asus tablet)
This goes in the css:
/* Add the decaration on top */
#font-face {
font-family: 'OpenSymbol';
src: url('font/OpenSymbol.woff') format('woff');
}
/* in separate css .elements or even the whole body, edit your font properties */
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..
No need to bother with Embedded OpenType (EOT) fontfiles, because they are only needed for IE9 (2011) and IE10 (2012).
No need to bother with Scalable Vector Graphics (SVG) fonts, because they're no longer needed since iOS 5.0
Already since 2012 Web Open Font Format (WOFF) is fully supported by every known browser. Truetype Fonts (TTF) are used local on iMac and PC, and can be used local on Android and iPhone as well. That's why web developers often make this mistake, using TTF instead of WOFF for a site.
It might be the browser is just not supporting the .ttf file. Consider working with fontsquirrel, it will generate all required files (.ttf, .woff, .svg, .eot) and css for you, and works in all browsers. I use it all the time...
According to a sample font page from Font Squirrel, Both IE 9 and Firefox require font files to be served from the same domain as the page they are loaded into. So with #font-face, your only option is to find the font file(s) you are trying to use and upload them to the site, and then use code similar to the following:
#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 */
}
Taken from http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
EDIT: One more thing from the Font Squirrel page, if you are using an IIS server, the file types need to be add to the list of MIME types.