ie 8 problem with custom google font - html

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');
}

Related

using #font-face in Microsoft Edge

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');
}

Roboto font in Chrome is not shown properly

I've been working for a client site and I have problem with rendering of Roboto font.
In Chrome (ver. 43.0.2357.65 m) all the various weights of Roboto looks same.
Here is the example:
Left is Mozilla Firefox, right is Chrome
http://i.stack.imgur.com/dX4Lx.jpg
Do you have any idea what's wrong with it?
thank you
Well, it's such a shame, but I have had old version of Roboto installed on my PC.
Since I deleted, everything works fine again.
I should facepalm myself hard..
I have the same version and it's work.
Try to include font in CSS with this code
#import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);
body {
font-family: 'Roboto', sans-serif;
}
And set the font-weight: 300; for exemple and see if that works.
If you are using Adobe's Creative Cloud and you have Roboto set as a font, you may run into issues where all things in Chrome then get Roboto Bold. I disabled the font from Adobe Fonts and it fixed my issue, but in some Google products like GMAIL, Sans Serif is bolded and you can't turn off the bold. I don't know why and I can't find any good information on how to resolve that.
If you use #fontface evert browser use different font format so the complete css is like 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 */
}
But as suggested using google fonts you should have no problems.
I had a similar issue. I noticed that all periods are square, not circle. Download a fresh copy of Roboto font here and reinstall it on your machine.
I had the same issue, for me what worked was calibrating my monitors and:
Go to chrome://flags/
Accelerated 2D canvas -> Enable
2D canvas -> Enable Reboot Chrome.
In my case, for a Hebrew site, the font-weight was set to 900 and the output was showing differently in Firefox and Chrome browsers even though I followed Google-Font's embedding rules properly:
//For example:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
Solution:
I have just updated the font-weight to 700 instead of 900 and this fixed the issue.
https://stackoverflow.com/a/27383566/11417534 fixed this problem for me.
Just delete the protocol declaration (http:// or https://) from the font request.

Blurry Text Rendering on iOS

i working on the ios optimization of my current WIP template and i have a strange font problem.
as you can see here:
http://www.minddraft.com/anytain/htmltemplates/font-issue.html
the fonts in the topbar / navbar are totally crisp.
All fonts below are blurry. the bar with the add movies button is not transformed or something. the content with the covers is absolute positioned and the covers itself have perspective and 3d transforms.
the special thing is, that this affects only safari for ios. on chrome for android and desktop browsers all looks fine.
i've tried the following stuff to fix it:
increased the font-size and scaled it down
added webkit-font-smoothing
added translateZ(0)
added prespective
added preserve-3d
nothing worked. i have no more ideas how to fix this problem. any ideas?
Edit:
I use the following #font-face rules for my fonts:
#font-face {
font-family: 'Bariol';
src: url('fonts/bariol_light-webfont.eot');
src: url('fonts/bariol_light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/bariol_light-webfont.woff') format('woff'),
url('fonts/bariol_light-webfont.ttf') format('truetype'),
url('fonts/bariol_light-webfont.svg#bariol_lightlight') format('svg');
font-weight: 300;
font-style: normal;
}
Cheers,
Marco
Either consider a different font format, from my experience .woff works very well, I had a similar problem once and for the life of me I can't recall what I did to fix it, consider something like the following:
#font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
If you make sure every browser has its font format set everything should be fine, anything else is just odd.
I'm pretty sure my problem persisted up until one day when some updates rolled in for the various browsers, I remember specifically firefox having issues with the fonts I was using causing flickering and such.
Oke i fixed it!
The problem was a perspective:1500px on the wrapper itself. i have no idea why webkit on ios renders fonts so blurry when i apply a perspective. if anybody knows more about it, please share your knowledge :)

Web fonts only working on Chrome and Safari for Mac,

the designer send me some fonts to use on a website. Here is my fonts.css file:
/* Delicious */
/* Delicious Bold */
#font-face{
font-family: 'delicious';
src: url('fonts/delicious-bold-webfont.eot');
src: url('fonts/delicious-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/delicious-bold-webfont.woff') format('woff'),
url('fonts/delicious-bold-webfont.ttf') format('truetype'),
url('fonts/delicious-bold-webfont.svg#webfont') format('svg');
}
But apparently this only work on my Mac but only on Chrome and Safari, does anybody see an error o have some advice to solve this issues, because on a linux or windows this doesn't work no matter if you are using chrome, safari, IE, opera o whatever.
Thanks for your help guys.
UPDATE
Line on the css file:
font-family: 'delicious', Arial, sans-serif;
Use the browser's development tools to see if the file is actually being included.
In Chrome right-click, Inspect Element -> Network. You should see the font-files being included somewhere. My guess is that either the path to the fonts is wrong, or the protocol is blocking access to them in some browsers

IE Problem with True Type Font

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.