I have a Drupal 8 multisite installation with one site already live, the others still developing.
All sites have AT themes and Shariff buttons installed.
Shariff uses FontAwesome to display Facebook, Twitter etc. logos.

This DOES work (fortunately) on my live site, eg. http://www.mehrweggottesdienst.de/MWG/vorschau-befluegelt-am-4122016

It does not work on this site: http://d8.citykirche-schweinfurt.de/node/2255
and also not on http://ejd8.schweinfurt-evangelisch.de/

I can't find any differences in the installation itself. All sites use the same drupal installation. And also the faulty sites reference correctly to /libraries/shariff/build/shariff.complete.css

It works with Bartik and also when I change the faulty website to the theme of the working website. So it must be something in the Subtheme. But what?

The mehrweggottesdienst.de subtheme was created with RC1 and I adapted it following the instructions in https://www.drupal.org/node/2753187

The faulty subthemes were created with RC2.

Any ideas?

Comments

Kniekel created an issue. See original summary.

Kniekel’s picture

Kniekel CreditAttribution: Kniekel commented

Okay,
the faulty website DOES show the FontAwesome for half a second and then hides it. Hmpf.
Look here, before the word "Test".
http://d8.citykirche-schweinfurt.de/test-fontawesome

gdelver@xs4all.nl’s picture

gdelver@xs4all.nl CreditAttribution: gdelver@xs4all.nl as a volunteer commented

@ Kniekel,

I had a similar issue. Look here: issue

Kniekel’s picture

Kniekel CreditAttribution: Kniekel commented

Thank you. I tried the thing with fontfaceobserver.js (I already had suspected something with that function), but somehow, it didn't work.

Groetjes naar Nederland :-)

Kniekel’s picture

Kniekel CreditAttribution: Kniekel commented

Update: When I tried for the 3rd time today, it started to work. I changed the fontfaceobserver-check.js as supposed by Jeff.
(Maybe I was just too tired yesterday evening and made some mistakes.)

Still, I'd like to know what happens here, since it works without any changes on the other subtheme.

gdelver@xs4all.nl’s picture

gdelver@xs4all.nl CreditAttribution: gdelver@xs4all.nl as a volunteer commented

@Kniekel: everybody here says "groetjes terug ..."
With me It only occurred in a Windows 10 (under Parallels desktop running on a Macbook), explorer 11 setting.
Succes, cheers Guido

Kniekel’s picture

Kniekel CreditAttribution: Kniekel commented

Here: Windows 10, tested with MS Edge and Chrome. As well as Android6.0.1/Chrome on a Galaxy S7 Edge.

gdelver@xs4all.nl’s picture

gdelver@xs4all.nl CreditAttribution: gdelver@xs4all.nl as a volunteer commented

Ok interesting, and they all have the same problem?

Kniekel’s picture

Kniekel CreditAttribution: Kniekel commented

Yes. Same problem everywhere.

Try this page wherever you want. I see the "facebook" sign for about half a second in MS Edge and also Android/Chrome and Android/"Internet" I saw nothing in Firefox and Chrome on Win10, but maybe they were just faster. :-)

http://ejd8.schweinfurt-evangelisch.de/de/inhalt/test-fontawesome

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Kniekel, which version of Adaptivetheme are you using?

Can you please switch off JS aggregation.

Kniekel’s picture

Kniekel CreditAttribution: Kniekel commented

Hi Jeff,

sorry I thought JS aggregation was off. Now it is.
I'm using the latest dev that is available via "drush up", that is:

AT Tools 8.x-1.0-rc2+67-dev (2016-Okt-28)
AdaptiveTheme 8.x-1.0-rc2+82-dev (2016-Okt-31)

The subthemes were created:
for http://d8.citykirche-schweinfurt.de/
I changed the fontfaceobserver-check.js in this theme as proposed by Jeff in this issue.
Citykirche Schweinfurt 8.x-1.0 (Standard-Theme)
Sub theme of AT Core
Base theme: at_core (8.x-1.0-rc2+53-dev)
Machine-name: citykirche_schweinfurt
Generated: Di 30th, Aug, 2016 - 9:27

for http://ejd8.schweinfurt-evangelisch.de/
EJ Schweinfurt 8.x-1.0 (Standard-Theme)
Sub theme of AT Core
Base theme: at_core (8.x-1.0-rc2+67-dev)
Machine-name: ej_schweinfurt
Generated: Mi 28th, Sep, 2016 - 20:45

for www.mehrweggottesdienst.de - the working subtheme
MWG 8.0.x (Standard-Theme)
Sub theme of AT Core (base theme: at_core).
Generated: Di 7th, Jun - 18:52

All three subthemes use the shariff library version that also loads the FontAwesome (/libraries/shariff/build/shariff.complete.js. and shariff.complete.css) I had changed this to the "minimal version" (shariff.min.js and shariff.min.css) without font loading and it worked for a while, then the icons disappeared. Probably a cache thing, although I'm quite sure I rebuilt the cache on every site.

Greetings and thanks for your good work
Heiko/Kniekel

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Run the latest fontfaceobserver-check.js from AT Theme Generator staterkit, e.g.: 

// Eliminate FOIT (Flash of Invisible Text) caused by web fonts loading slowly
// using font events with Font Face Observer.
(function ($) {

  "use strict";

  Drupal.behaviors.atFFOI = {
    attach: function () {

      $('html').addClass('fa-loading');

      var fontObserver = new FontFaceObserver('FontAwesome');

      // Because we are loading an icon font we need a unicode code point.
      fontObserver.load('\uf287\uf142\uf0fc').then(function () {
        $('html').removeClass('fa-loading').addClass('fa-loaded');
      }, function() {
        $('html').removeClass('fa-loading').addClass('fa-unavailable');
      });

    }
  };
}(jQuery));

The site with the hacked fontfaceobserver-check.js (d8.citykirche-schweinfurt.de) is, of course, working, because it disables the check entirely.

Before I release the next version of AT Tools/AT Generator I'm going to write an update that replaces the fontfaceobserver-check.js in all sub-themes as i had to update the version of fontfaceobserver.standalone.js to 2.0.5 due to a bug in the previous version I was using.

In case anyone is wondering why this theme makes a big deal about font loading, it's strait forward, if you don't check and the font actually fails to load then you'll end up with ugly layout or worse a ⎕ where ever theres supposed to be an icon. Not pretty. Most themers are lazy and allow it to fail badly and let your site be ugly.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

@Kniekel oh, one other thing - I think drush up is mangling the updates in your site, I think it's installing at_core inside at_core inside at_core etc, i.e. it appears to be NOT replacing the theme properly, but nesting later versions inside older ones. Not good.

Check out this URL to the layout js:

<script src="/themes/adaptivetheme/at_core/at_core/at_core/at_core/at_core/at_core/at_core/at_core/at_core/at_core/at_core/at_core/at_core/at_core/scripts/min/at.layout.min.js?v=8.x-1.0"></script>

Thats mad, and totally wrong, it should be...

<script src="/themes/adaptivetheme/at_core/scripts/min/at.layout.min.js?v=8.x-1.0"></script>

Kniekel’s picture

Kniekel CreditAttribution: Kniekel commented

Thank you Jeff. I replaced the fontobserver-check.js with this version and everything seems to work now. Also when I switched off font loading in Shariff, which should of course be ok when the font is already loaded by the theme.

The nested at_core thing is indeed mad. :-) I corrected it manually and will see what happens when the next updates comes. Looking at that, d7/sites/all/themes/adaptivetheme/adaptivetheme/at_core is also not quite right, is it? Funny things happening here ...

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented
Status: Active » Fixed

tl:dr if you have issues with Font icons not showing up, check the browser console for errors, if you see an error for font face observer, do the update as mentioned in this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.