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
Related
My CSS custom font doesn't load onto the page when you load my website. At least, not until you click "home" or one of the other tabs. Anyone have any idea why this is and how to fix it? I used
#font-face {
font-family: OpenSansLight;
src: url(OpenSans-CondLight.ttf);
}
#font-face {
font-family: OpenBold;
src: url(OpenSans-CondBold.ttf);
}
#font-face {
font-family: OpenRegular;
src: url(OpenSans-Regular.ttf);
}
And
body, html{
background-color: #FFF;
margin:0;
padding:0;
height: 100%;
width:100%;
font-family:"OpenSansLight";
}
The font doesn't load until I click a link within my website. Anyone have any idea why?
EDIT: Still trying to resolve this... No dice so far.
Second edit: People keep telling me to check if the font is in the right place. IT IS. And everything works. But not upon loading the page, for some unknown reason. hence my question. Please don't answer if you don't even read my question.
Third edit: Another few hours of fiddling have not resolved the issue. I tried expanding the support of the fonts by using
#font-face {
font-family: 'OpenRegular';
src: url('opensans-regular-webfont.eot');
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff2') format('woff2'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'),
url('opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
But still, the same thing happens.
Noteworthy: Firebug greys out the font when inspecting it when it's not showing, but turns blue and kicks in when I click home or one of the other tabs and the font works.
Fourth edit: A few more days have passed and I'm still struggling with this problem. It's driving me insane. Please help me. I've tried every single possibility on W3C, Google results, Stack Overflow and every suggestion, yet nothing works for me. I'm sure my code is correct but it just won't load on the first try no matter what I try.
Make sure that the CSS file and the font files are in the same directory, if not either put them in the same directory or amend the CSS to have the correct path to the files
#font-face {
font-family: OpenSansLight;
src: url(path/to/OpenSans-CondLight.ttf);
}
#font-face {
font-family: OpenBold;
src: url(path/to/OpenSans-CondBold.ttf);
}
#font-face {
font-family: OpenRegular;
src: url(path/to/OpenSans-Regular.ttf);
}
It's possible to use downloaded fonts on a local web page (XAMPP) without internet connection ? I need this to see the fonts because some people maybe can't afford internet connections and they use theirs computers only to work.
This is the web font: http://openfontlibrary.org/en/font/didact-gothic
I tried this with no luck: http://css-tricks.com/snippets/css/using-font-face/
Thanks in advance!!!!
EDIT
I think the place where the files are stored is the problem because I have this .css and no work. The place of all my files is /opt/lammp/htdocs
#font-face {
font-family: 'DidactGothicMedium';
src: url('didactgothic.eot');
src: url('didactgothic.eot') format('embedded-opentype'),
url('didactgothic.woff') format('woff'),
url('didactgothic.ttf') format('truetype'),
url('didactgothic.svg#DidactGothicMedium') format('svg');
}
p {
font-family: 'Didact Gothic';
font-weight: normal;
font-style: normal;
padding-left: 25px;
padding-right: 25px;
}
input {
font-family: 'Didact Gothic';
font-weight: normal;
font-style: normal;
}
Yes it's possible, if you just go to your localhost in the browser it should work just like when you would port forward it and go there with your own IP/Domain.
If that #font isn't working for you, make sure 1) You use Chrome/Firefox (Internet explorer only supports certain file exentions (.otf I think).
and 2) You have the right path setup!
Also maybe some of your html/css code could help us awnser your question :)
You have to use a web font kit, which you can download from sites like http://convertfonts.com, include the style and font files and the font will work on local development, but for that you first need a otf or ttf file for the font to download the webkit.
just make a fonts folder, like you have css, js folder and in your css file just include /fonts/, like
#font-face { font-family: 'MuseoSans-100';
src: url('fonts/museosans-100.eot');
src: url('fonts/museosans-100.eot') format('embedded-opentype'),
url('fonts/museosans-100.woff') format('woff'),
url('fonts/museosans-100.ttf') format('truetype'),
url('fonts/museosans-100.otf') format('opentype'),
url('fonts/museosans-100.svg#MuseoSans-100') format('svg');
} just an example
if your css file is in another folder make the changes to url, correspondingly
#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 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 .
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.