• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Fonts


Tony Hardy

Well-Known Member
#1
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;
}
 

Tony Hardy

Well-Known Member
#3
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-Known Member
#4
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 :(
 

Tony Hardy

Well-Known Member
#6
Code:
@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. :(
 

Tony Hardy

Well-Known Member
#8
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-Known Member
#9
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

Well-Known Member
#10
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.
 

Tony Hardy

Well-Known Member
#12
Yeah, I was thinking of doing something like that. Cheers Corrosive.

Now the positioning of the site in different browsers is all over the places :(
 

Tony Hardy

Well-Known Member
#14
There's only two elements to sort out. I just can't get my head around what I should be using for what?

A Nav Menu, then the Main Content div....I thought absolute for the Nav Menu and Relative for the Main Content...but apparently that's not doing the trick.
 

Corrosive

Well-Known Member
#15
There's only two elements to sort out. I just can't get my head around what I should be using for what?

A Nav Menu, then the Main Content div....I thought absolute for the Nav Menu and Relative for the Main Content...but apparently that's not doing the trick.
Navs should be an unordered list of links;

Code:
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
use display inline or float them left to get them to line up like soldiers :icon_wink:
 

Tony Hardy

Well-Known Member
#16
Unfortunately, with this Cargo thing, you can get into the HTML that sorts the lists out.
It dervies them from the tags you assign to the projects. Total nightmare.

I'll try float/inline soon.
 

Tony Hardy

Well-Known Member
#17
Code:
.nav_container.horizontal {                                           /* Enabled via Display Options */
    left: auto;
    padding: 35px 0 60px 35px;
    position: fixed;
    top: auto;
    width: 670px;
    z-index: 25;
}


#content_container {
    left: 370px;
    margin: 0 0 0 0;
    padding: 50px 0 0 35px;
    position: relative;
    width: 705px;
    z-index: 10;
}
They're the two main bits of code I have, the elements I'm trying to line up etc.
Float; left, sticks the navigation to the left side of the browser?

I need to get them to line up with the header over at Eye For Illustration
 

Tony Hardy

Well-Known Member
#19
Yeah, I mean I've got the full CSS, but that's it. There's a tiny bit of an HTML editor, but not a lot.
I really don't know how to get it all to fall inline. I'm on their forums now.
 

Corrosive

Well-Known Member
#20
Yeah, I mean I've got the full CSS, but that's it. There's a tiny bit of an HTML editor, but not a lot.
I really don't know how to get it all to fall inline. I'm on their forums now.
Yeah, all the CSS in the world isn't going to help you if you can't access the HTML. Good luck mate!