seeurope

I’m sure I could do it if I had access to phpmyadmin, but that’s not the case unfortunately ?? Thanks for the quick reply though, I just wanted to be sure there isn’t some way to do that with the plugin which I can’t find in the interface.

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

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.

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.

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.

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.

Checking with firebug lite (just under IE8 for now) revealed interesting results – the css clause that says the upper menu (which I inspected) should use the imported font is simply not shown in firebug. Instead, the default line from style css is applied:

body.custom-font-enabled {
  font-family:Verdana, "Open Sans", Helvetica, Arial, sans-serif;
}

This is different than what IE’s code inspector showed. It showed RobotoCondensed is being applied.

No elements have working fonts in IE7/8. Only some do, only in IE9. I’ll try out Firebug Lite.

If the address is wrong how come the same font files load under IE9? Doesn’t hurt to try anyway.

My only active plugin is “IE CSS3 Support”. Confirmed the font works under these browsers, by checking fontsquirrel’s demo page. (https://eventinvestment.eu/wp-content/themes/eventinvestment/fonts-test/robotocondensed-regular-demo.html) Which gives me the idea to test the site under IE7/8 with latin symbols instead of Cyrillic.

Edit: I checked with latin symbols. The font still isn’t used under IE7/IE8

Just did. The font is visible under said versions of IE when viewed in Google Web Fonts.

Here is the font-face clause:

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

I’ve used caniuse.com to verify which versions of IE need which formats and .eot seems to be fine with versions 7-9.

After browsing around, I think it’s ok but I meet with another problem now – IE7/IE8 won’t load my imported font. In IE9 mode the font is displayed fine, although only in the upper menu, not in the footer menu where It’s also supposed to be used.

Hi Andrew,

I’ve already tried this plugn, per your suggestion a week ago ??

It seems to work on first glance, but after I switch back to IE9 Browser mode, after testing in IE7 or IE8 browser mode, and then go back to IE7/IE8 its effects are not applied until I clear my cache (simply pressing shift+refresh doesn’t work) and load the page in IE7/IE8 mode again. The whole sequence looks like this:

1. Pres F12 on the keyboard to bring up IE’s code inspector.
2. Select “Browser Mode: IE7” or “IE8”
3. Cleare IE9’s cache
4. Open the site. It loads with border-radius applied.
5. Change to “Browser Mode: IE9” or “IE9 Compatibility View”, doesn’t matter which.
6. Change back to IE7 or IE8. Result: no border-radius until you clear your cache and repeat from Step 1.

I admit the average user wouldn’t go switching between modes like I do when testing, but I’m not completely sure that’s the only way to disable the plugin’s effects.

I’ll try browsing around the site after I’ve gotten it to run with CSS3 enabled under IE7/IE8 mode and see if it breaks after some page loads.

Exactly, same source file, converted at a different place. I downloaded the font from google, which I knew has Cyrillic glyphs in it (https://www.google.com/fonts/#ReviewPlace:refine/Collection:Roboto+Condensed:300italic,400italic,700italic,400,300,700), the 160kb version.

RobotoCondensed-Light.ttf is what I got from google and the same I’m using on my server. RobotoCondensed-Light.eot is what I got from the convertor. The four files from fontsquirrel are what’s generated from the original .ttf.

If you convert RobotoCondensed-Light.ttf (you can try it out by downloading my .ttf or take the same file from google) in fontsquirrel, you will get a .zip file with four files, all of them stripped of non-latin glyphs. But if you go to this other converted I pointed to, the resulting .eot file is 150-something kb big and Cyrillic glyphs are being rendered.

The following is to help other people having the same issue in the future:

1. I’ve used “Can I use” (https://caniuse.com/#search=eot) to ascertain that IE needs .eot and all other major browsers in their current versions support .ttf (which rules out the need to use the .svg and .woff versions that come with fontsquirrel’s converted fonts)

2. I’ve taken the ttf that had cyrillic glyphs (the 160kb) and converted it to .eot using this converter: https://www.kirsle.net/wizards/ttf2eot.cgi

3. I’ve used the following css in my styles.css to include the fonts:

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

4. Now I can use Roboto Condensed in Cyrillic on my site by loading it locally from my server. This ensures that IE (7,8,9) will also display it. IE has the habit of not rendering Google Web fonts embedded with a <link /> element in the <head> section.

Thanks, Andrew! I wouldn’t have reached the solution without your help ??