JSFiddle - React, Tailwind, and code Playground

webfont DDL angular font switcher

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<div ng-controller="MyCtrl" class="container">

  <div class="dropdown">
    <button class="btn btn-default btn-xs dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 <i class="fa fa-font"></i>
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li ng-repeat="font in flist track by $index"><a ng-click="changeFont(font)" style="font-family:{{font}}">{{font}}</a></li>
    </ul>
  </div>

<!-- font as font.name for font in flist -->
  <div class="pull-right nav nav-inverse">
    <select ng-model="font" ng-options="font as font for font in flist" ng-change="change(font)"></select>
    <h3 style="font-family:{{selectedFont}}"><font  >Text Is</font></h3>

  </div>
  <div class="row"> face="{{selectedFont}}"
    <hr>
    <div style="font-family:{{selectedFont}}">
      TEST YOUR FONT HERE
    </div>


  </div>
</div>

CSS

body {
  color: black
}

JavaScript

var app = angular.module('myApp', []);

app.controller("MyCtrl", function($scope) {
  //var WEBFONTAPI;
  //WEBFONTAPI = "//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js";
  $scope.flist1 = ['Anton', 'Open Sans', 'Questrial', 'Droid Sans', 'Droid Serif', 'Oswald', 'Questrial', 'Paytone One', 'Seymour One', 'Alegreya Sans SC', 'Rum Raisin', 'Days One', 'Quattrocento Sans'];

  WebFont.load({
    google: {
      families: $scope.flist1
    }
  });

  // https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.27/webfontloader.js

  $scope.flist = $scope.flist1;
  $scope.selectedFont = '';
  $scope.change = function(option) {
    $scope.selectedFont = option; // option.name;
  };
  $scope.changeFont = function(option) {
    $scope.selectedFont = option;
  }
});