I intalled a new font on my website but I cannot get IE8 and IE9 to recognize, I have no knoledge on how the browsers render the fonts, but my css style sheet font declaration is as follows,
#font-face {
font-family: VAGRounded; src: url("../fonts/VAGRoundedW01-Light.eot") /* EOT file for IE */
src:url("../fonts/VAGRoundedW01-Light.eot?#iefix") format('embedded-opentype');
}
#font-face { font-family: VAGRounded; src: url("../fonts/VAGRoundedW01-Light.TTF") format('truetype'),
url("../fonts/VAGRoundedW01-Light.svg#webfontmvIrHXJB") format('svg');
Much help is appreciated!!
IE8 and IE9 do not support embedded fonts via the CSS3 scheme without first converting into supported formats (SVG, TT, EOT, etc.). EDIT: IE8 and IE9 requires tweaks to support embedded fonts. See the comments on your question since it's a duplicate.
FYI IE10 will be the first IE browser to support the HTML5 standard.
There are nifty other methods of embedding fonts. The one I recommend is Cufon because it uses VML in older browsers and doesn't require flash.
http://cufon.shoqolate.com/generate/
You should consider using a service like Font Squirrel.
It generates all the code for the various browsers.
Output would look something like this
#font-face {
font-family: 'LivingstoneRegular';
src: url('../livingst-webfont.eot');
src: url('../livingst-webfont.eot?iefix') format('eot'),
url('../livingst-webfont.woff') format('woff'),
url('../livingst-webfont.ttf') format('truetype'),
url('../livingst-webfont.svg#webfont44PDl6Sr') format('svg');
font-weight: normal;
font-style: normal;
}
http://www.fontsquirrel.com/fontface/generator
Try a proper syntax: Fontspring Syntax, Further Hardening of the Bulletproof Syntax, Mo’ Bulletproofer, or Smiley.
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 see in the top of font awesome css this:
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
I just wonder why there are eot, woffm, ttf (svg is for IE), fonts loaded here?
Is for browser compatibility? Or just there are different fonts on each file?
Can I leave safely just one?
You are right, this is for browser compatibility.
You shouldn't care about extra HTTP connections because almost all browsers that support #font-face will only download the first file that matches its supported format (I'm looking at you, oldIE!).
Here's an great post by Paul Irish that extensively explains how #font-face works.
It's my understanding that different browsers/platforms require different font formats, so this is just covering your bases.
I've ran into an issue with font-family; basically I'm doing all the right things (I hope) yet for some reason the font is doing some weird things. So let me explain the issue..
On my browser the font appears OK in chrome/IE yet it doesn't appear in mozilla.
On my dad's laptop, the font doesn't appear what-so-ever in any browser.
On my mates apple mac, the font appears in Safari but not in chrome.
On iPhone the font appears.
On Nexus 4 the font doesn't appear (in Chrome or Mozilla)
This is why I'm confused; Why is it appearing in some browsers on different platforms and not on the others? Can a font be specific to an OS?
Here's the CSS i'm using.
#font-face {
font-family: "Pixelated";
src: url('templates/joostrap/fonts/pixelated.ttf');
}
This is how i'm applying it.
{font-family: "Pixelated"; text-transform: uppercase;}
Any help would be appreciated! cheers!
The most common problem with fonts not showing up is that the path was not properly specified. This happens more when you have multiple file fonts such as: light, bold, medium. So perhaps your path is
src: url('templates/joostrap/fonts/pixelated.ttf');
But if multiple versions are in one directory, it could be
src: url('templates/joostrap/fonts/pixelated/pixelated.ttf');
This happened to me before. In my case I had the fonts.css in my CSS directory, then i had the fonts in assets and the variations of the fonts were in the same directory. In my case I had to implement the Across the Road font. So based on my directory structure I did
#font-face {
font-family: 'across_the_roadregular';
src: url('../assets/fonts/across_the_road/across_the_road-webfont.eot');
src: url('../assets/fonts/across_the_road/across_the_road-webfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/across_the_road/across_the_road-webfont.woff2') format('woff2'),
url('../assets/fonts/across_the_road/across_the_road-webfont.woff') format('woff'),
url('../assets/fonts/across_the_road/across_the_road-webfont.ttf') format('truetype'),
url('../assets/fonts/across_the_road/across_the_road-webfont.svg#across_the_roadregular') format('svg');
font-weight: normal;
font-style: normal;
}
Notice that I specified various file types. This is because not all browsers can display the .ttf format. You can see compatability at http://caniuse.com/#feat=ttf
TTF fonts must be used differently when using in Chrome and Firefox. Check this link to setup the TTF correctly:
ttf files not rendering on Chrome and Firefox
The problem is that you're only using a .ttf file. Not every browser will be able to load it.
Instead you should use a generator (link) so you have a .eot and a .woff file aswell.
Your font CSS will look like this:
#font-face {
font-family: 'Pixelated';
src: url('../fonts/pixelated.eot');
src: url('../fonts/pixelated.eot?#iefix') format('embedded-opentype'),
url('../fonts/pixelated.woff') format('woff'),
url('../fonts/pixelated.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Hope this helped.
Specify a font named "myFirstFont", and specify the URL where it can be found
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
Include a font file somewhere on your server, and refer to it with CSS
src: url('Sansation_Light.ttf')
If the font file is located at a different domain, use a full URL instead
src: url('http://www.w3schools.com/css3/Sansation_Light.ttf')
I think this link helps you http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
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'm working on a site, using custom google fonts, but in ie8 not working or just partially(left content good, and a right content, ajax, not so good) any suggestion or idea why not so good?
Thanks.
I just saw your website in compatibility mode in IE8 of my IE9, and I do not see any font problems.
I run window 7, cna you please post a picture of your problems?
UPDATE: I forgot an important thing... to check about compability. IE7 and IE8 have only "partial" compability with font-face.
To solve the issue you have to use a code similar to this, and convert fonts
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
Google is using only woff, while you have to load eot, trutype and svg as well for full crossbrowser compability.
You can convert fonts easily at Font Squirrel, download the font from
http://themes.googleusercontent.com/font?kit=tMrhQDUBAHnnGuM33-yobPesZW2xOQ-xsNqO47m55DA
For more information on the matter: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
In IE9 and IE7 compatibility mode using IE9 it shows fine; in IE8 and IE7 compatibility mode using IE8 it looks very bad so I would have to conclude that it´s some obscure bug in IE8 itself.
I don´t think there's much you can do about that so to solve it I would just use conditional comments to address IE8 and IE7 and use verdana for that section. And hope they go away soon...
FOR IE10 and below and for all other browsers use
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?');
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}