Not able to get font-face working - css

I'm trying to use #font-face, but I'm not being very successfull.
Up till now, I've been using Google fonts:
// HTML header
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
//CSS
#leftSection nav {
font-family: "Cuprum", Verdana, Arial, sans-serif;
}
Then I downloaded the fonts and tried using font-face:
This is my CSS:
#font-face {
font-family: 'Cuprum';
font-weight: normal;
font-style: normal;
font-size: 0.5em;
src: url('cuprum.eot?') format('eot'),
url('cuprum.woff') format('woff'),
url('cuprum.ttf') format('truetype'),
url('cuprum.svg#Cuprum') format('svg');
}
#leftSection nav {
font-family: "Cuprum", Verdana, Arial, sans-serif;
}
The fonts are located in the same folder as the CSS.
I've looked at, and tested oteher solutions, but I'm still not able to get it wokring.
I'm testing with the following browsers: FF7, IE8
Update
I've added font-size: 0.5em; This should at least change the font size. But that's not happening either. So I'm guessing the entire #font-face is ignored.

Did you try using the Font Squirrel generator? Just upload the font and it will do everything for you, it's real simple.
Here is the link:
http://www.fontsquirrel.com/fontface/generator

Hey Steven are you done with this?
Why dont you try this out.
insert this inside your css:
#font-face {
font-family: 'Cuprum';
font-style: normal;
font-weight: normal;
src: local('Cuprum'), url('http://themes.googleusercontent.com/static/fonts/cuprum/v1/sp1_LTSOMWWV0K5VTuZzvQ.woff') format('woff');
}
#leftSection nav {
font-family: Cuprum, Verdana, Arial, sans-serif;
}
i hope it will work. :)

I think you could try it without the quotes around "Cuprum".
#leftSection nav {
font-family: Cuprum, Verdana, Arial, sans-serif;
}
Also, there is sometime an issue if you/the user have that font installed locally.
To get around that, you can set a fake local reference.
See Paul Irish's Bulletproof #font-face syntax
EDIT
Two other things you might try:
change the font name to lowercase, cuprum.
Remove the following from the declaration:
font-weight: normal;
font-style: normal;
font-size: 0.5em;

Related

I downloaded a webfont but it only works in brackets

So I downloaded a font (legally I bought it)
and the font looks really good. but it only displays in the brackets live preview.
when I open it in chrome, it just refuses to work. I followed all the instructions on the font when I bought it. Can anyone help me?
This is an image of the bracket font display which is what I want:
And this is the exact same code when I open the index.html file in Google Chrome.
This is the code I am using to get the font in CSS
#font-face{
font-family:"Ethnocentric W05 Italic";
src:url("/fonts/MTI-WebFonts-367222846/Fonts/5118942/e91f32ff-44ec-47c0-afd3-5cdeeb6c73c8.woff2")
format("woff2");
}
and this is what I used to put it in the header
font-family: "Ethnocentric W05 Italic";
If you declare a custom font using #font-face, the browser will try to fake the bold and italic styles if it can’t find them.
Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:
[css]#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-B-webfont.eot');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-BI-webfont.eot');
font-weight: bold;
font-style: italic;
}
.test {
font-family: Ubuntu, arial, sans-serif;
}[/css]
Then all you need to do is apply that single font-family to your target, and any nested bold or italic styles will automatically use the correct font, and still apply bold and italic styles if your custom font fails to load.

#font-face working (locally and in remote server) on Chrome, Safari, Opera but not with Firefox

