/ angular

Preview a Google Font

Here's a little Angular Component to preview a Google Font.

import { Input, Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

    selector: 'font-preview',
    styles: [
        '.preview { margin:4px; }',
        '.title { font-size: 18pt; color: #673ab7;}',
        '.large { font-size: 14pt;}',
        '.normal { font-size: 10pt;}'

    template: `
        <div *ngIf="fontFamily; else noPreview">
            <link [href]="fontLink" rel="stylesheet">

            <div class="preview" [style.font-family]="fontFamily">
                <div class="title">{{fontFamily}}</div>
                <div class="normal">
                <div class="large">So died these men as became Athenians. You, their survivors, must determine to have as unfaltering
                a resolution in the field, though you may pray that it may have a happier issue.</div>
                <div class="normal">And not contented with ideas derived only from words of the advantages which are bound up with the
                defense of your country, though these would furnish a valuable text to a speaker even before an audience so alive to
                them as the present, you must yourselves realize the power of Athens, and feed your eyes upon her from day to day, till
                love of her fills your hearts; and then, when all her greatness shall break upon you, you must reflect that it was by
                courage, sense of duty, and a keen feeling of honor in action that men were enabled to win all this, and that no
                personal failure in an enterprise could make them consent to deprive their country of their valor, but they laid it at
                her feet as the most glorious contribution that they could offer.</div>
        <ng-template #noPreview>
            Select a font to preview
export class FontPreviewComponent {

    fontFamily: string;

        public sanitizer: DomSanitizer
    ) {}

    get fontLink(): SafeResourceUrl {
        if (this.fontFamily) {
            return this.sanitizer.bypassSecurityTrustResourceUrl('https://fonts.googleapis.com/css?family=' + this.fontFamily.replace(' ', '+'));

        return null;

This renders like so:

Feel free to use as you will :)