1

I've started using the dashicon fonts in my theme options page for WP 3.8+ users. To take care of users on < 3.8, I've added the dashicon fonts to my theme folder and also an entry at the top of my custom admin stylesheet:

@font-face {
    font-family: 'dashicons';
    src: url('fonts/dashicons.eot');
}

@font-face {
        font-family: 'dashicons';
        src: url(data:application/x-font-woff;charset=utf-8;base64,xxx) format('woff'),
        url('fonts/dashicons.ttf') format('truetype'),
        url('fonts/dashicons.svg#dashicons') format('svg');
    font-weight: normal;
    font-style: normal;
}

(I've left out the base64 encode for brevity)

This works great, however, I'm getting a bit of strange behavior with the fonts. When I leave the admin open in a tab and go away for a bit, then come back, every once in a while, the webfonts have turned to squares, as if the font is missing.

This does not happen every time. It appears to be somewhat random.

In those cases, simply doing a mouseover the page usually returns the webfonts to their proper symbols.

The screenshots below show the issue. The first screenshot is what I see when the problem occurs. The second screenshot is what I'm expecting to see when things go well.

Notice in the first shot, how the wordpress labels themselves have gone to a default serif font.

Here's what it looks like gone bad

Here's what it SHOULD look like

7
  • What browser(s) are you witnessing this in? I've seen this happen in Chrome quite often. And not just with dashicon fonts. It is somewhat common for admin-side fonts to flip back to something unusual until a bit of a screen refresh occurs (resizing browser for example, or hovering over items).
    – GhostToast
    Jan 27, 2014 at 21:20
  • Please clarify how this issue is WordPress-specific. As-written, it appears to be CSS/browswer-related, and not specific to WordPress. Jan 27, 2014 at 21:53
  • @GhostToast, I'm seeing it in Chrome Mac and PC. I haven't tested this in other browsers.
    – N2Mystic
    Jan 27, 2014 at 22:23
  • I've updated the question with screenshots of expected and actual. @Chip. I've never seen it happen outside of my WordPress admin.
    – N2Mystic
    Jan 27, 2014 at 22:26
  • @ChipBennett The underlying problem here is shipping files with a theme which require server configuration to run properly. This problem will stay for a long time with theme developers and will probably come up again.
    – fuxia
    Jan 27, 2014 at 22:30

2 Answers 2

4

This happens sometimes when the font is sent with a wrong MIME type. application/x-font-woff for example, is wrong. Try to add proper MIME types to your server configuration. In Apache, your can do that in a .htaccess:

AddType image/svg+xml                 .svg
AddType application/x-font-ttf        .ttf
AddType application/x-font-opentype   .otf
AddType application/vnd.ms-fontobject .eot
AddType application/font-woff         .woff

You should add instructions for your users to the theme, because a theme should not touch server configuration files.

8
  • @N2Mystic You have to change the data:application/x-font-woff to data:application/font-woff.
    – fuxia
    Jan 27, 2014 at 22:27
  • +1 I've changed the font type as suggestion. Testing to confirm problem does not recur.
    – N2Mystic
    Jan 27, 2014 at 22:33
  • see wp-includes/css/dashicons.css (that's where I got the application/x-font-woff syntax)
    – N2Mystic
    Jan 27, 2014 at 22:40
  • So, do you agree that the WordPress core implementation of the dashicon font is wrong? BTW, problem still persists even after updating application/font-woff
    – N2Mystic
    Jan 27, 2014 at 23:02
  • It is problematic at least. I have had the same issue on many servers with the built-in icons.
    – fuxia
    Jan 27, 2014 at 23:03
-1

To enable Dashicons in the front-end of WordPress add the code below to your functions.php file.

wp_enqueue_style( 'dashicons-style', get_stylesheet_uri(), array('dashicons'), '1.0' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.