I have my fonts in my-theme/assets/fonts/my-font.ttf and this is my .css
#font-face {
font-family: 'Jubilat';
src: url('../assets/fonts/Jubilat/Jubilat-Light.eot');
src: url('../assets/fonts/Jubilat/Jubilat-Light.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/Jubilat/Jubilat-Light.woff') format('woff'), url('../assets/fonts/Jubilat/Jubilat-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
body {
font-size: 1.3em;
font-family: "Jubilat-Light", Helvetica Neue, Roboto, Arial, sans-serif;
}
This is a Wordpress site. Also, in Firebug I don't see errors. It is working (locally and in remote server) on Chrome, Safari, Opera but not with Firefox I really don't know what else to do. Thanks.
This is the url
Probably you have wrong names for font-family http://joxi.ru/krDlgpJsEGz6nr
You've named the font family "Jubilat", so that's what you need to refer to it as, despite the font filenames. So, this should do it...
body {
font-size: 1.3em;
font-family: "Jubilat", Helvetica Neue, Roboto, Arial, sans-serif;
}
Alternatively, update the font-face definition and leave the body rule as it is ...
#font-face {
font-family: 'Jubilat-Light';
...

Internet Explorer 8 ignores font-weight in CSS

So I'm having problems understand why IE is ignoring my CSS here. I have this code:
<h2>Har du stadsnät eller kan du få det?</h2>
I.e. nothing weird or anything.
And here is the resulting rendering:
But here is the CSS code for this HTML:
.rubrik, h2 {
font-family: Lato;
font-size: 32px;
font-weight: normal;
line-height: 38px;
font-variant: normal;
font-style: normal;
color: #969696;
}
Which clearly states that the H2 should have "normal" as font weight, yet the rendered text is clearly bold, here is a correct rendering (from Safari)
So, using the included developer tools of Internet Explorer 8, I inspect the CSS interpretation, and that looks like this:
As I understand it, what I am looking at here is IE8's interpretation of my CSS, and suspiciously missing is the "normal" attribute. IE has converted the CSS to the one-line version of "font" but didn't include the "normal" part. Now, the font "Lato" is a font-face font, and the font-face CSS is here:
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato.eot');
src: local('nofont'), url('/media/fonts/Lato.ttf') format('truetype');
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Bold.eot');
src: local('nofont'), url('/media/fonts/Lato-Bold.ttf') format('truetype');
font-weight: bold;
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Bold-Italic.eot');
src: local('nofont'), url('/media/fonts/Lato-Bold-Italic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Italic.eot');
src: local('nofont'), url('/media/fonts/Lato-Italic.ttf') format('truetype');
font-style: italic;
}
Even when specifying "normal" in the font-face declaration for font-weight, it doesn't work. So I'm stuck here, trying to figure out what I am doing wrong not to have IE include "font-weight: normal" in the declaration for H2... Any guesses? Thanks in advance...
I think you need to change the name of the font-family: Lato; on each fontface property, as IE is possibly getting confused. Instead try putting font-family: Lato-bold;, font-family: Lato-italic etc. Also, if the font has a bold face (like Lato does and you have referenced in the fontface properties) then you do not need to add font-weight: bold; for a fontface property, as the font is already bold and adding the font-weight will just add faux-bold and make it look bad.
This means that for your h2, you only need to put font-family: Lato; if you want it to be the normal, non-bold version.
This may be an inheritance issue. Have you tried putting the !important keyword.
font-weight: normal !important;

#font-face issues

I have done this before, but still haven't mastered it. I downloaded a font kit from fontsquirrel.com and tried to get my custom font to work on my site. I have tried so many variations including the "bullet proof" methods found online that I have now confused myself. Could someone look at the code below and show me how to correctly get a custom font to work on a website using #font-face?
I have a style sheet named fonts.css located in a folder named css. This is being used to call the custom font. The font files are located in a folder from the root named fonts.
The css for the style sheet fonts is:
#font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/bebasneue-webfont.woff') format('woff'),
url('../fonts/bebasneue-webfont.ttf') format('truetype'),
url('../fonts/bebasneue-webfont.webfontABYyK1dn') format('svg');
font-weight: normal;
font-style: normal;
The other styles sheets for layout, etc call the font like this:
}
#merchandise h1 {
font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
font-size: 33px;
font-weight: normal;
line-height: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
Anything obvious? Of course, it works locally on my machine because I have the font installed.
In #merchandise h1, font-family: "Bebas Neue" needs to be font-family: "BebasNeueRegular"
or
In #font-face, font-family: 'BebasNeueRegular' needs to be font-family: 'Bebas Neue'

CSS fontface fallbackfont

When i use fontface, the browser needs some time before the font is downloaded and rendered, until then the browser default font is shown. I have tried to give Arial as fallbackfont and as general HTML/BODY font, but this does not change the problem.
is there a way to avoid this?
#font-face {
font-family: 'StrukturProBold';
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot');
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot?iefix') format('eot'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.woff') format('woff'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.ttf') format('truetype'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;
}
body, html {
font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}
h1 {
font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}
This is called a "Flash Of Un-styled Text" (or FOUT). You wont see it in Webkit browsers, because they hide the text until the font has been loaded. If you want to be more agressive with forcing other browsers to hide the FOUT, you can do it with some pre-written JavaScript.
Paul Irish explains it all here:
http://paulirish.com/2009/fighting-the-font-face-fout/
Here's the code you need:
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['yourfont'],
urls : ['http://example.com/yourfontdeclaration.css']
}
});
</script>
and some CSS:
h2 {
font-family: 'yourfont', helvetica, sans-serif;
}
.wf-loading h2 {
visibility: hidden;
}
Unless the visitor has the specialty font installed on their system, the browser has to download it just like it would an image file, or a linked stylesheet or .js file.
From reading the comments above, you're probably already doing the best that you can.
StrukturProBold is just a simple sans-serif font.
You can expand your list of secondary font choices though, maybe Arial and Helvetica aren't as good of a choice as say Verdana, or Trebuchet
font-family: "StrukturProBold", Trebuchet, Verdana, Helvetica, Arial, sans-serif;

Resources