Font Size

Facilitates the adjustment of font size in pixels for selected text, enabling precise typographic customization.

Select some text and click the 'Text size' button on the toolbar.


<!DOCTYPE html>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/redactor.css" />
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-folder/redactor.js"></script>
        <script src="/your-folder/plugins/fontsize/fontsize.js"></script>

        <!-- call -->
        Redactor('#entry', {
            plugins: ['fontsize']


By default, the plugin already has a set of sizes installed. You can set your own set this way:

Redactor('#entry', {
    plugins: ['fontsize'],
    fontsize: {
        items: ['16px', '20px', '24px', '32px']

Work with classes

The plugin can work with classes. In this case font size is set as the class, not as a style.

Redactor('#entry', {
    plugins: ['fontsize'],
    fontsize: {
        classes: ['size-20', 'size-24']

To display text sizes in the editor content, you will need to add a size style statement to the page where the editor is running, for example, like this:

.rx-content .size-20 {
    font-size: 20px;
.rx-content .size-24 {
    font-size: 24px;