Currently i'm working on my first project in hmtl and css w/ bootstrap.
Until now, things are going pretty well. But now I have a problem with adding a custom font to my webpage. I searched how to do this but #font-face doesn't really work. My teacher fixed it in class so it should be possible I only don't know how he perfectly did it and he didn't give the code. I did the next:
#font-face {
font-family: 'Impact Label';
src: url('ImpactLabel.eot');
src: url('ImpactLabel.eot?#iefix') format('embedded-opentype'),
url('ImpactLabel.ttf') format('truetype'),
url('ImpactLabel.woff') format('woff')
font-weight: normal;
font-style: normal;
}
I saw that chrome support woff so I don't get why it doesn't work on chrome, it does work on IE though. My h1 looks just like this:
h1
{
font-family: 'Impact Label';
}
Any help is welcome. Link to website is here
Your missing a semi-colon after the last src property. The code should read:
#font-face {
font-family: 'Impact Label';
src: url('ImpactLabel.eot');
src: url('ImpactLabel.eot?#iefix') format('embedded-opentype'),
url('ImpactLabel.ttf') format('truetype'),
url('ImpactLabel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Related
I have searched for its solution, and I think, I'm doing everything like the suggestions, but it is still not working. Custom font works on Chrome, IE, but not in Firefox. I have used font face generator to generate fonts and the code. I have placed the #font-face code in header, custom.css file (in theme_root/css/) and also in style.css, but it is not working.
Placed this in header.php:
<style>
#font-face {
font-family: 'Bebas Neue';
src: url('fonts/bebasneue.eot');
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('fonts/bebasneue.woff') format('woff'),
url('fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
Placed this in style.css:
#font-face {
font-family: 'Bebas Neue';
src: url('fonts/bebasneue.eot');
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('fonts/bebasneue.woff') format('woff'),
url('fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Placed this in custom.css:
#font-face {
font-family: 'Bebas Neue';
src: url('../fonts/bebasneue.eot');
src: url('../fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('../fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('../fonts/bebasneue.woff') format('woff'),
url('../fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Working everywhere, except Firefox. I'm confused
http://tour.khujbo.com
Also, this font works in html pages in Firefox fine. I have used this font in this template and it works on Firefox: http://khujbo.com. Seems to me, that the problem with Firefox and WordPress combination.
What should I do?
I don't think you need to define this font-face everywhere. You can place the CSS only in custom.css. And, you have defined the "Bebas Neue" font-face in your header.php with wrong URL. CSS is trying to get the font (woff, ttf, etc) from http://tour.khujbo.com/fonts/. Please correct your CSS with the right location.
BTW, my suggestion would be, you just place and load the CSS only from custom.css and remove all other definitions.
Hope this will solve your problem.
you must always be sure that the font is legal to use on your site.
However Firefox and Chrome should both support TTF.
get more info from here.
be sure u converted font to all format try this site to do http://everythingfonts.com/font-face and the path should be right !
#font-face {
font-family: 'GE SS Unique';
src: url('../../fonts/GE_SS_Unique_Light.eot');
src: url('../../fonts/GE_SS_Unique_Light.eot?#iefix') format('embedded-opentype'),
url('../../fonts/GE_SS_Unique_Light.woff') format('woff'),
url('../../fonts/GE_SS_Unique_Light.ttf') format('truetype'),
url('../../fonts/GE_SS_Unique_Light.svg#GE_SS_Unique_Light') format('svg');
font-weight: normal;
font-style: normal;}
h1,h2,h3,h4,h5,h6{
font-family: 'GE SS Unique';
}
I am trying to use a custom font for my website, but it appears wrong in Chrome (latest) and Opera browsers although it appears correctly (smooth) on other browsers. I tried couple of different fonts, with same results on Chrome/Opera.
My code:
#font-face {
font-family: 'mainFont2';
src: url('../fonts/Eurostile.eot');
src: local('☺'), url('../fonts/Eurostile.woff') format('woff'), url('../fonts/Eurostile.ttf') format('truetype'), url('../fonts/Eurostile.svg') format('svg');
font-weight: normal;
font-style: normal;
}
The issue:
Thats just how the browser and OS renders the font..but try to call the .svg format before the .woff format it might fix this.
#font-face {
font-family: 'mainFont2';
src: url('../fonts/Eurostile.eot');
src: local('☺'),
url('../fonts/Eurostile.svg') format('svg'),
url('../fonts/Eurostile.woff') format('woff'),
url('../fonts/Eurostile.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I'll refer you to this question:
https://stackoverflow.com/a/4060778/1121870
Or try font-smooth:
http://www.w3.org/TR/WD-font/#font-smooth-prop
And there's a nasty little hack here:
http://www.elfboy.com/blog/text-shadow_anti-aliasing/
I have a CSS file in /css and fonts in /images. My CSS code uses #font-face, and it works in IE8, IE9, and all the decent browsers, but obviously not in IE7.
#font-face {
font-family: 'ChunkFiveRegular';
src: url('../image/chunkfive-webfont.eot');
src: url('../image/chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url(../images/chunkfive.woff) format('woff'), url(../images/chunkfive-webfont.ttf) format('truetype'), url(../images/chunkfive-webfont.svg) format('svg');
font-weight: normal;
font-style: normal;
}
h1, h2, h3 {
font-family: ChunkFiveRegular, Georgia, serif;
font-weight: normal;
text-transform: uppercase;
}
Why does the text still show up set as Georgia?
If your fonts are in /images, you need to use /images, not /image. That said, your fonts belong in /css; fonts are not images.
Also, according to Paul Irish's article, 'eot' should work better than 'embedded-opentype' (untested).
http://www.thecssninja.com/demo/css_fontface/
#font-face {
font-family:InYourFace;
src: url('Ubuntu-B.eot');
// this smile and ? fix your problem
// because IE don't wanl load local font without this hack
src: url('Ubuntu-B.eot?') format('☺'),
url('Ubuntu-B.woff') format('woff'),
url('Ubuntu-B.ttf') format('truetype'),
url('Ubuntu-B.svg#webfontssbCkuz5') format('svg');
}
In IE7 and IE8, when using a custom web font, text is sometimes rendered in italics, even when I explicitly set font-style: normal. The issue is sporadic - it will render fine a few times, then I refresh and everything is in italics, then I refresh and it's back to normal.
I'm using this #font-face declaration:
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DIN';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
Theres a comment on this article that indicates it could be about the order of the #font-face declarations: however the only thing that stopped the problem was removing the italic declarations altogether.
Another Stack Overflow answer suggests using the Font Squirrel #font-face generator; I'm not able to do this however as the web font files I'm using have DRM.
Is there a way to solve this without completely removing the italic declarations?
UPDATE: Upon further investigation, it seems this issue affects IE8 as well, not just in compatibility mode.
For each of your #font-face font-family names, create a custom name instead.
Example:
#font-face {
font-family: 'DINnormal';
src: url('fonts/DINWeb.eot');
src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DINbold';
src: url('fonts/DINWeb-Bold.eot');
src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DINitalic';
src: url('fonts/DINWeb-Ita.eot');
src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-Ita.woff') format('woff');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DINboldItalic';
src: url('fonts/DINWeb-BoldIta.eot');
src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
url('fonts/DINWeb-BoldIta.woff') format('woff');
font-weight: bold;
font-style: italic;
}
After those CSS rules are defined, then you can include specific CSS rule:
li {
font: 18px/27px 'DINnormal', Arial, sans-serif;
}
If, like me, you came across this question while experiencing a similar issue using TypeKit fonts, this entry from the TypeKit blog explains how you can force unique font-family names for each weight & style of a TypeKit font to address it.
I was having a similar issue, web font was showing in Italic when using IE8(Emulator), after digging and digging I came across a article that suggest emulator can sometimes be misleading especially when it comes to webFonts, and what it suggested was trying the site in the actual IE8, as I am using a windows 7 machine i wasn't able to download the real thing so I used this site called http://www.browserstack.com/ (No testers or fake browsers. Test in real browsers including Internet Explorer 6, 7, 8, 9, 10 and 11.)
and i noticed my font was not italic anymore :D
Here's the link to the article i read,
http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/
Hope this helps you guys, if i came across something like this when researching it really would have saved me a few hours
I am hoping someone can please point out what's not working about this font-face implementation. I've testing this using the body tag so there's no question as to whether the issue is with the HTML (yes, I do have a body tag.)
I have obtained the fonts and the implementation CSS from FontSquirrel. Thanks for looking at this!
CSS:
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('DymaxionScript-webfont.eot');
src: url('DymaxionScript-webfont.eot?#iefix') format('embedded-opentype'),
url('DymaxionScript-webfont.woff') format('woff'),
url('DymaxionScript-webfont.ttf') format('truetype'),
url('DymaxionScript-webfont.svg#DymaxionScriptRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: DymaxionScriptRegular, courier;
}
File tree structure:
Screenshot of Courier fallback font:
Answer: Apparently if one leaves "Regular" off of the font-family declaration, everything works fine. Answered my own question by playing with it.
Real Answer: My first "answer" only worked in Safari. What worked in all of them was changing "'DymaxionScript-webfont..." to '../DymaxionScript-webfont... After I did that, everything worked. It was bad pathing.
Here is a more concise #font-face implementation, that I know works across the board:
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('/path/to/font/webfont.eot?') format('eot'),
url('/path/to/font/webfont.woff') format('woff'),
url('/path/to/font/webfont.ttf') format('truetype'),
url('/path/to/font/webfont.svg#webfont') format('svg');
font-weight:normal;
font-style:normal;
}
For various web fonts you can check out google.com/webfonts which has a bunch of different fonts for use, but you just add a link to google's site and it will return the proper formatting for most browsers as far back as ie6
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: DymaxionScriptRegular, courier;
}