SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question fonts misbehaving

    hi ,

    Im using the @font-face command in CSS and i when i make a very simple html/css doco it works perfectly, BUT, when i put it into some preexisting html/css code

    The doco font changes but not to the font-family specified

    any where i should look before i post all of my css

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Sounds like you are over-riding the font rule somewhere. Check the code in Firebug and then you can see where the styles originate.

    Otherwise post your html and CSS or a link to the site in question.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay thats great i got firebug

    how can i tell what css rules are overiding it????

    on the computed tab it says the font-family is still seriff

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Heres my css file

    Code:
    @font-face {
        font-family: 'adventBold1';
        src: url('Fonts/advent-bd1-webfont.eot');
        src: url('Fonts/advent-bd1-webfont.eot?#iefix') format('embedded-opentype'),
             url('Fonts/advent-bd1-webfont.woff') format('woff'),
             url('Fonts/advent-bd1-webfont.ttf') format('truetype'),
             url('Fonts/advent-bd1-webfont.svg#adventBold1') format('svg');
        font-weight:normal;
        font-style: normal;
    
    }
    
    /* -----------------------------------
    primary-nav
    ----------------------------------- */
    
    
    .navigation
    {
    	clear:both;
    	padding: 0 0;
    	background-color:green;
    	width: 100%;
    	margin:0 auto;
    }
    
    .navigation li
    {
    	display:inline;
    	list-style-type:none;
    	margin:0 20px 15px 0;
    	width:800px;
    	 
    }
    
    .navigation a
    {
    	
    	padding: 0 15px;
    	text-decoration:none;
    	font-size:26px ;
    	color:#FFF;
    }
    
    .navigation a:hover
    {
    	color:#000;
    	background:green;
    	border:#000 1px solid;
    	
    }
    
    /* -----------------------------------
    container elements 
    ----------------------------------- */
    
    
    
    
    
    .container
    {
    	clear:both;
    	padding:10px;
    	background-color:#939;
    	width: 1000px;
    	margin:0 auto;
    	overflow:hidden;
    	
    
    }
    
    
    
    
    
    .main
    {   
        
    	background:red;
    	float:left;
    	width:605px;
    	margin-right:15px;
    	margin-left:10px;
    	
    }
    #portfolio
    {
    	background:red;
    	float:left;
    	width:980px;
    	margin-right:10px;
    	margin-left:10px;
    	
    }
    
    
    #portfolio img
    {
    	padding:15px;
    	float:left;
    	width:180px;
    }
    
    #portfolio table
    {
    	float:left;
    }
    
    #portfolio b
    {
    	clear:both;	
    }
    
    .main img
    {
    	padding:15px;
    	float:left;
    	width:180px;
    }
    
    .main ul
    {
    	float:left;
    }
    
    
    
    .aside
    {
    	background:orange;
    	float:left;
    	width:350px;
    	margin-right:15px;
    	
    }
    
    /* -----------------------------------
    contact box
    ----------------------------------- */
    .contact
    {
    	background:#FFF;
    	width:350px;
    }
    
    
    .contact ul
    {
    	margin:10px 0px 0px 0px;
    	padding:0px;
    }
    
    
    .contact li
    {
    	display:block;
    	list-style-type:none;
    	background-color:#00F;
    	margin-bottom:1px;
    	width:350px;
    	color:#FFF;
    	padding:5px 0px;
    }
    
    /* -----------------------------------
    portfolio box
    ----------------------------------- */
    .portfolio
    {
    	background:#3F6;
    	float:left;
    	margin:10px 0px 0px 0px;
    	padding:0px 0px;
    	
    }
    /* -----------------------------------
    services box
    ----------------------------------- */
    
    .services
    {
    	background:#F3C;
    	float:left;
    	margin:10px auto;
    	padding:0px 0px;
    	width:350px;
    }
    
    body 
    {	
    	margin: 0;
    	padding: 0;
    	color: .000;
    	background:#333;
    	font-family: adventBold1;
    	
    }
    h1, h2, h3, h4, h5, h6 { }
    h1 { }
    h2 { }
    h3 { }
    h4 { float:left;}
    h5 { }
    h6 { }
    p { }
    a:link { }
    a:visited { }
    a:focus { }
    a:hover { }
    a:active { }
    .content ol { }
    .content ul { }
    .content li { }
    .content ul li { }
    hr 
    {
    	margin:5px 10px;
    	clear:both;
    }
    
    /* -----------------------------------
    layout
    ----------------------------------- */
    
    /* -----------------------------------
    header
    ----------------------------------- */
    .header
    {
    	background:#666;
    	width:100%;
    	float:left;
    }
    
    /* -----------------------------------
    search-form
    ----------------------------------- */
    
    
    /* -----------------------------------
    section-nav
    ----------------------------------- */
    .2nav
    {
    	
    }
    /* -----------------------------------
    footer
    ----------------------------------- */
    
    
    .footer
    {
    	clear:both;
    	padding:10px;
    	background-color:yellow;
    	width: 1000px;
    	margin:0 auto;
    	overflow:hidden;
    }
    /* -----------------------------------
    box
    ----------------------------------- */
    
    /* -----------------------------------
    accordian
    ----------------------------------- */
    
    
    
    
    
    
    
    
    
    
    
    
    /* -----------------------------------
    classes
    ----------------------------------- */
    Last edited by Paul O'B; Feb 29, 2012 at 18:52. Reason: code tags added

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Is the path to the font file correct?

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes i have checked that numerous times

    when i apply a font size it works- it makes the backup font larger.

    It is like it cant find the font but the path is correct

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The path you are using assumes that the fonts are found inside a folder called "Fonts" which resides inside the same folder that the css was called from.

    You said you had the font face working on a simple page so can we see that code?

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help ,

    the simple code i had working.

    im using to copy and paste the not working code into class by class to work backwards and find out what the problem is

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by minusten View Post
    Thanks for your help ,

    the simple code i had working.

    im using to copy and paste the not working code into class by class to work backwards and find out what the problem is

    Yes try removing code step by step until it starts working and then you should be able to pinpoint the problem. Also make sure you validate the code (html and css) to catch any silly typos.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    This might be a stupid question, but are you sure the directory is called "Fonts" and not "fonts"? *nix Servers are case sensitive, Windows are not. I know it's something obvious, but that one small detail is easily missed between working local and remote -- and can lead you down the path of testing all sorts of crazy "what's wrong" scenarios for naught. More than once I've sat there looking at the directory going "that's right..." -- when it wasn't. (really whoever thought case sensitivity in filenames was a good idea needs a nice smack upside the head).

    Also, get a fallback stack on that font declaration -- you can't guarantee your webfonts will work everywhere or not be blocked, so fallbacks are still needed.


Bookmarks

Posting Permissions

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