alternative for WP dashboard pages webfont?

  • henkvansetten · Member ·

    I’ve got questions about the webfont that WordPress.com uses to render icons (nav icons, mostly) in its dashboard pages.

    I know that more sites are beginning to do this (using special webfont characters instead of proper image-icons) and personally I think this is a bad and not very smart trend. Fonts should be used for fonts, and icons for icons, if you ask me.

    Well, anyway, in my own browsers I disabled the auto-download of webfonts for several reasons: rendering speed, privacy, and security. Not to mention esthetics, in a few cases ;-)

    In general, the present webfont implementation has enough holes to be defined as basically insecure. There is enough online info to document this. I know a few other users who have disabled webfonts for the same reasons.

    OK, the problem here is of course that when you disable webfonts, nav icons in the WP dashboard page are no longer rendered properly — because they’re not real icons but webfont characters.

    And no, I will not simply enable webfonts in my browsers. If I could allow them for the wordpress.com domain only I would be willing to do so, but unfortunately there is no easy way to enable webfonts selectively on a per-domain basis. One possible way to do so would be using NoScript Firefox extension (it can whitelist domains for webfonts) but installing that extension for this reason only would be like carrying around a sledgehammer to swat flies…

    So, long story short, here are my questions:

    (1) Would WordPress be willing to abandon these silly webfont-based icons and go back to using proper icons? If you’re not willing to use proper icons, could you please explain to me why not, other than these webfont-based pseudo-icons being a designer fad?

    (2) If you are clinging with all hour heart to webfont-based icons, then what can I do to make the WP dashboard page render properly without allowing webfonts all over the web?

    For example, as a stopgap solution, would it be possible to permanently install the WordPress “icon font” as a TTF in the Windows font directory? If so, I’d like to get some instructions for how to do this.

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • timethief · Member ·

    I tagged this thread for a Staff response. Please subscribe to it so you are notified when they respond. Note there is a backlog so you will have to wait patiently for Staff help.
    To subscribe:
    1. Look in the sidebar of this thread and find the subscribe to topics link.
    2. Look below the comment box:
    _ Notify me of followup posts via e-mail

  • henkvansetten · Member ·

    @timethief: Thanks for you attention.

    I know it’s not a major issue but I (and probably a few other users as well) would be happy to find a way to solve this little problem in an effective way, without having to allow webfonts for all webpages we open in our browser.

  • jeremeylduvall · Member ·

    Hi @henkvansetten,

    Please see below:

    Would WordPress be willing to abandon these silly webfont-based icons and go back to using proper icons? If you’re not willing to use proper icons, could you please explain to me why not, other than these webfont-based pseudo-icons being a designer fad?

    We’re going to be sticking with icon fonts for the foreseeable future as we wait for SVG support to improve. The reason for moving to icon fonts was two-fold:

    1. The load faster than image-based fonts
    2. They’re supported in old browsers

    Icon fonts occasionally throw an insecure warning when you try to load Google fonts from an https site, but only as a warning.

    If you are clinging with all hour heart to webfont-based icons, then what can I do to make the WP dashboard page render properly without allowing webfonts all over the web?

    Unfortunately, we don’t have a method right now outside of enabling icon fonts all over the web. If you figure out a way, please do drop it here for future resource!

  • henkvansetten · Member ·

    Thanks for reacting, Jeremy.

    Can you please tell me how I can separately download the WordPress.com icon font? Or how (when I temporarily re-enable webfonts) to find it in my browser cache ?

    Once I’ve found out its url path/name, I can do some little experiments (converting it from WOFF to TTF if necessary) to see if and how auto-downloads of your webfont can be circumvented by putting a permanent font in its place.

    Thank you for any info that can help me to identify the font file(s).

  • henkvansetten · Member ·

    SOLUTION FOR THIS PROBLEM

    The problem can indeed be solved by locally installing the TTF version of the WordPress Noticon font .

    For people who want to download the needed font, I put a ZIP file online with the font files and a readme file. Download link: Noticons.zip.

    Let me include the readme here, too:

    ============ EXPLANATION ===========

    NOTE: this is for wordpress.COM users, not wordpress.ORG users (though it may work for them too).

    ====================================

    This zip file has the WordPress “noticon” font. This font contains glyphs like the small arrows or magnifying glass symbols, as used in the Dashboard pages for your WordPress.com blog.

    The WOFF file is what your browser will auto-download from the WordPress servers when “web fonts” (aka “downloadable fonts”) are allowed in your browser. I included this file here just for completeness.

    The included TTF file is what you may need if for security or speedup reasons you prefer to disable webfonts in your browser.

    How to disable the on-the-fly use of downloadable web fonts in your browser?

    Firefox option: open about:config, and set gfx.downloadable_fonts.enabled to false.
    Chrome option 1: right-click your Chrome shortcut, then in the context menu select Properties, and add the string –disable-remote-fonts (preceded by a space) at the end of the target or command line.
    Chrome option 2: install the Disable Web Fonts extension for Chrome (link: Disable Web Fonts).

    Problem was, once you disabled webfonts you cannot re-allow them just for a few specific sites: there is no whitelist feature. Web fonts for text will simply be replaced by your standard browser-set text font, but in this icon font case, your WordPress Dashboard pages will show up without those little navigation icons.

    Solution: extract the Noticon.ttf file from this zip and install it as a regular font in your system. In Windows, just right-click the Noticon.ttf file to show the context menu and click Install.

    Now, while you won’t allow the use of webfonts all over, when opening a WordPress Dashboard page your browser will automatically use this installed Noticon font and render the page correctly, with the right icons.

    Tested and found working OK with Firefox 32.0.3 on Windows 8.1 x64, October 11 2014.

    ====================================

  • henkvansetten · Member ·

    UPDATE:

    Sadly, my above solution is not adequate. It appeared to work initially, probably just because the noticons font was still cached or something like that.

    So now it looks like in addition of installing the font locally, we also need some usercontent.css file to override the default css for the wordpress.com domain (forcing it to use the local noticons.ttf where icons are needed).

    I will keep tinkering, and get back here as soon as I have found a solution that really works.

  • jeremeylduvall · Member ·

    Hi Henk,

    Thanks for keeping this thread updated! It looks like you were able to find the icons you were looking for. The Noticons we use are found here:

    https://wordpress.com/i/noticons/example.html

    The downloadable format (called Genericons) can be found here:

    http://genericons.com/

  • henkvansetten · Member ·

    Jeremey, thanks for trying to help.

    Right now, I’m giving up: I just cannot get the locally installed genericons font to work.

    I’ve read that when using web fonts, sites are supposed to put a proper fallback code in their CSS files. This fallback code should cause the browser to look for a locally installed version of the indicated web font first, and download the web font only when it’s not been installed locally.

    Could it be that something is wrong with the way this is implemented in the code for WordPress.com dashboard pages?

  • jeremeylduvall · Member ·

    Hi Henk,

    Just wanted to let you know that I’m checking with our designers just to be sure, but I don’t expect that there’s a fallback code in place as we don’t expect our users to have specialized fonts installed locally.

  • The topic ‘alternative for WP dashboard pages webfont?’ is closed to new replies.