14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

How to set up Vue fonts in your WYSIWYG

May 15th, 2024

3 min read

A stylized image representing the ability to add new fonts with Vue in TinyMCE

Written by

Joe Robinson

Category

How-to Use TinyMCE

Tagged

Content builders rely on WYSIWYGs to make sure they can consistently create content, and fonts are an important part of that content building process. Configuring fonts can take some time to set up, especially when you have multiple design requirements to manage. It can be easier if there’s another component or plugin that can make the process of configuring fonts easier.

WYSIWYGs that provide the most value also bring with them the capability to manage fonts for content builders. For instance, TinyMCE provides font file configuration, and additionally a number of also useful integrations for the most popular frameworks and libraries, for example, the Vue framework. For your projects, a Vue font option configured with TinyMCE can make handling font configuration easier and faster.

Read on to find out how to set up Vue fonts and configure TinyMCE as your Vue application WYSIWYG.

Vue Google font options

Google Fonts offer a range of options that can speed up font integration for your Vue application. The fonts available can be added to your application using the font CDN link. TinyMCE provides specific options to make sure you can add the Google fonts of your choice when integrating TinyMCE with Vue. The following procedure explains the steps on how to get Vue fonts configured using TinyMCE and Google font options.

1. Create a new Vue application

The first step to get Vue font options set up is to create a demo app. Start by running the vue create command:

vue create vue-font-demo

And then change into the demo Vue app:

cd vue-font-demo

2. Configure TinyMCE with the dedicated integration

Install the dedicated TinyMCE integration into the demo Vue app:

npm install --save "@tinymce/tinymce-vue@^5"

With the package installed, change into the components folder, and create a new component file for TinyMCE:

cd src/components/
touch TinyMCE.vue

Open the TinyMCE.vue component file, and then copy the following JavaScript into the file:

<script setup>

import Editor from '@tinymce/tinymce-vue'

<template>
	<Editor
  	api-key="ADD_YOUR_API_KEY_HERE"
  	cloud-channel="7"
  	:init="{
    	plugins: 'lists link image table code help wordcount',
    	font_css: 'https://fonts.googleapis.com/css2?family=Afacad:wght@500&family=Marcellus&family=Poppins:wght@300&family=Raleway:wght@100&display=swap',
    	font_family_formats: 'Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats; Afacad=afacad,sans-serif; Marcellus=marcellus,serif; Poppins=poppins,sans-serif; Raleway=raleway,sans-serif;',
  	}"
	/>
</template>

💡NOTE: Adding your TinyMCE API key to your Vue app configuration allows you to access TinyMCE Advanced capabilities to your application. You can get your API key on your TinyMCE dashboard using Google or GitHub credentials.

Your API key comes with a 14-day Free Trial of TinyMCE Advanced plugins!

3. Vue fonts integration and testing

Change back into the src/ folder, and open the App.vue file. Include the following content into the file, which configures TinyMCE into the Vue file:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <TinyMCE />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import TinyMCE from './components/TinyMCE.vue'

export default {
  name: 'App',
  components: {
	HelloWorld,
	TinyMCE
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Save the changes, and you can now test out the new Vue font options in TinyMCE by running the npm run serve command:



TinyMCE and Vue working in the browser with additional fonts



Vue, fonts, and other options with TinyMCE

The TinyMCE font_css option provides a faster method to provide more font options to your customers, avoiding the overhead of incorporating fonts into your Vue app design. Another essential resource to check on is the Vue image upload how-to guide.

For more on fonts, check on the following guides available on the TinyMCE blog:

Contact us for more, or if you have any questions on how TinyMCE can expand your font capabilities in your Vue project.

Vue
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCEMay 22nd, 2024

    Understanding accessible documents and options from TinyMCE

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.