Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-49074

WOFF2 fonts are not supported in themes (backport of MDL-46728).

XMLWordPrintable

    • MOODLE_27_STABLE, MOODLE_28_STABLE
    • MOODLE_27_STABLE, MOODLE_28_STABLE
    • Hide

      Using the Clean theme:

      1. Apply the patch.
      2. Place the file 'https://tracker.moodle.org/secure/attachment/42496/font-awesome-MDL-46728.css' (on MDL-46728) in the 'theme/clean/style' folder.
      3. Create a new folder 'theme/clean/fonts' and place the files on it
        • 'https://tracker.moodle.org/secure/attachment/42493/fontawesome-webfont.woff2'
        • 'https://tracker.moodle.org/secure/attachment/42495/fontawesome-webfont.eot'
      4. In the 'theme/clean/config.php' file, add "$THEME->sheets[] = 'font-awesome-MDL-46728';" after "$THEME->sheets = array('custom');".
      5. Using a modern browser that supports the WOFF2 format, 'Chrome Version 40.0.2214.93 m' for example.
      6. Purge all caches.
      7. In a course (topic course format), create a label and with the editor (ATTO) in 'HTML' mode ('Show more buttons' button -> 'HTML' button), add the markup '<i class="fa fa-train"></i>FontAwesome 4.3.0 test.'.
      8. Save and return to the course.
      9. Observe that the label has a 'train' icon in front of the words 'FontAwesome 4.3.0 test.'.
      10. Press F12 to open the developer web tools and reload the page so that the 'fontawesome-webfont.woff2' file will be reported in the network tab. Confirm that the mime-type is 'fontawesome-webfont.woff2' as shown in the 'Response Headers' of the packet that delivered the file. Please see 'https://tracker.moodle.org/secure/attachment/42497/2015-01-29%2013_06_40-Course_%20Topics_MDL-46728.jpg'.
      11. Open up Internet Explorer 11 (11.0.9600.17501 used to test) which does not support WOFF2 files but instead EOT files. Go to the course and label you created and observe that the label has a 'train' icon in front of the words 'FontAwesome 4.3.0 test.'. This demonstrates that EOT files are served as before and the 'if' sequence is unharmed.
      Show
      Using the Clean theme: Apply the patch. Place the file 'https://tracker.moodle.org/secure/attachment/42496/font-awesome-MDL-46728.css' (on MDL-46728 ) in the 'theme/clean/style' folder. Create a new folder 'theme/clean/fonts' and place the files on it 'https://tracker.moodle.org/secure/attachment/42493/fontawesome-webfont.woff2' 'https://tracker.moodle.org/secure/attachment/42495/fontawesome-webfont.eot' In the 'theme/clean/config.php' file, add "$THEME->sheets[] = 'font-awesome- MDL-46728 ';" after "$THEME->sheets = array('custom');". Using a modern browser that supports the WOFF2 format, 'Chrome Version 40.0.2214.93 m' for example. Purge all caches. In a course (topic course format), create a label and with the editor (ATTO) in 'HTML' mode ('Show more buttons' button -> 'HTML' button), add the markup '<i class="fa fa-train"></i>FontAwesome 4.3.0 test.'. Save and return to the course. Observe that the label has a 'train' icon in front of the words 'FontAwesome 4.3.0 test.'. Press F12 to open the developer web tools and reload the page so that the 'fontawesome-webfont.woff2' file will be reported in the network tab. Confirm that the mime-type is 'fontawesome-webfont.woff2' as shown in the 'Response Headers' of the packet that delivered the file. Please see 'https://tracker.moodle.org/secure/attachment/42497/2015-01-29%2013_06_40-Course_%20Topics_MDL-46728.jpg'. Open up Internet Explorer 11 (11.0.9600.17501 used to test) which does not support WOFF2 files but instead EOT files. Go to the course and label you created and observe that the label has a 'train' icon in front of the words 'FontAwesome 4.3.0 test.'. This demonstrates that EOT files are served as before and the 'if' sequence is unharmed.

      Google has begun adding the woff2 fonts to their font libraries (depending on the user agent).
      http://www.w3.org/TR/WOFF2/
      The font.php file needs to be updated to allow the woff2 format. Chrome makes use of this font exclusively if available.

      Backport rationale:

      As Moodle 2.7 is 'Long Term Support' (LTS) then it will be used by the community far beyond the normal lifespan of a release. In that time browser technology will progress and has already done so with support of the WOFF2 font format: http://caniuse.com/#search=woff2. At the time of writing, the most used version of Chrome for desktop (39) had 21.61% of the global market share and Chrome for Android (40) had 10.09% of the global market share. Thus a significant number of users could make use of the new format.

      The W3C is expected to progress: http://www.w3.org/TR/WOFF2/ to recommended status.

      It is clear from: https://moodle.net/stats/ that users hang on to older versions of Moodle far beyond their lifespan and yet browsers improve, thus would want support for the font format in their themes.

            gb2048 Gareth J Barnard
            gb2048 Gareth J Barnard
            David Monllaó David Monllaó
            Dan Poltawski Dan Poltawski
            Rajesh Taneja Rajesh Taneja
            Votes:
            5 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.