I have downloaded a font face kit from font squirrel, and created a css file with the given code. I copied all of the woff, ttf, eot, and svg files to my public folder, and have created a h1 code that references the font that I want to use. However when I go to check to see if the font is working, I just get the standard times new roman. If I put a backup font next to the one I want to use, I get that font. Does anyone know why this may be happening? Here is the code I am using.
#font-face {
font-family: 'CartoGothicStdBook';
src: url('CartoGothicStd-Book-webfont.eot');
src: url('CartoGothicStd-Book-webfont.eot?iefix') format('eot'),
url('CartoGothicStd-Book-webfont.woff') format('woff'),
url('CartoGothicStd-Book-webfont.ttf') format('truetype'),
url('CartoGothicStd-Book-webfont.svg#webfont1l1oLWSU') format('svg');
font-weight: normal;
font-style: normal;
}
.carto {
font-family: CartoGothicStdBook, Arial;
color: #333333;
font-size: 44px;
letter-spacing: -3px;
}
<h1 class= "carto"><b>Share Your Knowledge & Explore Your Passions<b></h1>
are you importing these fonts from an external style sheet?
When I placed my fonts in the same directory and embedded the #font-face declarations directly in my pages as applicable, I had no problems, but it didn't seem like I was able to link to a relative source. I'm wondering if this has something to do with all the fuss over licensing issues. Another thing...I seemed to have better luck referencing fonts with '' e.g.:
ul li:nth-child(6n),#filler {
color:#3F9;
font-family:'WCRhesusABtaRegular';
}
where the corresponding font would be:
#font-face {
font-family: 'WCRhesusABtaRegular';
src: url('WC_Rhesus_A_Bta-webfont.eot');
src: url('WC_Rhesus_A_Bta-webfont.eot?iefix') format('eot'),
url('WC_Rhesus_A_Bta-webfont.woff') format('woff'),
url('WC_Rhesus_A_Bta-webfont.ttf') format('truetype'),
url('WC_Rhesus_A_Bta-webfont.svg#webfonte627I3xy') format('svg');
font-weight: normal;
font-style: normal;
}
btw, this is an awesome font for decorative purposes (if you want to go Jackson Pollack all over your website), not so much for reading :)
hope this helps if you run into any more issues...if you did figure out a way to import font style sheets or place fonts in a separate directory, I would certainly like to hear about it...I haven't been able to find examples on the web where anyone is importing fonts...but I have seen people use a /Fonts directory. This may also be a licensing related item?
Oh and a quick note for those of you who are just getting started with #font-face (I'm just getting started myself) ... there are a couple of "gotchas" that Paul Irish mentions, but you should make sure that fonts are not locally installed as your browser will use your local fonts if available - this makes your testing unreliable...of course it's not too difficult to uninstall the fonts (at least in Windows 7).
Here's some more info from Paul Irish:
http://paulirish.com/2010/font-face-gotchas/#comment-48744
The answer is listed above and it was a simple directory issue. Rails requires the leading / for an added directory.
Related
Visiting a website i have found out the menu links were abnormally bolder than wile watching the same page from my collegue computer with same browser.
Deleting the corresponding font from my windows font folder corrected the difference.
My question is how preventing this possibility when designing css fonts on a website
Most #font-face at-rules begin with a local(name-of-local-file) and then a reference to your distant url(/on/server/teh-webfont.woff).
Browsers will try, in this typical situation, to use the local file and if they find nothing will continue by downloading from your server the distant asset. If they find a local matching font, then they'll use it immediately and will stop their search of a font thus they won't download and use your distant asset.
Conclusion: don't use local() and only keep those url(). It's the contrary of this SO answer
Example without local() and many url() corresponding to many formats. Browsers will download the first one that please them, not 2+ of them:
#font-face {
font-family: 'Gudea';
src: url('./fonts/gudea/Gudea-Regular-webfont.eot');
src: url('./fonts/gudea/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/gudea/Gudea-Regular-webfont.woff2') format('woff2'),
url('./fonts/gudea/Gudea-Regular-webfont.woff') format('woff'),
url('./fonts/gudea/Gudea-Regular-webfont.ttf') format('truetype'),
url('./fonts/gudea/Gudea-Regular-webfont.svg#gudearegular') format('svg');
font-weight: normal;
font-style: normal;
}
Download the font .ttf
Saving the font in a folder in your web site
For call font use this code in css:
#font-face {
font-family: "YourFont";
src: url('font/YourFont.ttf');
}
.example{
font-family: YourFont, sans-serif;
}
#font-face {
font-family: iconFont;
src: local(iconFont), url('fonts/iconFont.ttf') format('opentype');
}
The font file is not corrupt and installs fine in OSX etc. letting me preview it. But it won't render anything when I try to use it on a web page or even if I select it in illustrator it just switches to another font if I touch any key.
The font is for 'regular' and I have tried other options, but it won't work. Have tried typing with caps on/off etc. Using numpad, nothing. Have re-installed it and made sure there are no duplicates. It also won't work in Windows. Not sure if I need to change my css somehow or the fault lays with the font.
Here's a link to the font for anyone wanting to try. It's a bunch of metro icons. http://www2.zippyshare.com/v/23494573/file.html
Not sure if this will help, but this is the CSS I use, and it works fine. The webfonts directory is in the same directory as the css file, and includes three file types: .eot .ttf .woff
#font-face {
font-family: 'AvenirLT-Book';
src: url('webfonts/25EE2B_0_0.eot');
src: url('webfonts/25EE2B_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/25EE2B_0_0.woff') format('woff'), url('webfonts/25EE2B_0_0.ttf') format('truetype');
}
a typical class decleration:
.AvenirLT-Book {
font-family: AvenirLT-Book;
font-weight: normal;
font-style: normal;
}
perhaps you need to change the format to ('truetype') instead of ('opentype') ?
I have added a font to a site, added the CSS and uploaded the font files and it is working in IE but not in Firefox. Why is that?
CSS:
#font-face {
font-family: 'MyFont';
src: url('MyFont.eot');
src: url('MyFont.eot?#iefix') format('embedded-opentype'),
url('MyFont.woff') format('woff'),
url('MyFont.ttf') format('truetype'),
url('MyFont.svg#MyFontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
label { font-family: 'MyFont'; font-size: 20px; }
The label was just a test, but it's working. The font files are in the same directory as the CSS.
I've tried almost everything, and its still not working....
Does anybody know what's wrong? Any help appreciated.
In order:
Check if the font is on Google Web Fonts. If it is, use that version, don't embed your self (for ease of use, caching, browser update compat. etc.)
If not, then check your MIMEs. To do this, use Firebug's Net panel to look at the headers and check they are correct.
If the MIME is wrong, then fix it using either .htaccess, or by writing a PHP file that uses file_get_contents() and header() to fix it.
I found out there was another CSS file, overwriting the one i made.
Problem solved
I've been through a slew of questions here and I'm not seeing why what I'm doing isn't working — but it isn't. I want to use a couple nonstandard fonts in a website, embedded via css.
Here's what the CSS I got from FontSquirrel looks like:
#font-face {
font-family: 'CrimsonRoman';
src: url('Crimson-Roman-webfont.eot');
src: url('Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'),
url('Crimson-Roman-webfont.woff') format('woff'),
url('Crimson-Roman-webfont.ttf') format('truetype'),
url('Crimson-Roman-webfont.svg#CrimsonRoman') format('svg');
font-weight: normal;
font-style: normal;
Here's where it's referenced in my main css stylesheet:
p {
margin: 0 0 9px;
font-family: 'CrimsonRoman', Garamond, Times, Times New Roman, serif;
font-size: 13px;
line-height: 18px;
}
Everything's in the same directory right now, so I'm not even dealing with navigating through directories yet. The "p" declaration itself seems to be working, because if I change the first term to "Crimson," the name the font has on my computer, it loads it fine (or if I switch it to any other font I have installed locally). Whatever the problem is, I'm not seeing it.
Both sheets are linked successfully in my html doc, and the font's is linked before the main one.
I'm using Firefox to test.
Make sure your directory path is correct and pointing to the folder your font's are in on the server.
eg
#font-face {
font-family: 'CrimsonRoman';
src: url('/fonts/Crimson-Roman-webfont.eot');
src: url('/fonts/Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Crimson-Roman-webfont.woff') format('woff'),
url('/fonts/Crimson-Roman-webfont.ttf') format('truetype'),
url('/fonts/Crimson-Roman-webfont.svg#CrimsonRoman') format('svg');
font-weight: normal;
font-style: normal;
}
It's turned out to be something in how Dreamweaver renders pages, or reads CSS, etc. I finally uploaded everything to the site so I could show a couple people what was going on and the fonts mysteriously loaded. So my lesson for tonight is to regard Dreamweaver's design view as a potentially inaccurate sketch, and to look at things exactly where they'll be before I spend hours trying to fix something that isn't broken. :\
Not the answer you looking for but I really want to advice to use Cufon for this. (Direct link to Cufon)
Although #font-face is more and more supported by browsers like IE it still doesn't work perfect on each computer.
Cufon is, as we speak, supported by:
Internet Explorer 6, 7 and 8
Internet Explorer 9 beta (as of 1.09i)
Mozilla Firefox 1.5+
Safari 3+
Opera 9.5+ (9.01+ as of 1.10)
Google Chrome 1.0+
iOS 2.0+
Opera Mini (to a certain degree)
...and gives next to that way more cool font-options.
i understand its a bit rude to ask a question from scratch however i have done my research and tried a few examples with no sucess.
im trying to display a font from my local servers.
ex. DigitaldreamNarrow.ttf
which is located in :
css/fonts/DigitaldreamNarrow.ttf
i have tried placing it in my css file in the following manner:
#font-face {
font-family: DigitaldreamNarrow;
src: url(‘css/fonts/DigitaldreamNarrow.ttf’);
}
.top {
font-family: DigitaldreamNarrow;
font-size: 0.2%;
}
however at this point im lost and i dont see any results in my display.
help?
Deploying fonts via CSS is generally unsupported. Take a look at Cufon.
#font-face {
font-family: 'ArvoRegular';
src: url('Arvo-Regular-webfont.eot');
src: local('☺'), url('Arvo-Regular-webfont.woff') format('woff'), url('Arvo-Regular-webfont.ttf') format('truetype'), url('Arvo-Regular-webfont.svg#webfontau9vOdrl') format('svg');
font-weight: normal;
font-style: normal;
}
You're going to have different results from different browsers (not all browsers support/use 'eot' for example). Check out font squirrel, and download an #face kit. Very helpful resource. http://www.fontsquirrel.com/fontface
This is more than likely the direction fonts will take, and Cufon will likely become "Gif Builder"...IMO.
#trey, write this
#font-face {
font-family: 'DigitaldreamNarrow';
src: url(‘../css/fonts/DigitaldreamNarrow.ttf’);
}
may there is a problem with your url please it.
May be you have to add inverted comma to the font .