Fonts

[Tony Hardy]

Hey everyone,

I need to display the font Futura on the header of a webpage, I have the CSS knowledge of how to make it display, but, that's for a Mac, as it comes as standard.

I know there's been advancements in the field on how to make it dispay in Windows too, how's it done? This is what I've got at the minute;

.nav_container.horizontal { /* Enabled via Display Options */
font-family: Futura, Verdana, Arial, sans-serif;
font-size:;
left: auto;
padding: 0 0 0 0;
position: relative;
top: -55px;
right: -690px;
width: 500px;
z-index: 1;
}

[sthomas]

Hi Tony,

I don't think your method would work as it depends on the end user having a copy of Futura installed on their PC.

The way I would go about this is using a web font embedding method: Review of Popular Web Font Embedding Services - Smashing Magazine

Hope that helps

[Tony Hardy]

Hey sthomas,

Cheers for that. Futura works for Mac users, apparently it's about 90% safe. Not really sure though. I think it looks fine when it's not Futura too, but I'll have a look at that.

Cheers,
Tony

[Tony Hardy]

Well I've got this;

@font-face {
font-family: "Futura Std";
src: local("☺"),
url("http://typefront.com/fonts/825589673.ttf") format("truetype");
}

And then, put Futura Std as my font family but it's not working :(

[Corrosive]

Don't leave it to 90% chance... Font Squirrel | Create Your Own @font-face Kits

[Tony Hardy]

@font-face{ 
    font-family: 'Futura';
    src: url('futurastd-heavy-webfont.eot');
    src: url('futurastd-heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('futurastd-heavy-webfont.woff') format('woff'),
         url('WebFont.ttf') format('truetype'),
         url('futurastd-heavy-webfont.svg#webfont') format('svg');
}
   
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

That's now what I've got in the CSS and HTML respectively. No cigar. :(

[Corrosive]

You've uploaded the font files (.ttf, .woff etc) and checked the paths in the CSS right?

[Tony Hardy]

Yeah, I've uploaded the font files, and the paths all seem to be correct.
One thing I'm thinking is that because it's Cargo, it won't allow me access to different directories.

So testpage.com/css/stylesheet.css

Won't actually let me there, it gives me a 404 error, but, that's where it's located.

[Corrosive]

Well if you can't access it then I'd guess that anyone or any browser would also struggle to access it as well. It isn't going to work if any of the files are not accessible. WTF is 'Cargo' btw?

[Tony Hardy]

It's this; Cargo
A bit of a tricky bugger of a system, all CSS/HTML editing has to be done on screen and through flicking through certain tabs.

Think I'm just going to go with images for the links.