Custom Fonts in Oxygen

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 } );

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/

Notify of

2 Comentários
Newest Most Voted
Inline Feedbacks
View all comments
3 anos atrás

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?

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram