webfontloader

[jonXmack]

https://github.com/typekit/webfontloader

Added as dependency npm install webfontloader --save

main.js

import WebFont from 'webfontloader';

WebFont.load({
  custom: {
    families: ['Montserrat']
  }
});

structure.scss

Prevents FOUC until fonts are done loading

body {
  visibility: hidden;

  .wf-inactive &,
  .wf-active & {
    visibility: visible;
  }
}

[danimalweb]

Looks good. I'll implement this in a future version with a CSS option to turn on or off to allow the body to render content before fonts are loaded.

[danimalweb]

@jonXmack I've made changes for this on a new branch.... https://github.com/lambdacreatives/tofino/commit/84992805c4c31a21c87888287f4f0d6051c2dfc2

Can you cast your eyes over it and check its all good. Feel free to make changes, esp in the docs.

@mrchimp @lesteak There is a new theme option in Advanced called Disable FOUT so you can block the body render until the font is loaded, I didn't want to make it default for performance reasons. You good with that?

[jonXmack]

Looks really good to me, especially the theme option.

I think it's wise to keep the docs concise rather than duplicating masses of the project readme, so having a link to the project (as you've done) is a good shout.

[mrchimp]

I don't think you need the commented example in head.js when it's the same as the code below it. Other than that, all good.

[jonXmack]

I just spotted that, +1

[mrchimp]

Maybe comment out the whole thing by default? We probably don't need to load any fonts by default.

[mrchimp]

Either way, I'm not keen on keeping commented out code in the repo.

Would it be bad to just leave the array empty with a comment next to it?

[danimalweb]

I think having it commented out is ok as it's consistent with what we are doing with the other BS4 JS components and the SCSS files.But you are right it is not ideal.

[jonXmack]

I think that since it's something we're not too familiar with, it's not a bad idea to have an example commented out, perhaps in the future we can remove it but I think for now leaving it would be best.

[mrchimp]

Ok. Comment it out by default, and remove the duplicate.

[danimalweb]

This will be in V1.4. A minor issue I've noticed is that if you are using the webfontloader and you enable the no FOUT option in the theme options. If later you decide not the use the webfontloader you must remember to disable the no FOUT option in the theme options otherwise you will get a white screen as the body content is hidden until the fonts have successfully loaded (trigger via the webfontloader JS).