Font Family in Froala WYSIWYG Editor V4

by Froala_marketing

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic&amp;subset=latin,vietnamese,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek"></script>
<script src="https://fonts.googleapis.com/css?family=Oswald:400,300,700&amp;subset=latin,latin-ext"></script>
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<div id="froala-editor">
  <p>By default the font family icon is visible in the editor's toolbar. If you want to be able to see the actual font family for the selected text you can use the <a href='../docs/options#fontFamilySelection' title='fontFamilySelection' target='_blank'>fontFamilySelection</a> option.</p>
</div>

CSS

@import url(//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic&subset=latin,vietnamese,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek);

@import url(//fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext);

@import url(//fonts.googleapis.com/css?family=Montserrat:400,700);

@import url(//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,cyrillic,latin-ext);

JavaScript

new FroalaEditor('div#froala-editor', {
  fontFamily: {
    "Roboto,sans-serif": 'Roboto',
    "Oswald,sans-serif": 'Oswald',
    "Montserrat,sans-serif": 'Montserrat',
    "'Open Sans Condensed',sans-serif": 'Open Sans Condensed'
  },
  fontFamilySelection: true
});