This is more a note to myself because I didn't write the code I will share here. I just found in the Newsletter of Oxystuff, and the code was written by Matt Hias.
To make custom fonts appear in Oxygen, the only way is to use Elegant Custom Fonts. Because I don't like installing a plugin just for this, we can simulate that this plugin is installed and Oxygen will load our fonts in the editor dropdown.
Create a Code Snippet with the code below:
// create callback function for Oxygen
if (!class_exists('ECF_Plugin')) :
class ECF_Plugin {
static function get_font_families() {
$font_family_list[] = 'MyFont';
return $font_family_list;
}
}
// create new instance of fake class
$ECF_Plugin = new ECF_Plugin();
// embed font style
add_action( 'wp_footer', function () { ?>
<style id="hke-custom-font">@font-face {font-family:'MyFont';font-weight:400;font-style:normal;src:url(<?php echo get_site_url(); ?>/wp-content/uploads/fonts/myfont/myfont.woff);}</style>
<?php } );
endif;Dont forget to upload your font file to this folder: /wp-content/uploads/fonts/myfont/
Update: I have put the code above in a plugin and adapted the path to where you need to upload files. Download here.
Update 2: There is an update to Matthias Altmann's original script, that is much better then the one I used above. Read about it in his blog: https://www.altmann.de/en/blog-en/code-snippet-integrate-custom-fonts-into-oxygen-en/
Why is the class called ECF_Plugin?
if (! class_exists ('ECF_Plugin')):
I want to add 2 sources, and when I replicate the code but changing the ECF_plugin to another name, it doesn't work.
It only loads the font if it calls ECF_Plugin.
How can I add 2 fonts?
Oxygen only integrates natively with a plugin called Elegant Custom Fonts (ECF), which is made by the same developer. That's where this name comes from. Because we are simulating that the plugin exists, even though we don't have it installed, this way the font name will show on the dropdown list of fonts inside Oxygen.
To load 2 fonts, you just need to add a new line for:
$font_family_list[] = 'MyFont';And the one that starts with:
style id="hke-custom-font"BUT! Just follow the new tutorial Matthias Altmann has posted on his site that it's much better than the one here: https://www.altmann.de/en/blog-en/code-snippet-integrate-custom-fonts-into-oxygen-en/ 🙂