ckEditor 4 not loading CSS file with custom fonts

Question

I've implemented a custom font for CKEditor and although it is showing in the dropdown list it does not apply to the element. I cannot find the cause of why my CSS file isn't loading which is the cause of not applying the new font.

So, on my configuration default.js file I added the below lines of code:

config.font_names = 'Belluga Solid/Belluga_Solid;' + config.font_names;

config.contentsCss = "../fonts.css";

And then created a new fonts.css file:

@font-face {
    font-family: "Belluga Solid";
    src: local("Belluga Solid"), url("/MyFonts/Beluga/Belluga_Solid.eot") format("embedded-opentype"); /*non-IE*/
    src: url("/MyFonts//Beluga/Belluga_Solid.ttf") format("truetype"); /*non-IE*/
    src: url("/MyFonts//Beluga/Belluga_Solid.svg") format("svg"); /*non-IE*/
}

Looking at the source code, it correctly applies fine:

<p><span style="font-family:belluga_solid;">Lorem Ipsum</span></p>

It seems pretty straightforward to do. Looking at this tutorial the author got it all right: https://www.youtube.com/watch?v=knkFOuKPsKQ

I implemented the same solution but having a hard time figuring out how to solve the issue.

Voxy Voxy · Accepted Answer · 2021-03-09T17:45:55

It's probably because the value of the font-family property in the element's styling doesn't match the value defined in the @font-face rule. The @font-face rule defined it as Belluga Solid, but your inline style sets the value to belluga_solid.

You can try modifying the @font-face rule so that it says this instead:

@font-face {
    font-family: "belluga_solid";
}

That way, they will match and your font should hopefully display correctly.

ckEditor 4 not loading CSS file with custom fonts

1 Answers