Select some text and click the 'Font' button on the toolbar.
<!DOCTYPE html>
<html>
<head>
<title>Redactor</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-folder/redactor.css" />
</head>
<body>
<!-- element -->
<textarea id="entry">...</textarea>
<!-- js -->
<script src="/your-folder/redactor.js"></script>
<script src="/your-folder/plugins/fontfamily/fontfamily.js"></script>
<!-- call -->
<script>
Redactor('#entry', {
plugins: ['fontfamily']
});
</script>
</body>
</html>By default, the plugin already has a set of fonts installed. You can set your own set this way:
Redactor('#entry', {
plugins: ['fontfamily'],
fontfamily: {
items: ['Inter', 'Fira Sans', 'Monospace']
}
});
The plugin can work with classes. In this case font family is set as the class, not as a style.
Redactor('#entry', {
plugins: ['fontfamily'],
fontfamily: {
classes: ['font-serif', 'font-mono']
}
});
To display fonts in the editor content, you will need to add a font style statement to the page where the editor is running, for example, like this:
.rx-content .font-serif {
font-family: 'PT Serif', 'Times New Roman', sans-serif;
}
.rx-content .font-mono {
font-family: 'Menlo', monospace;
}