Support » Themes and Templates » Right Font-face url

  • Hi,
    I’m trying to change my web font family by using font face method (http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/).
    I must confess that I wasn’t able to write the right lines code to adding to css style for getting the result that I want.
    I’ve tried in this way:

    @font-face {
        font-family: 'alegreya_scregular';
        src: "http://b5srl.eu/wp-content/themes/Flexibile/fonts/alegreya/alegreyasc-regular-webfont.eot";
        src: "http://b5srl.eu/wp-content/theme/flexibile/fonts/alegreya/alegreyasc-regular-webfont.eot?#iefix" format('embedded-opentype'),
             "http://b5srl.eu/wp-content/theme/flexibile/fonts/alegreya/alegreyasc-regular-webfont.woff" format('woff')",
             "http://b5srl.eu/wp-content/theme/flexibile/fonts/alegreya/alegreyasc-regular-webfont.ttf" format('truetype')",
             "http://b5srl.eu/wp-content/theme/flexibile/fonts/alegreya/alegreyasc-regular-webfont.svg#alegreya_scregular" format('svg')";
        font-weight: normal;
        font-style: normal;
    
    }

    In this other

    @font-face {
        font-family: 'alegreya_scregular';
        src: http://b5srl.eu/wp-content/theme/flexibile/fonts/alegreya/('alegreyasc-regular-webfont.eot');
        src: http://b5srl.eu/wp-content/theme/flexibile/fonts/alegreya/('alegreyasc-regular-webfont.eot?#iefix') format('embedded-opentype'),
             http://b5srl.eu/wp-content/theme/flexibile/fonts/alegreya/('alegreyasc-regular-webfont.woff') format('woff'),
             http://b5srl.eu/wp-content/theme/flexibile/fonts/alegreya/('alegreyasc-regular-webfont.ttf') format('truetype'),
             http://b5srl.eu/wp-content/theme/flexibile/fonts/alegreya/('alegreyasc-regular-webfont.svg#alegreya_scregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }

    and in many other without success.
    Someone could help me, please?
    Particularly I really appreciate someone who explain me my mistake.
    Thanks a lot

Viewing 5 replies - 1 through 5 (of 5 total)
  • esmi

    (@esmi)

    Forum Moderator

    Thank you,
    I know this tool, what I can’t get is the right url,
    that is which path I must substitute to url for giving eot, ttf, etc. files to the browsers and so changing my webfont family.
    Could you help me please?

    Hi, these should be the correct code lines:

    @font-face {
    font-family: 'architects_daughterregular';
    src: url('http://mysite.eu/wp-content/themes/flexibile/architectsdaughter-webfont.eot');
    src: url('http://mysite.eu/wp-content/themes/flexibile/architectsdaughter-webfont.eot?#iefix') format('embedded-opentype'),
    url('http://mysite.eu/wp-content/themes/flexibile/architectsdaughter-webfont.woff') format('woff'),
    url('http://mysite.eu/wp-content/themes/flexibile/architectsdaughter-webfont.ttf') format('truetype'),
    url('http://mysite.eu/wp-content/themes/flexibile/architectsdaughter-webfont.svg#architects_daughterregular') format('svg');
    font-weight: normal;
    font-style: normal;
    
    }

    as eot, ttf, etc files are in
    flexibile
    directory.

    These ones too

    @font-face {
    font-family: 'alegreya_scregular';
    src: url('http://mysite.eu/wp-content/themes/flexibile/fonts/alegreya/alegreyasc-regular-webfont.eot');
    src: url('http://mysite.eu/wp-content/themes/flexibile/fonts/alegreya/alegreyasc-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('http://mysite.eu/wp-content/themes/flexibile/fonts/alegreya/alegreyasc-regular-webfont.woff') format('woff'),
    url('http://mysite.eu/wp-content/themes/flexibile/fonts/alegreya/alegreyasc-regular-webfont.ttf') format('truetype'),
    url('http://mysite.eu/wp-content/themes/flexibile/fonts/alegreya/alegreyasc-regular-webfont.svg#alegreya_scregular') format('svg');
    font-weight: normal;
    font-style: normal;
    
    }

    considered that I’ve created
    fonts
    directory and
    alegreya
    subdirectory.
    Both of them don’t work at all.
    I’d glad top know your opinion about this.
    Thank you

    esmi

    (@esmi)

    Forum Moderator

    Where are the font files located in relation to the .css file?

    css.style is in Flexibile directory.
    Thanks a lot

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Right Font-face url’ is closed to new replies.