• Resolved seeurope

    (@seeurope)


    I’m using this method to get CSS3 border-radius under IE7/IE8: https://css3pie.com/documentation/getting-started/

    Although I’m specifying the path to the .htc file correctly, as evident from the fact my included font files are being loaded, no CSS3 border-radius is applied when viewing the site under IE7/IE8.

    Before testing, I have disabled all CSS3 support-adding plugins and cleared IE’s cache. The same .htc file works perfectly when using it in a static html file, not wordpress.
    My wp site: https://eventinvestment.eu/

    Please help.

Viewing 7 replies - 16 through 22 (of 22 total)
  • Thread Starter seeurope

    (@seeurope)

    I added the clause which uses RobotoCondensed as font-family on a couple of more places of style (both in style.css at the bottom and in ie.css at the bottom), and now it appears in Firebug Lite, but it’s still not being used on the screen.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    font is simply not shown in firebug. Instead, the default line from style css is applied:

    Possibly you have some invalid markup or CSS.
    Check the validity of your markup: https://validator.w3.org
    Check the validity of your CSS: https://jigsaw.w3.org/css-validator/

    Thread Starter seeurope

    (@seeurope)

    After a long series of trial and error I found out the reason IE9 was displaying the font in some places and not in others. It seems when I use an embedded font I shouldn’t use the keyword “normal” for font-weight when using the shorthand “font:” property. So:

    font: 15px 'RobotoCondensed' !important; works, and
    font: 15px normal 'RobotoCondensed' !important; doesn’t

    Of course this only applies to IE, normal browsers don’t care about the keyword.

    Thread Starter seeurope

    (@seeurope)

    Here you can confirm that the font declaration is being read, and the font is still not being applied on screen when in IE8 mode: https://eventinvestment.eu/wp-content/themes/eventinvestment/fonts-test/screen01.jpg

    This one really has me confused.

    Thread Starter seeurope

    (@seeurope)

    Fixed, by myself ??

    I googled “@font-face ie8 not working” and reached this page at stackoverflow: https://stackoverflow.com/questions/7582401/css-font-face-not-working-in-ie8

    I saw the solution and suspected the font wasn’t working because the second line in its code (the one about the .eot) was missing from my code. Added “src: url(‘fonts/RobotoCondensed-Light.eot’);” so my font-face clause is looking like this:

    @font-face {
        font-family: 'RobotoCondensed';
        src: url('fonts/RobotoCondensed-Light.eot');
        src: url('fonts/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'),
             url('fonts/RobotoCondensed-Light.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    Now the font displays under IE8 mode and even under IE7 mode.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Really good work!
    Possibly in the future you may want to use a font-face generator like FontSquirrel’s to generate the different browser hacks too ??

    Thread Starter seeurope

    (@seeurope)

    I was using that (last week we had a 40-post topic about it: https://www.ads-software.com/support/topic/fonts-included-with-font-face-are-not-rendered/page/2?replies=44#post-4045532) until I found out that fontsquirrel strips my font files of their Cyrillic glyphs. After a couple of days of wondering if my font files weren’t loading, finding that they are, but the glyphs aren’t there and I get my font right only in Latin script was quite a revelation. ??

    I removed the woff and svg lines from my font-face declaration but I don’t know why I removed the first .eot declaration as well. ??

Viewing 7 replies - 16 through 22 (of 22 total)
  • The topic ‘Using PIE.htc for IE CSS3 Support doesn't work’ is closed to new replies.