Typography: Flexibility with font type and size?

Thank you very much.

My best wishes!

I have done what Realia wrote under https://h5p.org/documentation/for-developers/visual-changes but I found no change in the newly created H5P content. There was no messup either. 

Would it be possible to make it a bit more convenient for newbies like me to do it? 

Many many thanks!

_________________

What I did was (copied from what Realia said):

How to do it in Wordpress for newbies ;)

For newbies like me, this documentation was difficult to understand so I thought that I could help others by detailing how I managed to do this on Wordpress.

• First, copy-paste the following code in a file that you will name phpmods.php :

<?php

/**

 * H5P Mods Plugin. 

 * Alters the way the H5P plugin works.

 * @package   H5P

 * @author    Joubel <[email protected]>

 * @license   MIT

 * @link      http://joubel.com

 * @copyright 2015 Joubel

 *

 * @wordpress-plugin

 * Plugin Name:       H5P Mods

 * Plugin URI:        http://www.h5p.org

 * Description:       Overrides the H5P native H5P CSS with your own adjustments.

 * Version:           0.0.1

 * Author:            H5P

 * Author URI:        http://www.h5p.org

 * Text Domain:       h5pmods

 * License:           MIT

 * License URI:       http://opensource.org/licenses/MIT

 * Domain Path:       /languages

 * GitHub Plugin URI: https://github.com/h5p/h5pmods-wordpress-plugin

 */

// 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' => '/custom-h5p.css',

    'version' => '?ver=1.0' // Cache buster

  );

}

add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);

?>

• put this file in a folder that you will name h5pmods and that you will create (using your FTP software) in /wp-content/plugins/
• put a file that you will name custom-h5p.css in /wp-content/uploads/h5p/
• in this file, add your css tweaks to H5P styles, for instance :

<code>html.h5p-iframe .h5p-content {
   font-size: 20px; /* size of the font used in H5P content */
  color: #5a5a5a; /* color of the H5P content */ 
}</code>

• go in your wordpress admin > plugins and activate the h5pmods plugin.
• from now on, all your CSS modifications should apply to the embedded h5p contents of your site and your CSS overrides would be kept even after upgrading the h5p plugin.