WordPress.org

Support

Support » How-To and Troubleshooting » Can you see if @font-face is working?

Can you see if @font-face is working?

  • Hello there,

    My blog is http://www.echofestival.com and I am using the @font-face code in my css style sheet so that I can used the font Zag Bold. Various people have already told me that they cannot see the font, which I am using in all of my headers h1, h2, h3 and h4 – is the problem here? How I declare it?

    Could you tell me if it is visible? I am using firefox but some people cannot see it…

    The code I am using is

    @font-face {
    font-family: ‘ZagBoldRegular’;
    src: url(‘http://echofestival.com/fonts/zag_bold-webfont.eot’);
    src: url(‘http://echofestival.com/fonts/zag_bold-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘http://echofestival.com/fonts/zag_bold-webfont.woff’) format(‘woff’),
    url(‘http://echofestival.com/fonts/zag_bold-webfont.ttf’) format(‘truetype’),
    url(‘http://echofestival.com/fonts/zag_bold-webfont.svg#ZagBoldRegular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator cubecolour

    @numeeja

    The fonts appear as expected on firefox mac & opera with delayed rendering, but not safari or chrome

    I’ve never seen the @font-face declaration at the bottom of a stylesheet, I don’t know whether it makes a difference, but maybe you could try moving it to the top – that always works for me.

    Hi all,

    So this problem is still persisting.

    The theme which I have installed is this one: http://themeforest.net/item/bonsai-minimalist-wordpress-theme/238277

    My wordpress: http://www.echofestival.com

    Could you please tell me where exactley I should put the font-face code so it will load in Chrome and safari …

    Many thanks

    Does anyone know a way around this??

    In IE9 its working all good. But not on Chrome as mentioned above in second post.

    What you can do is try experimenting by placing the code, working out yourself is only the solution I can give you.

    The font-face code has now stopped working in Firefox!??

    I noticed you have a relative path of /zag_bold-regular... in your @font-face listing – are you missing the /fonts folder in that? You could also make it an absolute path, at least for testing purposes. http://echofestival.com/fonts/zag_bold-webfont...

    No I have changed that back to normal…

    The font literally came up, before it reverted back to arial??

    Would something be clashing with it??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Can you see if @font-face is working?’ is closed to new replies.