I have a problem which I'm pretty sure I've seen before but I could find the solution anyway.
I've built a website, http://kefwithjeff.org, and it looks not bad on Chrome and Firefox:
But, for some reason, when I open it on Internet Explorer 8, Most f the text is invisible:
What is causing that problem? How can I fix that?
Your font format (woff) is not supported by IE8 http://caniuse.com/#feat=woff
You have to download font and add it in your CSS file.
#font-face {
font-family: "Droid Sans";
src: url('DroidSans-webfont.eot');
src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('DroidSans-webfont.woff') format('woff'),
url('DroidSans-webfont.ttf') format('truetype'),
url('DroidSans-webfont.svg#DroidSansRegular') format('svg');
font-style: normal;
}
Related
I have a problem with the font-family property in my css. I have a title that I want to style using a particular font. I am using #fontface. On my desktop it works fine, but on iPhone and iPad I get some standard font (I think it might be times but I am not sure). I did some research and tried different formats otf ttf etc... but still wasn't working. Finally, fed up, I've tried just changing fonts on my css to other system fonts and the phone is still not recognising them. Basically it's stuck with one font. Here is a couple of examples of fonts on the desktop:
The three first images are different font-families I have applied on the desktop version. There is a system font, a google font and a custom font using #fontface. All work.
The fourth image is what shows both on iPhone and iPad for each one of the fonts. Always the same one. What on earth is happening? Any suggestions appreciated.
My code for the custom font is:
#font-face {font-family: QuaestorSans;
src: url("fonts/QuaestorSans-Rg.otf") format("opentype"),
url("fonts/QuaestorSans.ttf") format("opentype");
}
.title{
font-family: QuaestorSans;
font-size: 2em;
letter-spacing: 1.4px;
}
the html
alice soyer
sky on earth
There is a little animation that fades the letters in, but I wouldn't have thought that would interfere with the font-family (and only on mobile devices?).
If you want the check out the web site it's alicesoyer.com
there is only one rule for the font-family, but if you test the site on desktop and on mobile (i am testing on iPhone and iPad for now) you will see different families. Thanks
Most likely caused by not having the right font format for mobile devices, try using a service like https://www.fontsquirrel.com/tools/webfont-generator to generate the correct code for the fonts you're using
Try all this formats(just example font-family)..
#font-face {
font-family: 'LatoRegular';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
url('../fonts/LatoRegular.woff2') format('woff2'),
url('../fonts/LatoRegular.woff') format('woff'),
url('../fonts/LatoRegular.ttf') format('truetype'),
url('../fonts/LatoRegular.svg#LatoRegular') format('svg');
}
use all those formats it should work because some browsers need different formats.
I'd like to add for the answer of #Venu Madhav and #JezEmery
beside fontsquirel you can also try
Transfonter
and for the code if you are using multiple fonts on your web enclose every font in
#font-face {
//font number 1 here
}
#font-face {
// font number 2 here and so on
}
because I did try
#font-face {
font-family: 'LatoRegular';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
url('../fonts/LatoRegular.woff2') format('woff2'),
url('../fonts/LatoRegular.woff') format('woff'),
url('../fonts/LatoRegular.ttf') format('truetype'),
url('../fonts/LatoRegular.svg#LatoRegular') format('svg');
font-family: 'font 2';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
url('../fonts/LatoRegular.woff2') format('woff2'),
url('../fonts/LatoRegular.woff') format('woff'),
url('../fonts/LatoRegular.ttf') format('truetype'),
url('../fonts/LatoRegular.svg#LatoRegular') format('svg');
font-family: 'font 3';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
url('../fonts/LatoRegular.woff2') format('woff2'),
url('../fonts/LatoRegular.woff') format('woff'),
url('../fonts/LatoRegular.ttf') format('truetype'),
url('../fonts/LatoRegular.svg#LatoRegular') format('svg');
/* ----- so on */
}
to save lines of codes, yes it still worked on desktop but it failed in mobile.
Strange problem here. I'm using #font-face for a site and am having some issues. I initially wasn't getting capital "A"s to show up in Chrome on Mac. After setting a font-weight explicitly, anything above 300, it was fine.
Now, however, I'm seeing that it occurs in Firefox and on my clients machine in various browsers.
Here's my code:
#font-face {
font-family: 'Avenir';
src: url('../fonts/tricky.eot');
src: url('../fonts/tricky.eot?#iefix') format('embedded-opentype'),
url('../fonts/tricky.woff') format('woff'),
url('../fonts/tricky.ttf') format('truetype'),
url('../fonts/tricky.svg#ModernPictogramsNormal') format('svg');
font-weight: 300;
font-style: normal;
}
You can see it live here: http://infirmaryhealth.mdidev.com/
Thanks for any assistance-
Got the issue figured out.
I was using Zurb's Foundation framework. They have this applied to h1 to h6:
text-rendering: optimizeLegibility;
Commented it out and voila!
Try setting the font-weight to normal (that's the same as setting it to 400). It's what the fontsquirrel #font-face generator does after converting fonts and it works for me all the time.
I'm currently working on a little Project in which I'd like to use webfonts via #fontface.
I implemented the font's like this:
#font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
font-weight: normal;
font-style: normal;
Now as you have probably experienced Chrome has problems displaying these fonts in a smooth way.
After some searching I found a solution which seem to work: You simply move this part of the css:
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
So you end up with this:
#font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
Now Chrome renders the Fonts in a smooth way, which is great.
BUT:
For some reason this SOMETIMES breaks the Layout. About each third time I load the page I'll get something like this:
Everything is moved to the left. Longer texts are breaking out of their containers. Looks really strange.
**Has anyone experienced this problem before?
I would be happy to get advice on this.**
Feel free to take a look for yourself:
View Fireflycovers.com online
Thanks a lot!
I have had this exact issue happen to a website of my own.
Instead of putting the svg at the top, keep the original formatting but add a media query as shown below. This will make chrome render the fonts perfectly and fixes the layout breaking.
#font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
}
}
I have seen the same issues (or worse) across a few sites. Most of the time the text is smashed together on top of itself.
My only solution at the point is to go back to the older font. You can also try to add the CSS rule: -webkit-font-smoothing: antialiased; for a small improvement.
The fix is in the duplication of the #font-face rule.
You don't necessarily need it in a media query in the Quka's answer, though that's a nice way to only target webkit browsers.
If you duplicate your #font-face declaration exactly as (svg first for better rendering), and paste it below the original, the funky layout/draw issues are gone.
Just calling out that the media query isn't important here—it's the duplicated rule. This is such a weird bug. So dumb.
I just started using Entypo font-face to make my social icons, but in IE8 or later, it displays the font as an empty box. I don't know if there is something wrong with my code or their font.
#font-face {
font-family: 'entypo-social';
src: url('entypo-social.eot');
src: url('entypo-social.eot?#iefix') format('embedded-opentype'),
url('entypo-social.woff') format('woff'),
url('entypo-social.ttf') format('truetype'),
url('entypo-social.svg#svgFontName') format('svg'); }
.social_font a{
font: 47px/20px 'entypo-social', Arial, sans-serif; }
Entypo does not work in IE8. i just visited their website in IE8 and their demos are completely broken.
This is the code i've been using for font-face:
#font-face {
font-family: 'ChunkFive';
src: url('ChunkFive.eot');
src: url('ChunkFive.eot?#iefix') format('embedded-opentype'),
url('ChunkFive.woff') format('woff'),
url('ChunkFive.ttf') format('truetype'),
url('ChunkFive.svg#font') format('svg'); ;
font-weight: normal;
font-style: normal;
}
you could take a llok at this.
http://css-tricks.com/snippets/css/using-font-face/
By the way: font-face Do works in IE8.
Try to use http://fontello.com/ - choose the entypo icons you need and download their package.
That worked in IE7+ for me.
Double check you’ve not got IE’s Compatibility View selected. Just wasted over an hour without checking and it works fine when de-selected.
Also if you’re using html5shiv, try placing it after your css file containing the fonts.
In my previous question:
#font-face - how to make it work on all browsers
I was asking a way how make #font-face to work on all browsers. Mainly the answer was to use this:
#font-face {
font-family: 'Name';
src: url('location.eot');
src: url('location.eot#iefix') format('embedded-opentype'),
url('location.woff') format('woff'),
url('location.ttf') format('truetype'),
url('location.svg#Name') format('svg');
font-weight: normal;
font-style: normal;
}
Generally it works. I see that even IE7 and IE8 get the font style even if here it is clearly stated:
Note: Internet Explorer 8 and earlier versions, do not support the #font-face rule.
But only problem I have is with Myriad Pro Regular font type. In IE7 and IE8 it is much wider then in all other browsers and it totally breaks my design moving out some text fragments from boundaries, changing the line and so ... How to fix also this problem?