<style>
@import url(";display=swap");
#title {
  font-family: "Creepster", cursive;
  font-weight: 300;
  font-size: 1.5rem;
}
</style>

<template>
  <v-app>
    <v-app-bar color="#FFEE58" app>
      <v-app-bar-nav-icon>
        <v-img alt="Heart Logo" width="60" contains src="@/assets/logo.png"/>
      </v-app-bar-nav-icon>
      <v-spacer></v-spacer>

      <div id="title">
        <v-toolbar-title>
          <b>Title</b>
        </v-toolbar-title>
      </div>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-menu left bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn icon v-bind="attrs" v-on="on">
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>

        <v-list>
          <v-list-item v-for="n in 5" :key="n" @click="() => {}">
            <v-list-item-title>Option {{ n }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<style>
@import url("https://fonts.googleapis./css2?family=Creepster&display=swap");
#title {
  font-family: "Creepster", cursive;
  font-weight: 300;
  font-size: 1.5rem;
}
</style>

<template>
  <v-app>
    <v-app-bar color="#FFEE58" app>
      <v-app-bar-nav-icon>
        <v-img alt="Heart Logo" width="60" contains src="@/assets/logo.png"/>
      </v-app-bar-nav-icon>
      <v-spacer></v-spacer>

      <div id="title">
        <v-toolbar-title>
          <b>Title</b>
        </v-toolbar-title>
      </div>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-menu left bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn icon v-bind="attrs" v-on="on">
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>

        <v-list>
          <v-list-item v-for="n in 5" :key="n" @click="() => {}">
            <v-list-item-title>Option {{ n }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

I've tried wrapping v-toolbar-title in h6. then adding h6 the #title section as well, but the title is still not changing size. I've also tried using px, %, and rem for the font size.

I assume that there is probably a size limit inside of an app-toolbar, but no matter which size I choose, it's still not changing.

• javascript
• html
• css
• vue.js
• vuetify.js

• Do you have a working preview of this? Have you checked definition priorities (CSS). – Mihail Minkov Commented Dec 11, 2020 at 19:49

2 Answers 2

You can create your own class and apply it to the <b> tag wrapping the title:

<b class="mytitle">Title</b>

.mytitle {
  font-size: 1.5rem !important;
}

Or use the existing toolbar title class and apply it to all toolbar titles:

.v-toolbar__title {
  font-size: 1.5rem !important;
}

The !important modifier is necessary

Although @Dan answer would work, I'd remend not to use !important rule without a particular need. You can achieve the same behavior by providing a more "strong" CSS selector. The easiest way to do it in your case would be to introduce scoped styles for that ponent.

Title

<style scoped>
  .mytitle {
    font-size: 1.5rem;
  }
</style>