Disable Google Font in Audio Recorder under Wordpress

Submitted by lumpidu on Mon, 11/05/2018 - 12:51
Forums: 
Content creation

Hi I hope this is the right SubForum for this Issue.

I'm currently developing a site for a scientific project in Germany. So there is the one constraint to load fonts locally (GDPR).

The problem ist that the Audio Recorder (vue Source) uses the line:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

I found the Documentation of changing css for the wordpress Plugin. But I'm not sure if this will stop the GET request to  "fonts.gstatic.com". For me the simple solution would be to edit this line, but I doubt thats its the best way or rather I couldn't find the Code in the H5P plugin Folder...

So the question is whats the identifier to ovewrite this rule for every Audio Recorder Instance? If it is possible or does this need another workaround?

Thanks in advance!

Summary: 
Load Google Font locally for Audio recorder in Wordpress
BV52's picture

BV52

Tue, 11/06/2018 - 02:02

Hi lumpidu,

Afaik using a PHP hook, to add your own CSS-file to the content type should take care of the issue but I'm not sure how it can be implemented.

-BV52

lumpidu

Tue, 11/06/2018 - 11:13

Thanks for the answer BV52.

Yeah I'm working on it right now. But am still struggling to see any effect on the font of the Audio Recorder Module. It should be

.h5p-audio-recorder-view {
    font-family: Arial, Helvetica, sans-serif;
}
icc's picture

icc

Fri, 11/09/2018 - 10:18

Hi, 

Are you trying to prevent the font from loading or are you trying to change the font? Try adding !important after property like this:

.h5p-audio-recorder-view {
  font-family: Arial, Helvetica, sans-serif !important;
}

lumpidu

Tue, 11/13/2018 - 10:56

I'm trying to block the font from loading via cdn/ externally. So the font can stay open sans or can become anything else. I tried your addition, but it still sticks to it's get "https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2" request as it's written in the javascript of the module.

To clarify: I used the method of creating a plugin called h5pmods with following content:

<?php 
/**  * H5P Mods Plugin.   
* Alters the way the H5P plugin works.  
* @package   H5P  
* @author    Joubel <<a href="mailto:[email protected]">[email protected]</a>>  
* @license   MIT  * @link      <a href="http://joubel.com">http://joubel.com</a>  
* @copyright 2015 Joubel  *  
* @wordpress-plugin  
* Plugin Name:       H5P Mods  
* Plugin URI:        <a href="http://www.h5p.org">http://www.h5p.org</a>  
* Description:       Overrides the H5P native H5P CSS with your own adjustments.  
* Version:           0.0.1  
* Author:            H5P  
* Author URI:        <a href="http://www.h5p.org">http://www.h5p.org</a>  
* Text Domain:       h5pmods  
* License:           MIT  
* License URI:       <a href="http://opensource.org/licenses/MIT">http://opensource.org/licenses/MIT</a>  
* Domain Path:       /languages  * GitHub Plugin URI: <a href="https://github.com/h5p/h5pmods-wordpress-plugin">https://github.com/h5p/h5pmods-wordpress-plugin</a>  

*/ // If this file is called directly, abort. 
if (!defined('WPINC')) {   die; } 

/**  * Allows you to alter which stylesheets are loaded for H5P. This is  * useful for adding your own custom styles or replacing existing once. *  
* @param object &styles List of stylesheets that will be loaded.  
* @param array $libraries The libraries which the styles belong to.  
* @param string $embed_type Possible values are: div, iframe, external, editor.  
*/ 
function h5pmods_alter_styles(&$styles, $libraries, $embed_type) {   
    $styles[] = (object) array(     
            'path' => bloginfo('template_directory') . '/custom-h5p.css',
            'version' => '?ver=1.1' // Cache buster   
            ); 
        } 
add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3); 
?>

I use a child theme in which directory I placed the custom-h5p.css containing:

.h5p-audio-recorder-view {
  font-family: Arial, Helvetica, sans-serif !important;
}

But sadly it still loads the open sans via GET from google.

The only effect I managed to achieve was directly changing the font request in the module code to another Font which was loaded. But when I simplay deleted the whole line it had no effect and kept loading.

icc's picture

icc

Thu, 11/15/2018 - 09:37

Unfortunately, it's not possible to prevent the loading without changing the code. 

H5P content types should not load any external files unless absolutely needed, I've created an issue for removing it: HFP-2416

lumpidu

Fri, 11/16/2018 - 11:13

Thank you very much for your clarifcation and making it an issue.

So for now I'll keep an eye on the issue, to use the module when it's external font requests are removed.

rthornton's picture

rthornton

Wed, 04/17/2019 - 21:32

 

 

 

 

I noticed exactly this same issue for the same reason, GDPR violation. In the Moodle plugin (for Moodle 3.6), the file that controls the styling of the whole editor also calls the Open Sans font with that same @import statement.

The file is h5p-hub-client.css which in Moodle lives in /mod/hvp/editor/styles/css.

We found no solution to this but to edit the code, remove the import call, and to change all the font-family types from Open Sans to something better and more generic. Unfortunately of course, we have to now merge this after every plugin update.

The editor gains nothing by calling this font, except compromising privacy. There are already plenty of good font files already stored locally with the plugin anyway. Having an external call here is not necessary at all. It should be removed.

 

 

 

 

otacke's picture

otacke

Thu, 04/18/2019 - 16:15

Hi rthornton!

Wouldn't it be easier and more versatile to simply globally block all calls to Google's servers that provide the fonts?

And if you already have the code to remove the calls, why don't you create a pull request?

Cheers,

Oliver