Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Fonts and transparency for all browsers

    Hello,

    I'm relatively new to HTML and CSS, i'm an artist and as a project I decided a while back to build my own website from scratch with no short-cuts, in order to give it a truly retro look as my web page writing skills are not amazing. This is the website at the moment.

    I'm trying to re-write a menu system into the main page and the problem i'm having is with two different aspects of CSS, font embedding and transparency.

    Here is a picture of my current design in google chrome g

    And this is it in internet explorer


    As you'll notice the menu backgrounds are not transparent and the embedded font is not recognised and for some reason this is all shifted around.

    I've used CSS @fontface format to embed a true type font file which I understand will not currently work on many browsers at all! But through extensive google searches I fail to find any other viable alternatives to embed fonts for all web browsers.

    Secondly the transparency issue I think it might be the way in which I've laid out the code but here is a sample of it =

    //div#mainmenu {

    padding: 0px;
    margin-top: 150px;
    margin-bottom: 20px;
    width: 800px;
    height: 20px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    background-color: #444444;
    background: filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
    font-family: "SF Intermosaic B", Lucida Console, Trebuchet MS Bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    }//

    I borrowed the code for transparency but I couldn't get it to work as a class so i inserted it into the div id for the menu which seemed to work for google chrome but not for internet explorer.

    Any help with these two issues would be much appreciated.

    Thanks

    Francis

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Fonts for IE should be in the EOT format; you can also use WOFF for browsers that support it.
    Older versions of IE don't have support for CSS opacity. For all modern browsers, you should be using only the opacity property, not the proprietary ones you are now. Opacity in IE can be achieved through the nonstandard filter property.

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have tried using the .eot file extension before but this did still not allow the font to be embedded using the CSS @fontface attribute, i assumed there must be an older way of embedding fonts?

    And about the transparency issue, I am using the non standard filter property along with others -->

    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;


    but i'm using them in a div id which i think might be the problem I've tried using them as a class but i couldn't get that to work either. The transparency in the div id shows up on most other browsers just not IE.

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Actually I got the transparency working in IE, it was simply an error on my part

    I'd left it as

    background: filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;

    rather than what i posted above which does work.

    But I still can't figure out how to embed fonts for multiple browsers this is what I have in style sheet --->

    @font-face {
    font-family: "SF Intermosaic B";
    font-style: normal;
    font-weight: normal;
    src:url("http://www.pixelocracy.co.uk/fonts/SF Intermosaic B.ttf");
    }

    and then i just reference the font-family in the div id as "SF Intermosaic B" which only seems to work for Google chrome and nothing else

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,627
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    At first I would remove the whitespaces from the file names. I get eye cancer when I see that and it could lead to problems in one or another application.
    Then look into the bulletproof font face syntax by Paul Irish on how to implement embedded fonts across all browsers. Basically you need your font in several different formats. For easy conversion there is the Font Face Generator by Fontsquirrel.

  • Users who have thanked VIPStephan for this post:

    pixelated (08-26-2010)

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Did you just change .ttf to .eot? Because that doesn't change the file format, only the extension.

  • #7
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    that really is bulletproof. sorry for the eye cancer

  • #8
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm not completely devoid of brain cells, I wasn't just changing the the file name thinking that it had magically converted itself!

    I got it working perfectly in all browsers using the bullet proof @fontface piece of code. I don't know why I couldn't find that gem sooner.

    Thanks Stephan

    *Actually i've just tested it on a mac + safari and it still doesn't seem to be loading the font : (
    Last edited by pixelated; 08-26-2010 at 08:01 PM.

  • #9
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok, so far i've still not got it to work across all browsers! sooo close, IE and Google chrome on windows seem to read the embedded font. but not safari on mac's

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

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,627
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Would you be able to show us a live example?

  • #11
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've updated the main menu page now for the website which is here

    you can view the source code to see what i might be doing wrong, I don't want to post it in a thread incase i make someones eyes bleed, there are probably a few inefficient scraps laying around like an untidy room

    any ideas how to fix the fontface problem, would be much appreciated

    thanks

  • #12
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Google Chrome?! Oh jezus! Not another browser - please!!! I can't even cope with the differences between Firefox and IE. I can't keep up with this...
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,627
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Safari show the font perfectly fine for me.
    However, although it’s not specifically stated anywhere in the W3C specifications I would still rather put the @font-face rule at the top of the stylesheet since this will probably load the font faster as the browser doesn’t have to download all CSS before the actual font comes to sight.

    Quote Originally Posted by Doctor_Varney View Post
    Google Chrome?! Oh jezus! Not another browser - please!!! I can't even cope with the differences between Firefox and IE. I can't keep up with this...
    Have you been hiding in a cave for the last couple of years that you haven’t noticed the advent of Google Chrome? But apart from that: Chrome uses the same rendering engine as Safari (that is, Webkit) so you don’t have to worry all that much about another browser to test in. Generally you can say if it works in one browser then it works in the other one, too (provided they use the same version of the rendering engine).

  • #14
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    It is traditional to include at-rules at the beginning of the stylesheet. At least it looks a bit cleaner, if it doesn't avoid any compatibility issues (:


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •