WordPress.org

Forums

Right Font-face url (6 posts)

  1. johnnyRing
    Member
    Posted 2 years ago #

    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

  2. esmi
    Forum Moderator
    Posted 2 years ago #

  3. johnnyRing
    Member
    Posted 2 years ago #

    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?

  4. johnnyRing
    Member
    Posted 2 years ago #

    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

  5. esmi
    Forum Moderator
    Posted 2 years ago #

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

  6. johnnyRing
    Member
    Posted 2 years ago #

    css.style is in Flexibile directory.
    Thanks a lot

Topic Closed

This topic has been closed to new replies.

About this Topic