Hi guys

 

I am currently working on a Tumblr theme, and i want to use various types of Helvetica Neue.

I was wondering if i could do this with FontFace? but ive never used it before so may need some help When i go to Font Squirrel and i upload Helvetica Neue to it, then download a webkit it gives me a stylesheet as well as some other files. From what i can see it only gives me the regular font type. Not Light, Ultra light, etc.

Do i need to do something else? or is the other types in the one i downloaded?

 

Thanks for your help

Easiest way to display different weights is with the font-weight property and numeric values, but there might be some compatibility issues.

Ah, thanks

Ill give it a shot.

 

One more thing while i remember.

@font-face {
   font-family: 'HelveticaNeueBold';
   src: url('helveticaneue-webfont.eot');
   src: url('helveticaneue-webfont.eot?#iefix') format('embedded-opentype'),
        url('helveticaneue-webfont.woff') format('woff'),
        url('helveticaneue-webfont.ttf') format('truetype'),
        url('helveticaneue-webfont.svg#HelveticaNeueBold') format('svg');
   font-weight: normal;
   font-style: normal;

}

 

It gave me this code for the font, and i see that the sources are local files? is this correct?

That looks OK. Edit the font-weight, but as you are altering a special font the result may not be as good as using a font that is designed up to be lighter or heavier, it may be a bit messy.

 

The files should be local (and uploaded to your server), you need to have a separate styesheet with the styles and a link to it in your page head section.

 

See http://www.wickham43.net/css3.php#font-face and the head section of that page for a tutorial based on fontsquirrel:-

<link rel="stylesheet" href="font-face/matchbook.css" type="text/css" charset="utf-8" media="all">

and

/*STYLES FOR @FONT-FACE*/
h3.matchbook { font: 40px/44px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 2px; margin: 4px 0; font-weight: bold; } /*40px/44px is size and line-height*/
p.matchbook { font: 24px/27px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 1px; }

where the css file is

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 23, 2010 07:46:26 AM America/New_York */

@font-face {
font-family: 'MatchbookMatchbook';
src: url('Matchbook-webfont.eot');
src: local('☺'), 
url('Matchbook-webfont.woff') format('woff'), 
url('Matchbook-webfont.ttf') format('truetype'), 
url('Matchbook-webfont.svg#webfontilT7vtqy') format('svg');
font-weight: normal;
font-style: normal;
}

 

Note that although the stylesheet is font-weight: normal; I changed that to font-weight: bold; just for the h3 style in the head section style tag.

 

 

It gave me this code for the font, and i see that the sources are local files? is this correct?

 

Yes, the font files are normally kept on your web server. They can also be called from across the web from the likes of google web fonts API.This latter method being preferable sometimes if the font file is quite large by helping to reduce the amount of data that your web server has to send to the client.

That looks OK. Edit the font-weight, but as you are altering a special font the result may not be as good as using a font that is designed up to be lighter or heavier, it may be a bit messy.

 

The files should be local (and uploaded to your server), you need to have a separate styesheet with the styles and a link to it in your page head section.

 

See hlink and the head section of that page for a tutorial based on fontsquirrel:-

<link rel="stylesheet" href="font-face/matchbook.css" type="text/css" charset="utf-8" media="all">

and

/*STYLES FOR @FONT-FACE*/
h3.matchbook { font: 40px/44px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 2px; margin: 4px 0; font-weight: bold; } /*40px/44px is size and line-height*/
p.matchbook { font: 24px/27px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 1px; }

where the css file is

/* Generated by Font Squirrel (link) on August 23, 2010 07:46:26 AM America/New_York */

@font-face {
font-family: 'MatchbookMatchbook';
src: url('Matchbook-webfont.eot');
src: local('☺'), 
url('Matchbook-webfont.woff') format('woff'), 
url('Matchbook-webfont.ttf') format('truetype'), 
url('Matchbook-webfont.svg#webfontilT7vtqy') format('svg');
font-weight: normal;
font-style: normal;
}

 

Note that although the stylesheet is font-weight: normal; I changed that to font-weight: bold; just for the h3 style in the head section style tag.

 

Thanks a lot

so i need two stylesheets for this? one for font face and one for my normal style sheet. I would only need Helvetica Neue - Light/Ultra Light but when i go for uplaod it to font squirrel i can only find the regular version.

 

 

Yes, the font files are normally kept on your web server. They can also be called from across the web from the likes of google web fonts API.This latter method being preferable sometimes if the font file is quite large by helping to reduce the amount of data that your web server has to send to the client.

 

I think i will have to take the google method, since i dont think i cant host the fonts for Tumblr.

Thanks a lot

so i need two stylesheets for this? one for font face and one for my normal style sheet. I would only need Helvetica Neue - Light/Ultra Light but when i go for uplaod it to font squirrel i can only find the regular version.

 

No, I just used two stylesheets because it's an unusual situation and I wanted to keep it separate. Similarly the head section styles with the p and h3 tag styles could also follow the fontsquirrel styles in the main stylesheet.

Ah, i see. Thanks again for the help

 

Just noticed that i cant find helvetica on that google web fonts >_> great

Edited May 3, 201115 yr by Hadouken