Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to know if a font (@font-face) has already been loaded?

I'm using Font-Awesome, but while the font files are not loaded, the icons appear with .

So, I want these icons to have display:none while files are not loaded.

@font-face {   font-family: "FontAwesome";   src: url('../font/fontawesome-webfont.eot');   src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');   font-weight: normal;   font-style: normal; } 

How do I know that these files have been loaded and I'm finally able to show the icons?

Edit: I'm not talking when the page is loaded (onload), because the font could be loaded before the whole page.

like image 373
Shankar Cabus Avatar asked Sep 07 '12 05:09

Shankar Cabus


People also ask

How do you check if a font is loaded or not?

check() The check() method of the FontFaceSet returns whether all fonts in the given font list have been loaded and are available.

Is font face and font family the same?

While a typeface is a set of design features for letters and other characters, a font is the variation in weight and size of a typeface. A font family is a group of related fonts.

Is font face deprecated?

According to Apple's documentation, @font-face is deprecated for use on the iPhone version of Safari.

How do you define font face?

The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.


2 Answers

Now on GitHub: https://github.com/patrickmarabeas/jQuery-FontSpy.js

Essentially the method works by comparing the width of a string in two different fonts. We are using Comic Sans as the font to test against, because it is the most different of the web safe fonts and hopefully different enough to any custom font you will be using. Additionally we are using a very large font-size so even small differences will be apparent. When the width of the Comic Sans string has been calculated, the font-family is changed to your custom font, with a fallback to Comic Sans. When checked, if the string element width is the same, the fallback font of Comic Sans is still in use. If not, your font should be operational.

I rewrote the method of font load detection into a jQuery plugin designed to give the developer the ability to style elements based upon whether the font has been loaded or not. A fail safe timer has been added so the user isn’t left without content if the custom font fails to load. That’s just bad usability.

I have also added greater control over what happens during font loading and on fail with the inclusion of classes addition and removal. You can now do whatever you like to the font. I would only recommend modifying the fonts size, line spacing, etc to get your fall back font as close to the custom as possible so your layout stays intact, and users get an expected experience.

Here's a demo: http://patrickmarabeas.github.io/jQuery-FontSpy.js

Throw the following into a .js file and reference it.

(function($) {      $.fontSpy = function( element, conf ) {         var $element = $(element);         var defaults = {             font: $element.css("font-family"),             onLoad: '',             onFail: '',             testFont: 'Comic Sans MS',             testString: 'QW@HhsXJ',             delay: 50,             timeOut: 2500         };         var config = $.extend( defaults, conf );         var tester = document.createElement('span');             tester.style.position = 'absolute';             tester.style.top = '-9999px';             tester.style.left = '-9999px';             tester.style.visibility = 'hidden';             tester.style.fontFamily = config.testFont;             tester.style.fontSize = '250px';             tester.innerHTML = config.testString;         document.body.appendChild(tester);         var fallbackFontWidth = tester.offsetWidth;         tester.style.fontFamily = config.font + ',' + config.testFont;         function checkFont() {             var loadedFontWidth = tester.offsetWidth;             if (fallbackFontWidth === loadedFontWidth){                 if(config.timeOut < 0) {                     $element.removeClass(config.onLoad);                     $element.addClass(config.onFail);                     console.log('failure');                 }                 else {                     $element.addClass(config.onLoad);                     setTimeout(checkFont, config.delay);                     config.timeOut = config.timeOut - config.delay;                 }             }             else {                 $element.removeClass(config.onLoad);             }         }         checkFont();     };      $.fn.fontSpy = function(config) {         return this.each(function() {             if (undefined == $(this).data('fontSpy')) {                 var plugin = new $.fontSpy(this, config);                 $(this).data('fontSpy', plugin);             }         });     };  })(jQuery); 

Apply it to your project

.bannerTextChecked {         font-family: "Lobster";         /* don't specify fallback font here, do this in onFail class */ }  $(document).ready(function() {      $('.bannerTextChecked').fontSpy({         onLoad: 'hideMe',         onFail: 'fontFail anotherClass'     });  }); 

Remove that FOUC!

.hideMe {     visibility: hidden !important; }  .fontFail {     visibility: visible !important;     /* fall back font */     /* necessary styling so fallback font doesn't break your layout */ } 

EDIT: FontAwesome compatibility removed as it didn't work properly and ran into issues with different versions. A hacky fix can be found here: https://github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1

like image 169
Patrick Avatar answered Sep 19 '22 00:09

Patrick


Try WebFont Loader (github repo), developed by Google and Typekit.

This example first displays the text in the default serif font; then after the fonts have loaded it displays the text in the specified font. (This code reproduces Firefox's default behavior in all other modern browsers.)

like image 20
cassi.lup Avatar answered Sep 23 '22 00:09

cassi.lup