Troubleshooting webfont loading

Discussion in 'Templates customization' started by johnreeve, Feb 23, 2013.

  1. johnreeve

    johnreeve New Member

    Joined:
    Dec 30, 2012
    Messages:
    5
    I am writing a custom aMember theme, taking a functioning html/css/js template that I wrote and applying it to aMember. On my setup, my original theme is working well, and I have figured out the correct ways to add js/css to the rendered template.

    Currently the site is running on localhost and functioning well.

    However, I have a font-face declaration in my main css file. The CSS file serves up okay, and if I go to the public directory, I can access the file via my browser. However the fonts are not loaded or rendered by the browser.

    Here is my font-face (that is currently working as expected in the original template but not in the aMember template):

    Code:
    @font-face {
        font-family: 'GothamCondensed-Medium';
        src: url('./fonts/cpeggcm.eot');
        src: url('./fonts/cpeggcm.eot?#iefix') format('embedded-opentype'),
                url('./fonts/cpeggcm.woff') format('woff'),
                url('./fonts/cpeggcm.ttf') format('truetype'),
                url('./fonts/cpeggcm.svg#cpeggcm') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    In an effort to ensure that the .htaccess file was not preventing the files from loading, I created an .htaccess in the ./fonts directory:

    Code:
    # BEGIN REQUIRED FOR WEBFONTS
     
    AddType font/ttf .ttf
    AddType font/eot .eot
    AddType font/otf .otf
    AddType font/woff .woff
     
    <FilesMatch "\.(ttf|otf|eot|woff)$">
        <IfModule mod_headers.c>
            Header set Access-Control-Allow-Origin "*"
        </IfModule>
    </FilesMatch>
     
    # END REQUIRED FOR WEBFONTS
    
    Do you have any ideas about why these fonts are not being loaded/rendered by the browser?
  2. alexander

    alexander Administrator Staff Member

    Joined:
    Jan 8, 2003
    Messages:
    6,274
    Try to open your site in the Chrome then press F12 key on keyboard and open Network tab. Check how your font files are being loaded.
    Make sure that each file full uRL which is calculated by Chrome is correct and generate normal 200 response.
    If you have your font files inside aMember folder you may need to modify .htaccess file and add font files extensions to this line:
    RewriteRule !\.(js|ico|gif|jpg|png|css|swf|csv|html)$ index.php
  3. rickydeez

    rickydeez aMember Pro Customer

    Joined:
    Aug 3, 2007
    Messages:
    19
    Here's what I had to change to the root htaccess file to get them working for me:

    Code:
    RewriteRule !\.(js|ico|gif|jpg|png|css|swf|csv|html|ttf|woff|eot|wd3)$ index.php
    johnreeve likes this.
  4. johnreeve

    johnreeve New Member

    Joined:
    Dec 30, 2012
    Messages:
    5
    Thanks-- that solved it for me!

Share This Page