WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] @font-face not working (11 posts)

  1. sarahnphillips
    Member
    Posted 1 year ago #

    I am having troubles getting @font-face (pacifico) to work on my site. I have successfully installed font-face on several websites using the same method as I am using now. I am using the theme Atahualpa. The demo.html file is working, so I know that I am close.

    Here is the page I am working on: http://www.sarahnicolephillips.com/cv/

    The line "Click here to download a PDF version of cv" should appear in the curly pacifico font. Here's the html I've using to try to get the font to look curly:

    <span style="font-family: 'pacificoregular',terminal,monaco; color: #ccffff;">Click <a href="http://www.sarahnicolephillips.com/wp-content/uploads/2008/12/SarahNicolePhillips-CV-20120212.pdf" target="_blank">here</a> to download a PDF version of cv.</span>

    Troubleshooting I have tried:
    - I've looked at the site in various browsers (it doesn't work across browsers).
    - I've tinkered with the path and am pretty sure that's not the problem, as indicated by the fact that the demo.html file works.
    - I've tinkered with the permissions of the fonts folder.
    - Using cyberduck I've confirmed the location of the fonts folder and all it's contents are present.

    Below is the css code I've both uploaded to my fonts folder and placed in Atahualpa's CSS Inserts section.

    /* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 23, 2012 08:41:49 PM America/New_York */
    
    @font-face {
        font-family: 'pacificoregular';
        src: url('../fonts/Pacifico-webfont.eot');
        src: url('../fonts/Pacifico-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/Pacifico-webfont.woff') format('woff'),
             url('../fonts/Pacifico-webfont.ttf') format('truetype'),
             url('../fonts/Pacifico-webfont.svg#pacificoregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }

    Any thoughts?

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Could it be a plugin causing this problem?

  3. sarahnphillips
    Member
    Posted 1 year ago #

    I've pasted the @font-face code into my theme's CSS inserts section. Should it be in an other place?

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Try and move the @font-face code to the top of the CSS inserts section. At the moment it looks like your @font-face code is down the bottom, but I don't think this will solve the issue.

    Have you tried disabling plugins to check whether any are responsible?

  5. sarahnphillips
    Member
    Posted 1 year ago #

    I just tried your suggestion of moving the @font-face code to the top of the CSS inserts section and disabling all my plugins; neither strategy worked.

  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Google Chrome displays these errors

    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.sarahnicolephillips.com/fonts/Pacifico-webfont.woff
    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.sarahnicolephillips.com/fonts/Pacifico-webfont.ttf
    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.sarahnicolephillips.com/fonts/Pacifico-webfont.svg

    In which directory are the fonts?

  7. sarahnphillips
    Member
    Posted 1 year ago #

    The fonts are located in my wp-content/fonts. You can see that the demo file works:
    http://www.sarahnicolephillips.com/wp-content/fonts/demo.html

    When I inset the path below, I get a bunch of garbage (I don't know the lingo for what that stuff is called), but not a 404 message:
    http://www.sarahnicolephillips.com/wp-content/fonts/demo.html

  8. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Try using wp-content within the URL of the CSS.
    E.g

    /* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 23, 2012 08:41:49 PM America/New_York */
    
    @font-face {
        font-family: 'pacificoregular';
        src: url('/wp-content/fonts/Pacifico-webfont.eot');
        src: url('/wp-content/fonts/Pacifico-webfont.eot?#iefix') format('embedded-opentype'),
             url('/wp-content/fonts/Pacifico-webfont.woff') format('woff'),
             url('/wp-content/fonts/Pacifico-webfont.ttf') format('truetype'),
             url('/wp-content/fonts/Pacifico-webfont.svg#pacificoregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
  9. sarahnphillips
    Member
    Posted 1 year ago #

    Oh my goodness, that worked!

    I know that I had tried that path before without success...perhaps something else was wrong at that time?

    Thank you very much with your patience and persistence with this problem.

  10. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    You may not have had the forward slash at the start of the url.

  11. sarahnphillips
    Member
    Posted 1 year ago #

    I thought I had remembered that, but then again I was working at 2am so it is totally possible I missed a slash. Thanks again! I am going to mark this topic as resolved now.

Topic Closed

This topic has been closed to new replies.

About this Topic