CSS Vuejs

Binding CSS variables with Vuejs

source: Binding CSS Variables in Vue - shayneo

<template>
  <div
    :style="userStyle"
    class="book-text"
  >
    E-Book Text here
  </div>
</template>

<script>
export default {
  data () {
    return {
      fontOptions: ['Roboto', 'Lobster', 'Comic Sans'],
      userSelectedFont: 'Roboto'
    }
  },
  computed: {
    userStyle () {
      return {
        '--user-font-fam': this.userSelectedFont
      }
    }
  }
</script>

<style scoped>
.book-text {
  font-family: var(--user-font-fam);
}
</style>

Fonts

General css fonts tips

Optimisation

• Best practices for loading fonts in Vuejs - LogRocket Blog
• How to Load Local Fonts with Vue CLI 4 in Vuejs 3

---

Backlinks

• 2022-01-12
• 2022-01-14