font-family shown in developer tool but doesn't apply inside froala editor

Question

I'm facing a strange problem. I am using a font from google using @import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,600,700'); in styles.scss in an angular2 project. I'm using the font-family for a paragraph inside the froala editor. When I check the font family for the paragraph in dev tools, it shows that it is using the right font family. However, the font is clearly not the one I'm using because it looks completely different. I have tried to download the file and define a new @font-face but that doesn't work either. I'm not sure how to solve/debug this problem.

@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,600,700');
...
p {
     font-family: 'Source Serif Pro', serif;
     font-size: 20px;
}

Answer 1

So I solve the problem. I was using iframe: true inside the editor option which wraps all the editor content inside an iframe. This somehow messes with the style. Removing that solved the problem.