Compare Web safe fonts

by jfmdev

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myController" class="container">
        <div class="row">
            <input type="text" ng-model="text" />
        </div>
        <br>
        <div class="row">
            <div class="col-md-3 col-sm-4" style="font-family: Arial">{{ text }}</div>
            <div class="col-md-3 col-sm-4" style="font-family: Verdana">{{ text }}</div>
            <div class="col-md-3 col-sm-4" style="font-family: Impact">{{ text }}</div>
        </div>
    </div>
</div>

JavaScript

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

myApp.controller('myController', function($scope) {
    $scope.text = "Some text";
    $scope.bold = false;
    $scope.italic = false;
});