Font-face and web fonts issue

  • 007me

    #7892

    Hi,

    I’ve implemented font-face with web fonts in the Custom CSS field in my test blog here and it is working fine.

    http://www.udiburg.com/blog2

    I’ve copied the Custom CSS to my main blog and from some reason it doesn’t apply the font-face.

    http://blog.udiburg.com

    What could be the problem?

    Udi

    Prasanna SP

    #39715

    Did you try adding !important to CSS rules?

    007me

    #39716

    In the beginning of every location?

    Prasanna SP

    #39717

    No, like this,

    .element {
    font-family: "something" !important;
    }

    007me

    #39718

    Did like this and didn’t work, see here, and it works with no issue on my test blog

    /* Adding webfonts */

    @font-face {
    font-family: 'Alef' !important;
    src: url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Bold.eot') !important;
    src: url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Bold.eot?#iefix') format('embedded-opentype'),
    url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Bold.woff') format('woff'),
    url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Bold.ttf') format('truetype'),
    url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Bold.svg#alefbold') format('svg') !important;
    font-weight: bold;
    font-style: normal;

    }

    @font-face {
    font-family: 'Alef' !important;
    src: url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Regular.eot') !important;
    src: url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Regular.eot?#iefix') format('embedded-opentype'),
    url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Regular.woff') format('woff'),
    url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Regular.ttf') format('truetype'),
    url('http://www.udiburg.com//blog3/wp-includes/fonts/Alef-Regular.svg#alefregular') format('svg') !important;
    font-weight: normal;
    font-style: normal;

    }
    /* End of webfonts */

    /* Where to use the webfonts */
    /* body {
    font:16px/1.1 "Alef", arial, sans-serif;
    }
    */
    html,h1,h2,h3,h4,h5,h6,b,strong,p,body,a,all {
    font-family:"Alef", arial, sans-serif;
    font-weight:normal;
    font-size:16px;
    }
    .sidebar h3 {
    font-family:"Alef", arial, sans-serif;
    font-weight:bold;
    font-size:18px;
    }

    .post-title, .post-title a {
    font-family:"Alef", arial, sans-serif;
    font-weight:bold;
    font-size:22px;
    }

    .commentform {
    font-family:"Alef", arial, sans-serif;
    font-weight:normal;
    font-size:12px;
    }

    .single .author_h4 {
    font-family:"Alef", arial, sans-serif;
    font-weight:bold;
    font-size:16px;
    color:#2E2E2E;
    }

    .bgimage-excerpt .slider_post h2 a {
    font-family:"Alef", arial, sans-serif;
    font-weight:bold;
    font-size:18px;
    }

    /* End of use webfont */

    007me

    #39719

    So… any solution?

    Mod

    Kenneth John Odle

    #39720

    !important declaration is in the wrong spot:

    html,h1,h2,h3,h4,h5,h6,b,strong,p,body,a,all {
    font-family:"Alef", arial, sans-serif !important;
    font-weight:normal;
    font-size:16px;
    }

    Put code in between backtick (

    Code:
    `

    ) characters. It’s usually located above the Tab key on your keyboard.

    007me

    #39721

    Oh… Ok 🙂 will check and will update.

    Thanks Kenneth.

    007me

    #39722
    Quote:
    !important declaration is in the wrong spot:

    html,h1,h2,h3,h4,h5,h6,b,strong,p,body,a,all {

    font-family:”Alef”, arial, sans-serif !important;

    font-weight:normal;

    font-size:16px;

    }

    Put code in between backtick (`) characters. It’s usually located above the Tab key on your keyboard.

    Do you mean to put th ewhole code between (`)? or just the !important code? Cause nothing work yet.

    Mod

    Kenneth John Odle

    #39723

    That only refers to posting here in the forum, not in your stylesheet.

    Including code between backticks prevents browsers from parsing the code. Not so important with CSS; much more so with HTML and PHP.

Viewing 10 posts - 1 through 10 (of 19 total)

You must be logged in to reply to this topic.