font_size.html

<template id="font-size">
    <div class="kiwi-format-buttons">
        <a class="kiwi-decrease-font" title="Reduce text size"
             @click="decreaseFont"
        >
            A<sup>-</sup>
        </a>
        <a class="kiwi-increase-font" title="Increase text size"
             @click="increaseFont"
        >
            A<sup>+</sup>
        </a>
    </div>
</template>
<script>
    kiwi.plugin('font-size', function(kiwi, log) {

        let fontSize = new kiwi.Vue({
            template: '#font-size',
            data() {
                return {
                    size: 100,
                };
            },
            methods: {
                reduceFont: function reduceFont() {
                    this.size = this.size < 140 ? this.size + 10 : this.size;
                    this.resizeFont()
                },
                increaseFont: function increaseFont() {
                    this.size = this.size > 60 ? this.size - 10 : this.size;
                    this.resizeFont()
                },
                resizeFont: function resizeFont() {
                    document.querySelector('.kiwi-wrap').style.fontSize = this.size + '%';
                },
            },
        });
        kiwi.addUi('browser', fontSize.$mount().$el);
    });
</script>

<style>
.kiwi-format-buttons {
    position: absolute;
    top: 1px;
    right: 2px;
    display: block;
}
.kiwi-decrease-font,
.kiwi-increase-font {
    border: 1px solid #A1A1A0;
    background-color: #dedede;
    border-radius: 6px;
    color: #A1A1A0;
    cursor: pointer;
    display: inline-block;
    font-size: 1.3em;
    margin: 1px;
    padding: 0 4px 2px !important;
    opacity: 0.5;
}
.kiwi-decrease-font:hover,
.kiwi-increase-font:hover {
    opacity: 1;
}

</style>