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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I need help with @font-face: font won't load

    Problem: When my website initially loads, the @font-face doesn't work. As soon as you click any link to go to a different part of the website, it works fine, and you can go back home and the font is still working. I need it to load right when someone first enters my website. I'll give you my code and hopefully someone can identify the problem. Thank you!

    This is my CSS:
    Code:
    @font-face {
        font-family: 'LatinModernRoman10Regular';
        src: url('/fonts/lmroman10-regular-webfont.eot');
        src: url('/fonts/lmroman10-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('/fonts/lmroman10-regular-webfont.woff') format('woff'),
             url('/fonts/lmroman10-regular-webfont.ttf') format('truetype'),
             url('/fonts/lmroman10-regular-webfont.svg#LatinModernRoman10Regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    I called this in my body:
    Code:
    body { font-size: 62.5%; 
    	   font-family: 'LatinModernRoman10Regular', Arial, sans-serif; 
    	   color: #000000;
    	   background: url("/images/bg.png") no-repeat top center #FFFFFF; }
    The font file is located in the fonts folder and the css is in the css folder. If anyone can help that would be great! Just let me know if you need anymore information. Thanks again!

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    339
    Thanks
    3
    Thanked 35 Times in 35 Posts
    In which browser does this happen and which other browsers did you check? Also, do you have matters online already? If not and not possible to put it online, please give the whole head part code, the whole code until </head> .
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My website is www.transcendwebdesign.com

    It doesn't work in firefox or internet explorer, but it works in google chrome.

    My head code linking to stylesheet, I think this is the only part that would matter. I know my stylesheet is linking to my website.
    Code:
    <head>
    <link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
    </head>

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    85
    Thanks
    15
    Thanked 5 Times in 5 Posts
    I'm glad you've posted this question-- I've had issues with @font-face in the past, too, but never been able to make it work quite right. Either it'll display on IE and Firefox, but not Chrome, or Chrome but not IE or Firefox.

    The best resouce I found was http://www.fontsquirrel.com/blog/201...-face-problems, but even that couldn't fix all my problems. Here's hoping it works a bit better for you.

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    339
    Thanks
    3
    Thanked 35 Times in 35 Posts
    It clearly is a matter of either the order in which you put the head tags or a too long font file loading time, otherwise the fonts wouldn't be displayed at all.

    Could you try, since you have a lot of font files that you are loading, to take or comment out all other font files except the LatinModernRoman10Regular and see what happens? If that doesn't cure, see if putting the style sheet link tag directly after the title and the charset tag solves it.

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I commented out all of the @font-face declarations besides the LatinModernRoman10Regular and it still doesn't load until I click to a different part of my website. Also, I added a google font to see if it would load automatically, and it does. That was a very good idea though, I thought it was going to work frankie...

    I'm just going to paste my head to make sure nothing is wrong:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>St. Louis Web Design - TranscendWebDesign &ndash; Professional Website Design Company</title>
    <meta name="alexaVerifyID" content="8gr9SAmxessYqzS9_w96h0HeHPU" />
    <meta name="author" content="Jordan Amman" />
    <meta name="description" content="Transcend Web Design a Leading St. Louis Web Design Company | Web Design, Web Development, Brand Identity, SEO, Internet Marketing and Much More."/>
    <meta name="keywords" content="TranscendWebDesign, St. Louis website design, website design services, website design company, web design, website development, web designers, web development, web design company, web developers, St. Louis web design, seo, search engine optimization, internet marketing, brand identity, web development, e-commerce, cms, content management systems, shopping cart, organic search engine optimization, search engine marketing, pay per click, social media optimization, web 2.0 strategies. "/>
    <base href="http://www.transcendwebdesign.com"/>
    <link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
    <link href="/favicon.ico" rel="SHORTCUT ICON">
    <title>TranscendWebDesign</title>
    
    <script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="/js/jquery.pictureMenu.js"></script>
    <script type="text/javascript" src="/js/transcendwebdesign.js"></script>
    
    </head>
    Doug, I'll look at that link provided and see if I can figure anything out. For some reason it doesn't load until I click to a different page... I wonder if it isn't finding the font files for some reason until I click to a different page? No idea... Thanks again guys for trying to help, I really appreciate it. : )

  • #7
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I delete all other backup fonts in my css, it works on load. This definitely isn't the solution because doing this allows me to have no back-up fonts, so I would have no idea what font is chosen if my @font-face doesn't load.

    For example, this is my normal css:
    Code:
    body { font-size: 62.5%; 
    	   font-family: "LatinModernRoman10Regular", Arial, sans-serif; 
    	   color: #000000;
    	   background: url("/images/bg.png") no-repeat top center #FFFFFF; }
    And if I change it to:
    Code:
    body { font-size: 62.5%; 
    	   font-family: "LatinModernRoman10Regular"; 
    	   color: #000000;
    	   background: url("/images/bg.png") no-repeat top center #FFFFFF; }
    It suddenly works on load for me. hmm.... Idk... this is confusing and makes no sense.

    Also, if I change my css to font: instead on font-family: it suddenly works onload. I feel like this might be a fix, but seems more like a hack. I'm not sure...
    Last edited by TranscendWeb; 12-10-2011 at 03:04 AM.

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    339
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Also, if I change my css to font: instead on font-family: it suddenly works onload. I feel like this might be a fix, but seems more like a hack. I'm not sure...
    That is perfectly valid CSS, so it's not a hack. I've seen similar behavior with background (shorthand works perfectly, per-property declarations give buggy results), without me knowing the mechanism behind it.

    Could you put this in place and let us know what happens:
    Code:
    body { 
        font: normal 62.5% "LatinModernRoman10Regular", Arial, sans-serif; 
        color: #000000;
        background: url("/images/bg.png") no-repeat top center #FFFFFF; 
    }
    ?

    Or did you already do that?

  • #9
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, I changed it to font: and it works onload in firefox, ie, and chrome... Sounds good to me, thanks a lot for helping guys. : )


  •  

    Tags for this Thread

    Posting Permissions

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