The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Can you see if @font-face is working? (8 posts)

  1. echofestival
    Posted 4 years ago #

    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;

  2. cubecolour
    Posted 4 years ago #

    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.

  3. echofestival
    Posted 4 years ago #

    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

  4. echofestival
    Posted 4 years ago #

    Does anyone know a way around this??

  5. jayeshomg
    Posted 4 years ago #

    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.

  6. echofestival
    Posted 4 years ago #

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

  7. Gary Darling
    Posted 4 years ago #

    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...

  8. echofestival
    Posted 4 years ago #

    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??

Topic Closed

This topic has been closed to new replies.

About this Topic