diff --git a/package-lock.json b/package-lock.json
index 519f01d..b7a1998 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "fatecharactersheet",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -8798,6 +8798,22 @@
         }
       }
     },
+    "font-picker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/font-picker/-/font-picker-2.2.1.tgz",
+      "integrity": "sha512-y+WmoTxrpHQB5cXzhETO3opVDvACq108InNV9oC6aLNObq1/FG5MW0N+/MgiY6vObnodNCRsqWJHyEarpRfaWw==",
+      "requires": {
+        "lodash.throttle": "^4.1.1"
+      }
+    },
+    "font-picker-vue": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/font-picker-vue/-/font-picker-vue-1.0.3.tgz",
+      "integrity": "sha512-cX3TxdszpjSmN18sKh4egPrkDFptCmSCVDSI4pV/kaBF2WDBpy8s9Fxb4SW4FShv5eIcRAVYWxj3hepfDnp1HA==",
+      "requires": {
+        "font-picker": "^2.0.6"
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
diff --git a/package.json b/package.json
index 451bec6..d63c4ee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fatecharactersheet",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Website for managing all things for Fate-based roleplaying games.",
   "main": "index.js",
   "scripts": {
@@ -51,6 +51,7 @@
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.17.0",
     "draggable-vue-directive": "^2.1.0",
+    "font-picker-vue": "^1.0.3",
     "interactjs": "^1.9.22",
     "jquery": "^3.5.1",
     "jquery-serializeobject": "^1.0.0",
diff --git a/src/components/characterprops.vue b/src/components/characterprops.vue
index e2d5489..d58e053 100644
--- a/src/components/characterprops.vue
+++ b/src/components/characterprops.vue
@@ -1,5 +1,6 @@
 <template>
-    <div v-if="characterData && isAuthenticated && isOwner">
+<div>
+    <div v-if="characterData && isAuthenticated && isOwner">      
         <ul class="nav nav-tabs" id="propertyTabs" role="tablist">
             <li class="nav-item">
                 <a class="nav-link active" id="character-tab" data-toggle="tab" href="#characterProperties" role="tab" aria-controls="character" aria-selected="true">Character Properties</a>
@@ -42,7 +43,7 @@
 
           <div v-if="isCustomizable" class="tab-pane fade" id="sheetProperties" role="tabpanel" aria-labelledby="profile-tab">
             <div class="d-flex flex-column flex-md-row">               
-              <div class="form-group flex-fill mr-2" v-if="characterData.template_id && selectedTemplate">
+              <div class="form-group col-12 col-md-6" v-if="characterData.template_id && appliedTemplate">
                 <label>Applied Template:</label>
                 <div>
                   {{GetTemplateName}}
@@ -50,32 +51,37 @@
                     {{GetTemplateDescription}}
                   </div>
                   <div class="small text-muted" v-if="SheetModifiedAfterTemplate">
-                    Changes have been made to this sheet after applying this template.
+                    Changes have been made to this sheet or the applied template has changed.
                   </div>
                 </div>
               </div>
-              <div class="form-group flex-fill">
+              <div class="form-group col-12 col-md 6 d-flex flex-column">
                 <label class='' for='template'>Find a Template:</label>
-                <autocomplete ref="templateAutocomplete"
-                    :search="searchTemplates"
-                    :debounce-time="500"
-                    placeholder="Find a template"
-                    aria-label="Find a template"       
-                    :get-result-value="getTemplateResultValue"
-                    @submit="selectTemplateResult"
-                    class="mr-1">
-                  <template #result="{ result, props }">
-                    <li v-bind="props">
-                        <div class="p-0 m-0 h6">
-                        {{result.name}}
-                        </div>
-                        <div class="small">
-                        {{result.description}}
-                        </div>
-                    </li>
-                  </template>
-                </autocomplete>
-                <input type="checkbox" class="mr-1 input-sm" ref="templateSearchMine" /><span>Search only my templates?</span>
+                <div class="d-flex">                  
+                  <autocomplete ref="templateAutocomplete"
+                      :search="searchTemplates"
+                      :debounce-time="500"
+                      placeholder="Find a template"
+                      aria-label="Find a template"       
+                      :get-result-value="getTemplateResultValue"
+                      @submit="selectTemplateResult"
+                      class="mr-1 flex-fill">
+                    <template #result="{ result, props }">
+                      <li v-bind="props">
+                          <div class="p-0 m-0 h6">
+                          {{result.name}}
+                          </div>
+                          <div class="small">
+                          {{result.description}}
+                          </div>
+                      </li>                    
+                    </template>                  
+                  </autocomplete>                
+                  <button type="button" class="btn btn-link" @click="clearTemplateSelection()"><i class="far fa-times-circle"></i></button>
+                </div>
+                <div>
+                  <input type="checkbox" class="mr-1 input-sm" ref="templateSearchMine" /><span>Search only my templates?</span>
+                </div>
                 <div class="d-flex">
                     <button type="button" class="btn btn-success btn-sm mr-1" data-toggle='modal' data-target='#modalSaveTemplate'>Save Template</button>
                     <button type="button" class="btn btn-primary btn-sm mr-1" v-if="template.id" @click="applyTemplate">Apply Template</button>
@@ -92,7 +98,12 @@
             <div class='form-group'>
                 <label class='' for='sheet_logo'>Template Logo Url:</label> <a :href="getImageSearchUrl('tv show logos')" target="_blank">[search]</a>
                 <input class='form-control' ref="sheet_logo" id='sheet_logo' name='sheet_logo' @change="updateTemplateLogo($event.target.value)" :value="exists(characterData.template, 'logo')" />
-            </div>    
+            </div>   
+
+            <div class='form-group'>
+                <label class='' for='sheet_logo'>Template Font:</label>
+                <font-picker :api-key="'AIzaSyBPXSM04gZ5XajTtMnXr_z83loTBJ7qgDA'" :options="fontPickerOptions" :active-font="GetFont" @change="applyFont"></font-picker> 
+            </div>              
 
             <!-- delete template confirmation modal-->
             <div class="modal fade" id="modalSaveTemplate" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
@@ -129,9 +140,13 @@
                 </div>
             </div>           
           </div>
-
         </div>       
     </div>
+    <div v-else style="visibility:hidden">
+      <!-- need this to properly render selected fonts -->      
+      <font-picker :api-key="'AIzaSyBPXSM04gZ5XajTtMnXr_z83loTBJ7qgDA'" :options="fontPickerOptions" :active-font="GetFont" @change="applyFont"></font-picker>
+    </div>
+</div>
 </template>
 
 <script>
@@ -142,6 +157,7 @@ import Autocomplete from '@trevoreyre/autocomplete-vue';
 import bootbox from 'bootbox';
 import CommonService from "./../assets/js/commonService";
 import DbService from '../assets/js/dbService';
+import FontPicker from 'font-picker-vue';
 
 let commonSvc = null;
 let dbSvc = null;
@@ -160,6 +176,7 @@ export default {
     'swatches-picker': Compact,
     VueTagsInput,
     Autocomplete,
+    'font-picker': FontPicker
   },
   data() {
       return {
@@ -168,7 +185,13 @@ export default {
             name: "",
             description: "",
         },
-        selectedTemplate: null,
+        appliedTemplate: null,
+        fontPickerOptions: {
+          name: "main",  
+          variants: ['regular', '700'],
+          //categories: ['sans-serif', 'serif', 'display'],
+          limit: 200,          
+        }
       }
   },
   computed: {
@@ -176,20 +199,26 @@ export default {
       'isAuthenticated',
       'userId',
     ]),
-    async GetSelectedTemplate() {      
-      if (this.characterData.template_id) {
+    async GetAppliedTemplate() {      
+      if (this.characterData.template_id && !this.appliedTemplate) {       
         let template = await dbSvc.GetObject(this.characterData.template_id);
         if (template) {
-          this.selectedTemplate = template;
-          return;
+          this.appliedTemplate = template;           
         }
       }
-      this.selectedTemplate = null;
     },
-    SheetModifiedAfterTemplate() {      
-      return JSON.stringify(this.selectedTemplate.template) !== JSON.stringify(this.characterData.template);
+    GetFont() {
+      if (this.characterData.template && this.characterData.template.fontFamily) {
+        return this.characterData.template.fontFamily;
+      }
+      else {
+        return "Open Sans";
+      }      
+    },
+    SheetModifiedAfterTemplate() {
+      return JSON.stringify(this.appliedTemplate.template) !== JSON.stringify(this.characterData.template);
     },
-    GetHighConcept() {        
+    GetHighConcept() {
         let concept = "character portraits";
 
         if (this.characterData.aspects)
@@ -210,10 +239,10 @@ export default {
       return this.template && this.template.owner_id == this.userId;
     }, 
     GetTemplateName() {      
-      return this.selectedTemplate ? this.selectedTemplate.name : 'None';
+      return this.appliedTemplate ? this.appliedTemplate.name : 'None';
     },
     GetTemplateDescription() {
-      return this.selectedTemplate ? this.selectedTemplate.description : '';
+      return this.characterData.template ? this.characterData.template.description : '';
     },
     getTemplateColor() {
       if (this.characterData.template) {        
@@ -229,7 +258,7 @@ export default {
         commonSvc = new CommonService(this.$root);
         dbSvc = new DbService(this.$root); 
 
-        await this.GetSelectedTemplate;
+        await this.GetAppliedTemplate;
 
         $('#modalSaveTemplate').on('hidden.bs.modal', function (e) {
             let form = document.getElementById('formTemplate');
@@ -249,12 +278,7 @@ export default {
       this.characterData.tags = newTags;     
     }, 
      /* template search */
-    async searchTemplates(query) {
-      this.template = {
-        name: "",
-        description: "",
-      }
-
+    async searchTemplates(query) {     
       return new Promise( async (resolve) => {                       
         let ownerId = null;
         if (this.$refs.templateSearchMine.checked) {
@@ -290,11 +314,7 @@ export default {
     },
     applyTemplate() {
       bootbox.confirm("Are you sure you want to use this template? This will reset any custom labels.", async (result) => {        
-        if (result) {      
-          //clear out the old template
-          //this.characterData.template_id = null;
-          //this.characterData.template = null;
-
+        if (result) {               
           //remove any existing labels so the new template labels/placeholder take effect
           const removeLabels = (obj) => {
             if (!obj) return;
@@ -312,7 +332,7 @@ export default {
           //assign the new template to this character
           this.$set(this.characterData, "template_id", this.template.id);
           this.$set(this.characterData, "template", this.template.template);
-          this.selectedTemplate = this.template;
+          this.appliedTemplate = this.template;
         }
       })
     },
@@ -355,26 +375,40 @@ export default {
 
         //convert the placeholder values to the custom label names
         let charTemplate = commonSvc.DeepCopy(this.characterData.template);
-        for (const [key, value] of Object.entries(charTemplate)) {
-          console.log(`${key}: ${value}`);
-          if (Array.isArray(value)) {
-            value.forEach( (item) => {
-              let labelVal = commonSvc.getVal(this.characterData, item.label, "");
-              item.placeholder = labelVal ? labelVal : item.placeholder;
-            });
+
+        let parseTemplate = (thingToParse) => {
+          if (typeof(thingToParse) == "object")
+          {
+            for (const [key, value] of Object.entries(thingToParse)) {
+              if (Array.isArray(value)) {
+                value.forEach( (item) => {
+                  let labelVal = commonSvc.getVal(this.characterData, item.label, "");
+                  item.placeholder = labelVal ? labelVal : item.placeholder;
+
+                  parseTemplate(item);
+                });              
+              }
+            }
           }
         }
+        parseTemplate(charTemplate);
+
+        //we are copying the template from the existing character 
+        //changes so we need to pickup the updated name/description
+        charTemplate.name = this.template.name;
+        charTemplate.description = this.template.description;
         template.template = charTemplate;
        
-        let response = await dbSvc.SaveObject(template);            
-        if (response) {              
+        let response = await dbSvc.SaveObject(template);
+        if (response) {
           commonSvc.Notify('Template saved.', 'success');
           $('#modalSaveTemplate').modal('hide');
 
           //apply the template to this character
           this.$set(this.characterData, "template_id", template.id);
-          this.selectedTemplate = template;
-          this.$emit('save-character');
+          this.$set(this.characterData, "template", charTemplate);
+          this.appliedTemplate = template;
+          this.$emit('save-character');          
         }            
       }
     },
@@ -394,7 +428,17 @@ export default {
         if (query == "concept") {
             query = this.GetHighConcept;
         }
-        return commonSvc.GetImageSearchUrl(query);       
+        return commonSvc.GetImageSearchUrl(query);
+    },
+    applyFont(font) {      
+      this.$set(this.characterData.template, "fontFamily", font.family);
+    },
+    clearTemplateSelection() {
+      this.$refs.templateAutocomplete.value = '';
+      this.template = {
+            name: "",
+            description: "",
+        }
     }
   }
 }
diff --git a/src/components/input-stuntextra.vue b/src/components/input-stuntextra.vue
index 381a083..a6e6304 100644
--- a/src/components/input-stuntextra.vue
+++ b/src/components/input-stuntextra.vue
@@ -12,7 +12,7 @@
       </div>
     </div>
 
-    <div class="form-group">    
+    <div class="form-group stuntText">    
       <textarea v-if="stuntEdit || isNewCharacter" class="form-control" :id="item" :name="item" :rows="rows" :placeholder="header" @change="$parent.setVal(item,  $event.target.value)" :value="$parent.getVal(item)"></textarea>
       <VueShowdown v-if="!stuntEdit && !isNewCharacter" class="h-auto p-2" :class="{border: border}" :options="vueShowdownOpts" :style="{ 'min-height': minHeight + 'px' }" :markdown="getMarkupVal(item)" />
     </div>  
diff --git a/src/index.js b/src/index.js
index aa4fa72..eb57d6e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,6 +11,7 @@ import 'vue-datetime/dist/vue-datetime.css'
 import VueShowdown, { showdown } from 'vue-showdown'
 import App from './App'
 import router from './router'
+
 import 'whatwg-fetch'
 import './assets/site.scss'
 
diff --git a/src/sheets/fate-anything.vue b/src/sheets/fate-anything.vue
index 4440072..444b1f0 100644
--- a/src/sheets/fate-anything.vue
+++ b/src/sheets/fate-anything.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="sheet">
+<div class="sheet apply-font-main">
 	<div class="row">		
 		<div class="col-sm-6 text-center order-md-2 text-md-right pb-2 pb-md-0 text-right d-md-flex">
 			<div class="mr-auto d-none d-md-inline"></div>
@@ -347,16 +347,13 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-	@import url('https://fonts.googleapis.com/css?family=Open+Sans:800');
-
+<style lang="scss" scoped>	
 	.fate-logo {
 		margin-top: -27px;
 		max-height: 80px;
 	}
 
-	/deep/ .fate-header {
-		font-family: 'Open Sans', sans-serif;
+	/deep/ .fate-header {		
 		text-transform: uppercase;
 		background-color: black;
 		color: white;
@@ -369,7 +366,6 @@ export default {
 
 
 	/deep/ .col-form-label {
-		font-family: 'Open Sans', sans-serif;
 		text-transform: uppercase;
 		font-size: 22px;
 		font-weight: 700;
@@ -394,8 +390,7 @@ export default {
 		width: 38px;
 	}
 
-	/deep/ .fate-conditions label {
-		font-family: 'IM Fell English', sans-serif;
+	/deep/ .fate-conditions label {		
 		text-transform: uppercase;
 		font-size: 30px;
 		font-weight: 700;
@@ -413,10 +408,6 @@ export default {
 	}
 
 	/* IMAGE STYLES */	
-	textarea {
-		border: 0 !important;
-	}
-
 	#stunts {
 		height: 500px;		
 		min-height: 500px;
@@ -465,13 +456,15 @@ export default {
 	}
 
 	/deep/ textarea {	
-		font-size: 17px;
+		font-size: 18px;
+		border: 0 !important;
 	}
 
 	/deep/ .inputAspectLabel, 
 	/deep/ .inputStressLabel,
-	/deep/ .inputConsequenceLabel {
-		font-size: 16px !important;		
+	/deep/ .inputConsequenceLabel,
+	/deep/ .stuntText > * {
+		font-size: 18px !important;		
 	}
 
 </style>