Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Fonts

Discussion in 'Website Coding & Programming Forum:' started by Tony Hardy, Nov 21, 2011.

  1. Tony Hardy

    Tony Hardy Well-Known Member

    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;
    }
     
  2. sthomas

    sthomas Member

  3. Tony Hardy

    Tony Hardy Well-Known Member

    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
     
  4. Tony Hardy

    Tony Hardy Well-Known Member

    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 :(
     
  5. Corrosive

    Corrosive Moderator Staff Member

  6. Tony Hardy

    Tony Hardy Well-Known Member

    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. :(
     
  7. Corrosive

    Corrosive Moderator Staff Member

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

    Tony Hardy Well-Known Member

    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.
     
  9. Corrosive

    Corrosive Moderator Staff Member

    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?
     
  10. Tony Hardy

    Tony Hardy Well-Known Member

    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.
     
  11. Corrosive

    Corrosive Moderator Staff Member

    Fair enough. This is a good way to offer HTML alternatives if you go down the images route; Easy CSS Image Replacement (Phark) - DoMedia remember accessibility at all times! :icon_wink:
     
  12. Tony Hardy

    Tony Hardy Well-Known Member

    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 :(
     
  13. Corrosive

    Corrosive Moderator Staff Member

    Ouch :-( sounds nasty.
     
  14. Tony Hardy

    Tony Hardy Well-Known Member

    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.
     
  15. Corrosive

    Corrosive Moderator Staff Member

    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:
     
  16. Tony Hardy

    Tony Hardy Well-Known Member

    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.
     
  17. Tony Hardy

    Tony Hardy Well-Known Member

    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
     
  18. Corrosive

    Corrosive Moderator Staff Member

    Christ alone knows mate. That's not how I'd put that layout together and I know you are restricted by what you have access to.
     
  19. Tony Hardy

    Tony Hardy Well-Known Member

    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.
     
  20. Corrosive

    Corrosive Moderator Staff Member

    Yeah, all the CSS in the world isn't going to help you if you can't access the HTML. Good luck mate!
     

Share This Page