Blog

Microsoft Edge @font-face not displaying all fonts

At Doepud we rarely find annoying bugs with browsers these days, partly because we like to keep our CSS and JavaScript simple, but mainly because browser vendors do a great job sticking to standards and delivering a consistent experience across a wide range of devices. It was a surprise then to find, when showing a client a demo version of their new site, and on a web browser that we normally consider to be pretty decent (Microsoft Edge) a very unusual bug feature. The issue was related to @font-face, or more specifically @import, with the main headings not displaying the embedded font as expected.

Firefox, Chrome and Opera all ok... but not Edge

Everything was working fine in Firefox, Chrome and Opera but not Microsoft's Edge browser (as it happened, we also found the issue extended to Internet Explorer 11).

Media Queries

Turns out that within our CSS file, when requesting fonts (using @import) inside a media query, like this:

@charset "utf-8";

@media screen {
    //imports
        @import 'normalise';
        @import 'fonts';
...

...Microsoft Edge (and IE11 let's not forget) opted to ignore them entirely. So, moving the @import rule up and outside the @media screen resolved the issue:

@charset "utf-8";
@import 'fonts';

@media screen {
    //imports
        @import 'normalise';
...

Some things never change eh? Microsoft have always liked to do things their own way.

The ICO blog has a great post on ransomware, the despicable act of holding a business to ransom by preventing access to the files on their computer. These things always begin with a virus, usually through a spam email. Once infected your computer is locked down and access to your important files restricted. The pirates then issue a demand for payment to permit access again... or they will delete them. This is when having external backups comes in handy! Of course, the best defense is to avoid catching the virus in the first place.

Read the post: Being held to ransom?

Legally binding electronic signatures with Eversign. Comes with a free option to send and sign five documents per month.

Using Your Blog to Attract New Clients is the perfect article to promote proactive effort if you're trying to use your blog to attract new customers. It covers a range of subjects:

  • write about things your customers want to know (like deep answers to frequently asked questions)
  • find already published articles on the same subject and write them better
  • use great images and other media to enhance your content
  • interview someone
  • add a call to action
  • promote your article
  • join online groups and forums where your customers hang out... and contribute

Related: Brian Dean's article on the "skyscraper technique" that covers all sorts of clever procedures to increase your traffic.

We're always encouraging clients to use the structured markup tools available with their CMS text editor (CKEditor) when they're creating content. Our advise is that structured content not only helps with general readability but it can bring SEO benefits too. One particular feature we like to promote is lists, and as luck would have it, Hoa Loranger from Nielsen Norman Group has just published a great article on exactly that subject. 7 Tips for Presenting Bulleted Lists in Digital Content covers everything you need to know with some excellent examples about what not to do too.