External font not loading correctly CSS - css

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);
}

Related

W3 CSS Validation error for font-face definition

I have following code in my CSS file, which I think is perfectly valid, however W3C-CSS validator shows error as shown in the picture, any idea on how to fix this issue,
#font-face {
font-family: 'Calibri';
url('calibri.ttf') format('truetype');
}
See below for more information.
You forgot to add src property to font face.
#font-face {
font-family: 'Calibri';
src: url('calibri.ttf') format('truetype');
}

Google web fonts looking choppy in Chrome - how to apply the fix

This is a general issue, and it seems like there is a solution.
Problem is that web fonts shows choppy in chrome. The solution should be to move the .svg call before the .woff call. Explained here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome and here: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
Problem is, that I'm using google web fonts, and importing the font like this:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
And I dont know, and cannot find out, how to import it with the #font-face css tag instead of the above. I've tried, but got stuck since google only offers the font in ttf and not svg or woff.
Hope you can help.
You'll have to host the fonts yourself if you want to apply this fix.
Your Google Fonts link is a request for a stylesheet, that gets dynamically built based on the parameters you supply - and on browser detection. For your example link:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
If you actually make the request yourself using curl:
$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic
this is what gets sent back:
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 400;
src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 700;
src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 400;
src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 700;
src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
The simplest thing to do is to go back to Google Web Fonts, download the font in question by going here and clicking the download arrow.
Then you can use the suggested fix from here, referencing the font files you downloaded:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
Did you do a proper reset of all styles?
Your inconsistent rendering experience can be caused by the browser defaults.
A reset.css sets all Elements back to default-values, this way cross-browser inconsistencies are reduced. There are many examples for reset.css, one of the Most popular is meyerweb reset css.
Another way to reduce inconsistency is to use normalize.css.
The difference between the two approaches in short is, reset.css just resets all browser specific styles while normalize.css has a wider scope by creating cross-browser defaults.
Differences between both are explained here by the developer of normalize.css.
If all those links do not help make sure that you set the font-weight always right an import all necessary font-weights.
You can read about font weights here: http://css-tricks.com/watch-your-font-weight/
You should also apply this technique when you use normalize.ccs because it doesn't reset the font-weight as rest.css does.
Add this to your stylesheet for each element.
opacity: .99;
For example -
p, li {
opacity: .99;
}
I have no idea why this works but it did.

Font-face isn't working in Firefox

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

Using #font-face problems

I'm having a little trouble with using #font-face which really confuses me. I think I'm doing right or not.
So I made the declaration
#font-face{
font-family: Art Post black;
src: url('/fonts/ArtPostblack.ttf');
}
#font-face{
font-family: SimplyDelicious;
src: url('/fonts/SimplyDeliciousFont3.ttf');
}
Then made the calls
#blah{font-family:Art Post black; } #blah2{font-family:SimplyDelicious;}
Now problem is Art Post black works but SimplyDelicious doesn't work
Also when I remove Art Post black font. it doesn't change meaning the custom font is still not removed. So... I'm confused, am I doing it right? well I guess not.
Your syntax is right, but it is very basic. First, use this recommended #font-face syntax:
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
UPDATE: You need "" around the font name in both the #font-face syntax and in your css selection if the font name has spaces in it. It won't select correctly if you don't have the single or double quotes as your code shows. That's likely your problem. Use this new bulletproof syntax though too to make it more cross-browser.
source: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
Then make sure your links are correct. keep in mind, use a / at the beginning of your URL directs the browser to the root directory of your domain. So paste that into your address bar after the domain name and see if it downloads the font file, if so, your links are correct.
This way of calling different font may help :
#font-face {
font-family: 'myriadproregular';
src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype");
}
#font-face {
font-family: 'myriadprocond';
src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype");
}
#font-face {
font-family: 'myriadprosemibold';
src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype");
}
and in your case
#font-face{
font-family: Art Post black; (why this font name have space? it was supposed to be like ArtPostblack )
src: url('/fonts/ArtPostblack.ttf');
}
#font-face{
font-family: SimplyDelicious;
src: url('/fonts/SimplyDeliciousFont3.ttf');
}
and make sure they are near to css files and proper path.

css and php displaying fonts from folder

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 .

Resources