Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #254266

    I’ve reviewed all the @font-face threads in these forums…

    And still not getting the same ‘QuattrocentoSans’ font on my version of the site to display on other computers (tested multiple browsers).

    The code I have in custom.css is:

    @font-face {
    font-family: ‘QuattrocentoSans’;
    src: url(‘fonts/quattrocentosans-regular-webfont-webfont.eot’);
    src: local(‘‚ò∫’),
    src: url(‘fonts/quattrocentosans-regular-webfont-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘fonts/quattrocentosans-regular-webfont-webfont.woff’) format(‘woff’),
    url(‘fonts/quattrocentosans-regular-webfont-webfont.ttf’) format(‘truetype’),
    url(‘fonts/quattrocentosans-regular-webfont-webfont.svg#quattrocento_sansregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;


    body {
    color: #521005 !important;
    font-family: ‘QuattrocentoSans’ !important;
    font-size: 13.37px !important;
    font-style: normal !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    line-height: 1.4em !important;
    word-spacing: 0 !important;

    .cufon_headings {
    font-family: ‘QuattrocentoSans’ !important;
    font-size: 16.37px;

    I had my ‘fonts’ folder in my site root, but shifted to my flashlight/css/fonts folder for it to pick up. Still nada.

    Site looks great in Quattrocento Sans on my Mac, dreadful with Times on my gallery partner’s Windows…


    davestewart’s tip did not work from this thread either…

    Anything wrong with my code? Better place to locate font files and css? Seems like it should work. Hours over days trying, and researching, and … and…



    Hi Michael!

    Thank you for visiting the support forum.

    Make sure that the file names are correct and are located on css > fonts folder. Use this:

    @font-face {
    font-family: 'QuattrocentoSans';
    src: url('fonts/quattrocentosans-regular-webfont-webfont.eot');
    src: local('‚ò∫'),
    src: url('fonts/quattrocentosans-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/quattrocentosans-regular-webfont-webfont.woff') format('woff'),
         url('fonts/quattrocentosans-regular-webfont-webfont.ttf') format('truetype'),
         url('fonts/quattrocentosans-regular-webfont-webfont.svg#quattrocento_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

    Do you mind if we take a look at the actual website where you installed the custom font?



    Thanks for the response, Ismaei.

    I believe our code is the same (but copied yours over to our custom css just to be sure). Also ‘fonts’ folder is in the same css folder for the flashlight theme. Placed a copy of the folder in ‘flashlight’ root as well just to be xtra safe.

    The site is

    If you or others can review, appreciated. Hope to migrate the site to live from dev later today (here in Bali), once fonts are properly displaying.

    Appreciate the help. Tried so many things – unnecessary – when it appears the code was already correct. Not sure why has not displayed on other machines yet.


    p.s. Is it possible to apply the ‘!important’ tag to @font-face?
    I’ve found some css elements in custom.css, and QuckCSS in theme options did not apply live til this was applied.


    Well, there has been some progress… unfortunately in the wrong direction…

    Now site – – on my Mac displaying Times also, not Quattrocento Sans. Hopefully, when this is fixed, will apply to all. Purging cache at CloudFlare helped refresh.

    But anyone who can help asap with getting this @font-face declaration to display so appreciated!

    Appears code and location of fonts on site are all correct.



    Your syntax is just incorrect for where you are trying to access the font files from. You can test this by just trying to go to where the url value is.


    The url should be exactly where the file is located. You have it wrapped inside ‘ ‘ which should be wrapping the entire address. For example:
    url('/wp-content/themes/flashlight/framework/fonts/quattrocentosans-regular-webfont.woff') format('woff'),

    Best regards,


    Thank you so much, Devin!

    Figured it’s syntax; as font files are there. I’ve visited and checked that site when I was researching and trying to troubleshoot. Seems that I was preserving the syntax from font squirrel when I made the kit and there was a ‘ before the font name. Remedied that.

    See you found where the files are on my server too, moved them as experimented more. Thanks for looking in and checking all.

    Implemented to custom.css as you indicated. My partner’s computer however is still showing a font like Times. Cleared caches, and will clear CloudFlare too now, just in case.

    Can you take a look there to see if the proper font is appearing in your browser? (This is if you don’t have Quattrocento Sans already installed on you computer.)

    Thanks much!


    Yes, it looks like its loading in correctly now for me as well. I don’t have it on my computer so its loading in from your site.


    Thanks. Great news!

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘@Font-face not displaying’ is closed to new replies.