This is a live demo showing how to use @mikk3lro/mc-fontpicker for Vue.js.
See github repo or npm package for installation instructions.
By default the fontpicker is only a picker. The selected font is not loaded.
Current value: {{ font1 }}
<McFontpicker v-model="font1" />
Current value: <span :style="'font-family: ' + font1">{{ font1 }}</span>
On mount and when a new font is selected the
fontVariants event is triggered. The main difference from the
input event is that it provides details about available
variants of the current font.
fontVariants:
{{ fontVariants }}
<McFontpicker @fontVariants="i => (fontVariants = i)" />
fontVariants: <pre>{{ fontVariants }}</pre>
Customize the message when autocomplete yields no results using the
no-matches-prop.
<McFontpicker no-matches="I've got nothing" />
Automatically load fonts by setting the auto-load-prop.
Current value: {{ font2 }}
<McFontpicker auto-load v-model="font2" />
Current value: <span :style="'font-family: ' + font2">{{ font2 }}</span>
Manually load fonts by setting the load-fonts-prop.
Several fonts may be loaded by comma-separating the names.
<McFontpicker :load-fonts="manuallyLoadFonts1" /> <button @click="manuallyLoadFonts1 = 'Rubik Beastly'">One font</button> <button @click="manuallyLoadFonts1 = 'Pacifico, Teko'">Two fonts</button>
By default only the four most common variants (regular, bold, italic and
bold italic) are loaded. You can make sure all variants are loaded by
setting the load-all-variants prop.
Current value: {{ font3 }}
<McFontpicker auto-load load-all-variants v-model="font3" />
Current value: <span :style="'font-family: ' + font3">{{ font3 }}</span>
The load-fonts-prop can also accept an array of objects
specifying fonts and variants. Example:
[
{
font: "Open Sans",
variants: [
{ italic: false, weight: 400 },
{ italic: true, weight: 400 },
{ italic: false, weight: 700 },
{ italic: true, weight: 700 },
]
},
{
font: "Rancho",
variants: [
{ italic: false, weight: 400 },
]
}
]
Note that many fonts exist only in a few variants, so make sure the
variants you request actually exist. For instance by filtering the values
emitted from fontVariants events.
One use case could be loading only one variant - in this example whichever is first (least bold):
Current value: {{ thinnestFont.font }}
<McFontpicker
:load-fonts="[thinnestFont]"
@fontVariants="
v => (thinnestFont = {
font: v.font,
variants: v.variants.slice(0, 1),
})
"
/>
Current value:
<span
:style="{
fontFamily: thinnestFont.font,
fontWeight: thinnestFont.variants[0].weight,
}"
>
{{ thinnestFont.font }}
</span>
Set the loader-only-prop to completely hide the font picker
if you just need to load one or more fonts.
<McFontpicker :load-fonts="manuallyLoadFonts2" loader-only /> <button @click="manuallyLoadFonts2 = 'Rancho'">Rancho</button> <button @click="manuallyLoadFonts2 = 'Smooch, Risque'">Two fonts</button>
You can limit the included google fonts using the
google-fonts-prop.
You can supply font names as an array or as a comma-seperated string.
Do note that the previews are crazy inefficient if you only use a few fonts - in that case you are probably better off recompiling all previews - which is beyond the scope of this document at the moment.
<McFontpicker :google-fonts="['Tinos', 'Open Sans']" />
You can filter the fonts by category using the
font-categories-prop.
You can supply category names as an array or as a comma-seperated string.
<select v-model="fontCategories">
<option value="all">All</option>
<option value="serif">Serif</option>
<option value="sans-serif">Sans-serif</option>
<option value="display">Display</option>
<option value="handwriting">Handwriting</option>
<option value="monospace">Monospace</option>
<option value="display, serif">display, serif</option>
<option :value="['display', 'handwriting']">
['display', 'handwriting']
</option>
</select>
<McFontpicker :font-categories="fontCategories" />
Manually add fonts using the local-fonts-prop.
You need to provide your own styling of the previews, how to create this is again beyond the scope of this document for now. Local fonts are also not auto-loaded, so depending on use case you may need to handle that too.
Current value: {{ manuallyAddFontValue }}
<McFontpicker
v-model="manuallyAddFontValue"
:google-fonts="['Tinos', 'Open Sans']"
:local-fonts="[
{
name: 'BickleyScript',
variants: [{ italic: false, weight: 400 }, '1,400' ],
},
]"
/>
Current value:
<span
:style="{
fontFamily: manuallyAddFontValue,
}"
>
{{ manuallyAddFontValue }}
</span>