zachleat / fontfaceonload Goto Github PK

A simple utility to execute a callback when a webfont loads.

License: MIT License

JavaScript 92.76% HTML 7.24%

fontfaceonload's Issues

Font-Face Load Detection not Working in Firefox

Font-Face Load Detection is not working in Firefox (tested in 41.0.1 and 41.0.2), i.e. always ending up in the error function (fontfaceonload version 0.1.6). The same test works on Chrome and IE. I used the following to test:

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-eqiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="font-face.css">
  <title>Font Face Test</title>
</head>
<body>
  <p>Normal Text</p>
  <div class="load-font">
    <p>Impact Text</p>
  </div>
<script src="fontfaceonload.js"></script>
<script src="font-face-test.js"></script>
</body>

font-face.css

@font-face {
  font-family: 'impactreg';
  font-style: normal;
  font-weight: 400;
  src:  url('/font/impactreg.eot'); /* IE9 Compat Modes */
  src:  local('impactreg'),
        url('/font/impactreg.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/font/impactreg.woff') format('woff'),
        url('/font/impactreg.ttf') format('truetype');
}

.load-font {
  font-family: 'impactreg', sans-serif;
}

font-face-test.js

FontFaceOnload('impactreg', {
  success: function() {
    alert('Success!');
  },
  error: function() {
    alert('Error!');
  }
});

The font used in the example can be found here: http://fontsforweb.com/font/generatezip/?id=7349

dimension issue with icon font

See filamentgroup/a-font-garde#6

Adding line-height:normal seems to resolve.

Maybe use same styles as typekit/webfontloader: https://github.com/typekit/webfontloader/blob/master/src/core/fontruler.js#L41

New release version with recent changes?

Any plans? 0.1.2 or 0.2.0?

Breaks in SSR

The library breaks when used in a server-side rendered app. The build breaks with ReferenceError: window is not defined error, and a check typeof window === 'undefined' && ... unfortunately doesn't help.

Test if the script is async when used against a data uri or local font.

Per https://twitter.com/derSchepp/status/514873807891603456

Loading fails on Firefox if no glyphs option is passed

Happens on latest Firefox and Developer Edition too (Mac OS X) - no issues on Chrome/Safari.
I also have these errors in the CSS:

downloadable font: DSIG: table overruns end of file (<file.otf>)
downloadable font: rejected by sanitizer (<file.otf>)

Loading of a custom font was throwing an error, turns out it's from this line.

I just passed the glyphs from the example, glyphs: "\uE600\uE601\uE602\uE605" and it works.

Seems like unexpected behavior but maybe there's a reason behind this?

Load multiple fonts simultaneously

What is the best way to implement fontfaceonload for more than one font?

Using for example google font:

    WebFontConfig = {google: { families: [ 'Jura','Open+Sans' ] }};
    (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();

Update dependencies

Allow checking for multiple fonts in parallel

it would be nice if you could optionally pass an array of font names.

the success callback would run when they've all loaded, or the error callback would run as soon as one of them fails.

I will do a PR for this

IE11 failure

One of my users is on Windows 8.1 using IE11. FontFaceOnload in her browser consistently times out, triggering FontFaceOnload's error() callback.

I haven't been able to reproduce this on my own, but it's reliably happening on her particular machine. Chrome on that machine works for her though.

expose tolerance as option

Problems with load fonts in Firefox

Hi Zach, Thank you for this great plugin.

I've been having an issue with Firefox and it's that I can't manage to load any fonts. I thought it was something on my end but I'm having the same problem using your examples. Is there any way to do this?

Thanks in advance!

expose delay as option

Merge in changes from fontfamily.io

https://github.com/zachleat/font-family-reunion/blob/master/test/lib/fontfaceonload.js

Browserify and window.FontFaceOnload

can't use with browserify, b'cose CommonJS modules doesn't work with global scope

Doesn't check loading of several fonts with same name but different font-weights

The demo head demo loads two fonts with the same name but different font-weights.

http://fonts.googleapis.com/css?family=Raleway:600,400 gives this:

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), url(http://fonts.gstatic.com/s/raleway/v9/cIFypx4yrWPDz3zOxk7hIQLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(http://fonts.gstatic.com/s/raleway/v9/xkvoNo9fC8O2RDydKj12b73hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}

The script doesn't check if both are loaded, confirmed by @zachleat in this tweet.

Fail load detection when url from google includes several weights

I'm trying to apply these scenario from @bevacqua performance workshop:
https://github.com/bevacqua/perfschool/tree/master/exercises/using_a_font_loader

That solution works like a charm... if the url has the defaults weights. I'm trying without success apply the same logic when working with a subset of fonts like these: https://fonts.googleapis.com/css?family=Lato:700,900|Bitter:400italic.

With this script:

  var ffol = global.FontFaceOnload;
  var html = document.documentElement;

  function watch (family) {
    function loaded () {
      html.className += ' ok-' + family.toLowerCase();
    }

    function notLoaded() {
      console.error("Error loading " + family + " font.");
    }

    ffol(family, {
      timeout: 10000,
      success: loaded,
      error: notLoaded 
    });
  }

  watch('Lato');
  watch('Bitter');

the fail callback is always thrown. Am I missing something?

Problem with on-site files with Google Chrome

When using files located inside current website, doesn't seem to work (fontface with src files in the same website causes error message). Nevertheless, the font file is loaded (visible in network inspector).
But ok with out-site links (link tag with reference to google font).

Am i doing something wrong ? Thanks

zachleat / fontfaceonload Goto Github PK

fontfaceonload's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs