zachleat / fontfaceonload Goto Github PK
View Code? Open in Web Editor NEWA simple utility to execute a callback when a webfont loads.
License: MIT License
A simple utility to execute a callback when a webfont loads.
License: MIT License
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
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
Any plans? 0.1.2 or 0.2.0?
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.
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?
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);
})();
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
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.
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!
can't use with browserify, b'cose CommonJS modules doesn't work with global scope
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.
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?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.