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?
Related
trying to add a custom font into my wordpress website but it's just not working. I tried using one of the plugins but I only see the change in font in 'edit mode' but when i actually go on the public webaddress the font does not load.
I've converted futura condensed light into the various types and added this in my style.css on the theme I'm using
#font-face {
font-family: 'Conv_futura-condensedlight-normal';
src: url('fonts/futura-condensedlight-normal.eot');
src: url('fonts/futura-condensedlight-normal.eot?#iefix') format('embedded-opentype'),
url('fonts/futura-condensedlight-normal.woff') format('woff'),
url('fonts/futura-condensedlight-normal.ttf') format('truetype'),
url('fonts/futura-condensedlight.svg#Conv_futura-condensedlight-normal') format('svg');
font-weight: normal;
font-style: normal;
}
and also added this
h7{font-family: 'Conv_futura-condensedlight-normal';}
On the page where I want the text to change I have:
<h7>LOGIN</h7>
but the text does not change..
I've also uploaded the files into the fonts folder in the theme directory (where other fonts are)
Can't seem to find the bug. Help would be appreciated!
Try #font-face for custom fonts. Use below code.
#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 */
}
and specify it as below :
font-family: 'MyWebFont', Fallback, sans-serif;
Refer : https://css-tricks.com/snippets/css/using-font-face/
They may be several reasons but the first thing I'm seeing wrong is the <h7> tag because it doesn't exist. You should use from h1 to h6.
If that doesn't solve the issue please try with browser's console as #War10ck said, missing files is a signal of path issues.
When I created a custom font and used it on my website, this was the CSS I used:
#font-face {font-family:'CUSTOM_FONT_NAME';src:local('CUSTOM_FONT_NAME'), url(http://MY_URL/MY_FONT_PATH/MY_FONT.ttf) format('truetype');}
.my_custom_font_class {font-family:'CUSTOM_FONT_NAME',serif;}
I believe I had to use a global path to get my font to load, so you might try that.
The src:local('CUSTOM_FONT_NAME') part is just to verify that it's working at all from your machine with the font installed. (You'll need the font name to match the name it's registered under in your machine, in this case).
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;
}
Like others I am having problems using custom fonts in InternetExplorer. Now, I have seen a number of threads on the topic, all of which end up in a solution where I need to not only embed the trueType font (which is enough for all other major browsers) but something similar to this is suggested:
#font-face {
font-family: "LCD";
src: url('/Public/Fonts/quartz_regular-webfont.eot');
src: url('/Public/Fonts/quartz_regular-webfont.eot?#iefix') format('embedded- opentype'),
url('/Public/Fonts/quartz_regular-webfont.woff') format('woff'),
url('/Public/Fonts/quartz_regular-webfont.ttf') format('truetype'),
url('/Public/Fonts/quartz_regular-webfont.svg#quartzregular') format('svg');
font-weight: normal;
font-style: normal;
}
Could someone explain to me why InternetExplorer requires my font in trueType, webFont, svg AND embeddedOpentype in order to work?? Such a hassle...
Try using this. It seems to have helped others out. It doesn't work with all fonts, but go ahead and give it a try.
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.