Adding dashicon fonts to the admin of pre 3.8 installs

Question

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.

Answer 1

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.

Answer 2

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' );