Hello community!
I am currently working on our own firms web site and I can't seem to get the #font-face to work properly.
This is what the css looks like:
#font-face {
font-family: 'BebasNeue';
src: url('type/BebasNeue-webfont.eot?') format('eot'),
url('type/BebasNeue-webfont.woff') format('woff'),
url('type/BebasNeue-webfont.ttf') format('truetype'),
url('type/BebasNeue-webfont.svg#webfontj1CI1MAi') format('svg');
}
#nav li {
display: inline;
margin-left: 20px;
font-family: BebasNeue, Impact;
font-size: 24px;
color: #333333;
letter-spacing: 1pt;
}
The #font-face import is basically straight from the Font Squirrel #font-face generator. I haven't yet found out whats wrong and thats why I'm reaching out.
I edited the font-family names and the location of the fonts (../type/).
Any help is appreciated, tell me if you need to see any other code that might be relevant to this issue.
Cheers.
to the best of my knowledge, this is the most universal way to implement #font-face:
#font-face{
/* for IE only (IE doesn't apear to comprehand normal CSS)*/
font-family: "my fancy font";
src: url("/fonts/font.eot");
}
#font-face{
/* for non CSS-challenged browsers */
font-family: "my fancy font";
src: local("☼"),
url("/fonts/font.eot") format('eot'),
url("/fonts/font.woff") format('woff'),
url("/fonts/font.otf") format('otf'),
url("/fonts/font.ttf") format('truetype'),
url("/fonts/font.svg") format('svg');
}
two #font-face sections and something that can't possibly be a filename in src: local()
These types of questions cannot always be answered without a URL to poke around. The syntax looks fine, but you probably have other issues. For instance, are you serving with IIS? Have you used IE9's developer tools to see if the font is loading?
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'm still pretty new to html and css, so I might be overlooking things.
Been entertaining myself trying to create a little website and arrived at embedding a font to it.
It is working in firefox, yet in internet explore it isn't. I do not know about other browsers.
Here is a link to the site. Click the L to go to a second page:
http://librarchive.com/newcat.html.
Due to this there are also some positioning faults, as you can see.
So the font is not correctly working. What do I do?
Here is my css code, i have a .eot and .ttf file of the font:
#font-face{
font-family: libralust;
src: url('Futura_Bk.eot'); /* For IE */
src: local('libralust'), url('Futura_Bk.ttf') format('truetype'); /* For non-IE */
}
body {
font-family: libralust, Verdana, Arial, sans-serif;
text-align:center;
}
I've been searching, but am not experienced enough to understand it all.
Other commentary about site is appreciated too. Thanks for you help!
this a an example of cross-site font embedding has suggested by fontsquirel
#font-face {
font-family: 'OpenSansLight';
src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot');
src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/skins/default/media/fonts/OpenSans-Light-webfont.woff') format('woff'),
url('/skins/default/media/fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('/skins/default/media/fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
Now you can figure out what's wrong ?
I'll point another hint : local
For a detailed explanation read this : the-new-bulletproof-font-face-syntax and/or bulletproof-font-face-implementation-syntax
Not all browsers support Font-Face and there are lots of font ext; like eot, svg, woff, ttf.
Try this since you only have eot and ttf:
#font-face{
font-family: libralust;
src: url('Futura_Bk.eot');
src: url('Futura_Bk.eot?#iefix') format('embedded-opentype'),
url('Futura_Bk.ttf') format('truetype');
font-weight: normal; /* thin? normal? bold? */
font-style: normal;
}
I don't understand how to get this to work, any help would be appreciated;
I'm going off of what I got from this website: http://alistapart.com/article/cssatten
from my style.css
#font-face {
font-family: "JSL";
src: url(http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Neither is the plus sign the issue (tested with my renamed fonts), nor do you have to import a separate css file at the top of your main css file.
However, you may need to have more versions of your font than just the true type. Have a look at Bulletproof #font-face Syntax.
You may use FontSquirrel’s generator to achieve this.
Here is an example of a #font-face embed in my application, which is pinned right at the top of my main css stylesheet.
#font-face {
font-family: 'JustVector';
src: url('../fonts/justvectorv2+webfont.eot');
src: url('../fonts/justvectorv2+webfont.eot?') format('eot'),
url('../fonts/justvectorv2+webfont.woff') format('woff'),
url('../fonts/justvectorv2+webfont.ttf') format('truetype'),
url('../fonts/justvectorv2+webfont.svg#webfontkw9J4lGf') format('svg');
font-weight: normal;
font-style: normal;
}
no
#font-face
Try get inport it:
#import_your_new_cssfile.css
whre you put:
font-face {
font-family: "JSL";
src: url(http://www.fontyukle.net/en/DownLoad-JSL+Ancient.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Is perhaps the "+" sign in the font URL a problem? You might want to URL encode it.
Edit - after hitting the font URL, it looks like you should try to download the ttf file, and refer to it locally, rather than from a remote source. It's prompting me for a Captcha in order to download the file, which is probably why it's not working.
You do need to download the file and refer to it locally,
The link supported there is a download link and requires a Captcha to be downloaded which means it is NOT a direct link to the TTF File.
Depending on the Font you may need to use:
#font-face {
font-family: 'someFont';
src: url('path/to/font/someFont.eot');
src: url('path/to/font/someFont.eot?#iefix'), format('embedded-opentype'),
url('path/to/font/someFont.woff'), format('woff'),
url('path/to/font/someFont.ttf'), format('truetype'),
url('path/to/font/someFont.svg'), format('svg');
font-weight: normal;
font-style: normal;
}
and in CSS:
BODY
{
font-family: 'someFont', Fallback, sans-serif;
font-size: 12px;
...
}
This worked for me when I had issues wityh embedding a custom font.
I really need help with #font-face code.
IT doesn't seem to see my font file.
I tried changing the path to anything I could think of, made new folders, renamed existing ones, put the font file in my root etc.
I'm testing in Firefox and Chrome.
Here are the codes that I tried in my CSS:
src: url(http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(http://www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(../wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/thefalltheme/images/Univers.ttf);
src: url(../thefalltheme/images/Univers.ttf);
src: url(thefalltheme/images/Univers.ttf);
src: url(/images/Univers.ttf);
src: url(../images/Univers.ttf);
src: url(images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/Univers.ttf);
src: url(/Univers.ttf);
src: url(Univers.ttf);
src: url(../Univers.ttf);
Can you find out where I should put the font file or what to change in my CSS to get it to work?
(I also checked the similar questions here and elsewhere on the net and tried using this website to no avail.)
Thanks!
UPDATE:
bozdoz's suggestion doesn't work.
I used FontSquirrel to get the fonts.
This is the CSS:
#font-face {
font-family: 'lane';
src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot');
src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1{ font-size: 110px;
font-family: 'lane', georgia, serif;
color: #000000;
}
I used the name 'lane' just because bozdoz had it.
All of the fonts are here:
http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/
and these are their names:
univers-webfont.eot, univers-webfont.woof, univers-webfont.ttf, univers-webfont.svg
Are you using it correctly? Here is the format for #font-face. Notice the number of files. You can use Font Squirrel to create all of the necessary fonts for cross-browser compatibility. Also, it looks like you're using WordPress. I believe you have to use absolute paths (i.e. the first one in your list) in CSS on WordPress. Hope this helps.
<style>
#font-face {
font-family: 'lane';
src: url('type/lanehum-webfont.eot');
src: url('type/lanehum-webfont.eot?#iefix') format('embedded-opentype'),
url('type/lanehum-webfont.woff') format('woff'),
url('type/lanehum-webfont.ttf') format('truetype'),
url('type/lanehum-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.font { font-family:"lane", arial, serif; }
</style>
You want to do something like this:
#font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
The font definition file must be relative to your css file. So if your css is at:
/Content/css/main.css
Then your font must be located in the same folder. If you specify
#font-face { font-family: Delicious; src: url('fonts/Delicious-Roman.otf'); }
Then your font definition would be at
/Content/css/fonts/Delicious-Roman.otf
You might want to verify that your server is not blocking your fonts from being downloaded. Try the URL and see if you get a 404 or 403 at the given url.
You should try fontSuirrel's generator, their scripts have been vastly tested and compliant with many browsers. Choose advanced settings when generating your fonts. Certain browsers may not have the ability to use ttf as a font so they provide you with eot woff and ttf
My suggestions from the comments as an answer:
Try with quotes:
url("Univers.ttf");
Check you have font-family or otherwise you cannot use your font in your code:
font-family: "MyFontName";
Your custom font family you would use in css like:
p { font-family: "MyFontName", Arial, sans-serif; }
First of all, thank you all for your great, great help!
There was no problem with the #font-face code.
The problem was with my overall CSS.
You see, my CSS was written like this:
/*
Info
*/
#media screen {
* {
margin: 0px;
padding: 0px;
}
html { background: black url(images/bg.jpg); }
body { font: 14px/1.4 Georgia, serif; }
article, aside, figure, footer, header, nav, section { display: block; }
#font-face {
font-family: 'lane';
src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot');
src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'),
url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
etc.
The problem was that #font-face wasn't seen because it was after #media screen!
After I put it in front of #media screen and after /* Info */ it worked flawlessly.
Also, seems like I can use absolute and relative paths when using Wordpress...
Once again, thank you all for all your help!
I am having the hardest time getting #font-face to load for this site. Does any one know what is going on?
I tried using the css from font squirrel but that didn't work either so I tried a simpler code hoping that would work, but no luck so far.
OLDER CSS (did not work)
#font-face {
font-family: 'CartoGothicStdBold';
src: url('CartoGothicStd-Bold-webfont.eot');
src: local('☺'), url('CartoGothicStd-Bold-webfont.woff') format('woff'), url('CartoGothicStd-Bold-webfont.ttf') format('truetype'), url('CartoGothicStd-Bold-webfont.svg#webfontuvgRkG9V') format('svg');
font-weight: normal;
font-style: normal;
}
NEWER CSS (still doesn't work)
#font-face {
font-family: 'CartoGothicStdBold';
src: url(css/fonts/CartoGothicStd-Bold.otf) format("opentype");
}
.b-nb {
float: left;
width: 100%;
font-size: 1.25em;
color: grey;
font-family:'CartoGothicStdBold', serif;
}
I am testing it here:
http://drewlepp.com/testing/laa/LAA%20studio/index.html
Thanks!!!!
Old question, but i'll point you to the correct answer anyway (in case someone else stumbles on this)
The older CSS looks fine to me. But if you're using IE9 and using private font, you'll see an error in IE9's console. So you need to do what this bloke has done here: #font-face works in IE8 but not IE9
#font-face {
font-family: 'Tangerine';
src: local('Tangerine'), url('/fonts/Tangerine_Regular.ttf') format('truetype');
}
try this. I am using like that in my own site