Discover how to build a user-friendly font picker in Angular using PrimeNG and Google Fonts. This guide provides a complete walkthrough, from setting up the project to creating an intuitive font selection interface.
Step 1: Set Up the Angular Project
The first step is to create a new Angular project. If you’re new to Angular, this involves running a command to scaffold your application. Here’s how:
ng new angular-font-pickerOnce your project is ready, install PrimeNG and PrimeIcons. Since we’re using Angular 18, install PrimeNG v18:
npm install primeng@18 @primeng/themes primeiconsIf you’re unfamiliar with PrimeNG, it’s a popular UI library for Angular applications. See the official PrimeNG setup page for details.
Step 2: Add Google Fonts
Create global-data.ts in src/app to store a list of font names. Keeping fonts in a separate file keeps things organized and easy to update:
export const GoogleFonts = [
"ABeeZee", "Abel", "Abril Fatface", "Aclonica", "Acme", "Actor", "Adamina", "Advent Pro", "Aguafina Script",
// ...add more font names as needed
];Step 3: Build the Angular Component
The AppComponent filters the fonts, loads Google Fonts on demand, and binds the selected font to the UI.
It uses TypeScript for logic, PrimeNG for the dropdown, and Google Fonts for dynamic loading.
<div class="flex align-items-center justify-content-center center-div">
<p-floatlabel variant="on">
<p-select
[options]="filteredFonts"
[(ngModel)]="baseFont"
optionLabel="name"
[filter]="true"
filterBy="name"
[showClear]="false"
class="w-full"
(onFilter)="filterFonts($event)">
<ng-template let-font #item>
<div [style.font-family]="font.name">{{ font.name || baseFont.name }}</div>
</ng-template>
<ng-template #selectedItem let-selectedOption>
<div [style.font-family]="selectedOption.name">{{ selectedOption.name || baseFont.name }}</div>
</ng-template>
</p-select>
<label>Select Font</label>
</p-floatlabel>
</div>
Step 4: Create the HTML Template
We’ll use PrimeNG’s p-select component for the dropdown. Users can filter fonts, preview in their style,
and select a font.
<div class="flex align-items-center justify-content-center center-div">
<p-floatlabel variant="on">
<p-select
[options]="filteredFonts"
[(ngModel)]="baseFont"
optionLabel="name"
[filter]="true"
filterBy="name"
[showClear]="false"
class="w-full"
(onFilter)="filterFonts($event)"
>
<ng-template let-font #item>
<div [style.font-family]="font.name">{{ font.name || baseFont.name }}</div>
</ng-template>
<ng-template #selectedItem let-selectedOption>
<div [style.font-family]="selectedOption.name">{{ selectedOption.name || baseFont.name }}</div>
</ng-template>
</p-select>
<label>Select Font</label>
</p-floatlabel>
</div>The dropdown preview matches the actual font styles for a seamless UX.
Additional Resources
With this implementation, you have a functional Angular font picker that dynamically loads Google Fonts — perfect for text editors and design tools.
Explore or contribute on GitHub: mmlTools/angular-font-picker.