How do I change a specific dropdown family and size?

[rlneub]

I have not been able to find this in any documentation or online.

Specifically I need a specific dropdown to have the font family as Lato and the size 1.2vw

I have spent over a day pulling my hair out on this.

I appreciate any help on this subject

[tugce.kucukoglu]

Hi,

Code: Select all

<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
 <template #value="slotProps">
  <div class="country-item country-item-value" v-if="slotProps.value">
    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
     <div class="name">{{slotProps.value.name}}</div>
  </div>
  <span v-else>
     {{slotProps.placeholder}}
  </span>
 </template>
 <template #option="slotProps">
   <div class="country-item">
     <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
    <div class="name">{{slotProps.option.name}}</div>
   </div>
 </template>
</Dropdown>

.name {
    font-family: ...;
}