WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Fonts included with @font-face are not rendered (44 posts)

  1. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try loading some other font files through font face.

  2. seeurope
    Member
    Posted 1 year ago #

    I've already tried that before looking for support, and that's the second reason I don't think the problem is with the font files.

    The first reason is that you can see the same font files in action here (http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts-test/robotocondensed-regular-demo.html), in fontsquirrel's demo page. Everything is the same. If this is an issue with the paths to the font files, I don't understand how can an absolute path not work in WordPress.

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    Look at this CSSDesk page
    http://cssdesk.com/KEeHn

    Your font is actually working because if you remove it, it reverts to comic sans.

    Perhaps roboto doesn't support your language as you expect it?

  4. seeurope
    Member
    Posted 1 year ago #

    1. When I open your link I don't see it working:
    http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts-test/screen.jpg

    2. If the problem was with the font lacking cyrillic glyphs, typing anything in latin script in CSSDesk would have employed the font, and it doesn't.

    I will attempt to download that version of this font which comes from Google's Web Fonts and replace the font files on my server. That's because when I use:

    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400italic,700italic,400,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css' />

    I do get cyrillic text in this font although not for any version of IE. (But by now I know IE has problems when the font is linked with a link element so that could be the reason for that).

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    You see it working in Chrome, right?
    I've concluded that it works in Chrome (latest).

  6. seeurope
    Member
    Posted 1 year ago #

    No I don't see it working anywhere when added with @font-face. It does work in all but IE(all versions) when I add it with this line: <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400italic,700italic,400,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css' /> in my header.php

    I've just downloaded (from google) the same ttf that works (in all but IE(all versions)) when added with the <link /> element and replaced the ttf on my server with it. The font still does not render in any browser, regardless of any combination of there being/not being a space between "Roboto" and "Condensed". I am becoming convinced the issue lays with me using absolute paths to the font files.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Sorry, I can't experience the issue.

    This is the original font from the font's demo:
    http://snag.gy/whRgI.jpg

    This is CSSDesk:
    http://snag.gy/Falyf.jpg

    I can't help because I can't experience the issue.

  8. seeurope
    Member
    Posted 1 year ago #

    I see you've been helping on a similar problem in the past here: http://wordpress.org/support/topic/font-face-not-working?replies=11 Could we copy the same file structure and see if this changes anything?

  9. seeurope
    Member
    Posted 1 year ago #

    Thanks for that last post, it gave me an explanation of where our misunderstanding is. Apparently Fontsquirrel cuts out the cyrillic glyphs after the font is converted. The font doesn't normally look like that, as you can see if you compare this (pick cyrillic if it's not selected): http://www.google.com/fonts/#ReviewPlace:refine/Collection:Roboto+Condensed:300italic,400italic,700italic,400,300,700

    with the font shown in your first screenshot.

    Further, I changed "Новини" to "News" in my site, just for experimentation, and here is the result: http://eventinvestment.eu/home/ Obviously the font is used only for latin characters.

    I also noticed that the original ttf I have was about 160 kb big compared to about 42 kb coming in fontsquirrel's zip archive.

    Anyway, the font is definetly loading with @font-face and I'll have to look for a way to convert it to at least .eot while preserving the cyrillic glyphs.

  10. seeurope
    Member
    Posted 1 year ago #

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

    1. I've used "Can I use" (http://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: http://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('http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts/RobotoCondensed-Light.eot');
        src: url('http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'),
             url('http://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 :)

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    Good work! I still feel pretty useless.
    Thanks for sharing the solution though. Appreciated.

  12. paulwpxp
    Font hero
    Posted 1 year ago #

    @seeurope

    Congratulations !

    I hope you don't mind sharing. I was wondering if I got it right here, are the final fonts the same fonts originally used but converted with the converter in step 2 ?

    Are these (the original font used)

    robotocondensed-regular-webfont.eot
    robotocondensed-regular-webfont.ttf

    and these (the final font used)

    RobotoCondensed-Light.eot
    RobotoCondensed-Light.ttf

    the same source but converted or different source ?

  13. seeurope
    Member
    Posted 1 year ago #

    Exactly, same source file, converted at a different place. I downloaded the font from google, which I knew has Cyrillic glyphs in it (http://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.

  14. paulwpxp
    Font hero
    Posted 1 year ago #

    Thanks a lot, got it now, it's the 160k one.

Topic Closed

This topic has been closed to new replies.

About this Topic