FEATURE: Added support for changing the font.

DynamicBibleIonic/src/app/app.scss

@@ -34,4 +34,8 @@ ion-card .title {
     .button-wp, .button-md, .button-ios {
         margin-right: -6px;
     }
+}
+
+html {
+    --card-font: Roboto, Helvetica, Arial, sans-serif;
 }

DynamicBibleIonic/src/components/error-message/error-message.scss

@@ -1,3 +1,3 @@
-err-message {
+error-message {
-
+    font-family: var(--card-font);
 }

DynamicBibleIonic/src/components/passage/passage.scss

@@ -3,6 +3,8 @@ passage {
         user-select: text !important;
         cursor: pointer;
     }
+
+    font-family: var(--card-font);
 }
 
 passage .button {

DynamicBibleIonic/src/components/strongs-modal/strongs-modal.scss

@@ -1,4 +1,5 @@
 strongs-modal {
+    font-family: var(--card-font);
     a {
         cursor: pointer !important;
         color: black;

DynamicBibleIonic/src/components/strongs/strongs.scss

@@ -7,6 +7,8 @@
 }
 
 strongs {
+    font-family: var(--card-font);
+    
     ion-scroll {
         height: 250px;
     }

DynamicBibleIonic/src/components/words/words.scss

@@ -1,4 +1,5 @@
 words {
+    font-family: var(--card-font);
     .button {
         color: #632761;
     }

DynamicBibleIonic/src/pages/search/search.html

@@ -65,22 +65,32 @@
         <ion-list>
             <ion-item>
                 <ion-range min="6" max="20" step="1" snaps="true" [(ngModel)]="this.profileService.profile().font_size" (ionChange)="textSizeChanged()">
-                    <ion-label range-left class="small-text">A</ion-label>
+                    <ion-label range-left class="small-text">a</ion-label>
                     <ion-label range-right>A</ion-label>
                 </ion-range>
             </ion-item>
+            <ion-item>
+                    <ion-label>Font Family</ion-label>
+                    <ion-select [(ngModel)]="this.profileService.profile().font_family" (ionChange)="fontFamilyChanged()">
+                        <ion-option value="Roboto, Helvetica, Arial, sans-serif">Sans Serif</ion-option>
+                        <ion-option value="'Times New Roman', serif">Times</ion-option>
+                        <ion-option value="Georgia, serif">Georgia</ion-option>
+                        <ion-option value="Merriweather, serif">Merriweather</ion-option>
+                        <ion-option value="Consolas, monotype">Monospaced</ion-option>
+                    </ion-select>
+                </ion-item>
         </ion-list>
-
+        
         <ion-list-header><ion-icon name="log-in" item-left></ion-icon>Login/Logout</ion-list-header>
 
         <ng-template [ngIf]="!profileService.currentUser()">
             <ion-item center>
-                <button ion-button full (click)="profileService.authenticate()">Login With Google</button>
+                <button ion-button block (click)="profileService.authenticate()">Login With Google</button>
             </ion-item>
         </ng-template>
         <ng-template [ngIf]="profileService.currentUser()">
             <ion-item center>
-                <button ion-button full (click)="profileService.logout()">Logout</button>
+                <button ion-button block (click)="profileService.logout()">Logout</button>
             </ion-item>
         </ng-template>
     </ion-content>

DynamicBibleIonic/src/pages/search/search.scss

@@ -30,7 +30,6 @@ body {
         font-size: 1.2em;
         font-weight: bold;
     }
-    font-family: "Roboto", "Arial", "Helvetica", sans-serif;
     max-width: 800px;
     margin: 12px auto;
 }

DynamicBibleIonic/src/pages/search/search.ts

@@ -148,7 +148,11 @@ export class SearchPage implements OnInit
         this.profileService.textSizeChanged();
         this.profileService.localSave();
     }
-
+    fontFamilyChanged()
+    {
+        this.profileService.fontFamilyChanged();
+        this.profileService.localSave();
+    }
     actionsMenu()
     {
         this.menu.open('actions');

DynamicBibleIonic/src/pages/settings/settings.html

@@ -54,11 +54,21 @@
         <ion-list-header><ion-icon name="text" item-left></ion-icon>Adjust Text</ion-list-header>
         <ion-list>
             <ion-item>
-                <ion-range min="6" max="20" step="1" snaps="true" [(ngModel)]="profileService.profile().font_size" (ionChange)="textSizeChanged()">
+                <ion-range min="6" max="20" step="1" snaps="true" [(ngModel)]="this.profileService.profile().font_size" (ionChange)="textSizeChanged()">
-                    <ion-label range-left class="small-text">A</ion-label>
+                    <ion-label range-left class="small-text">a</ion-label>
                     <ion-label range-right>A</ion-label>
                 </ion-range>
             </ion-item>
+            <ion-item>
+                    <ion-label>Font Family</ion-label>
+                    <ion-select [(ngModel)]="this.profileService.profile().font_family" (ionChange)="fontFamilyChanged()">
+                        <ion-option value="Roboto, Helvetica, Arial, sans-serif">Sans Serif</ion-option>
+                        <ion-option value="'Times New Roman', serif">Times</ion-option>
+                        <ion-option value="Georgia, serif">Georgia</ion-option>
+                        <ion-option value="Merriweather, serif">Merriweather</ion-option>
+                        <ion-option value="Consolas, monotype">Monospaced</ion-option>
+                    </ion-select>
+                </ion-item>
         </ion-list>
 
         <ion-list-header><ion-icon name="log-in" item-left></ion-icon>Login/Logout</ion-list-header>

DynamicBibleIonic/src/pages/settings/settings.ts

@@ -23,6 +23,11 @@ export class SettingsPage
         this.profileService.localSave();
     }
 
+    fontFamilyChanged()
+    {
+        this.profileService.fontFamilyChanged();
+        this.profileService.localSave();
+    }
     reset()
     {
         this.profileService.reset()

DynamicBibleIonic/src/services/profile-service.ts

@@ -263,6 +263,7 @@ export class ProfileService
                 user[k] = t[k];
 
         this.textSizeChanged();
+        this.fontFamilyChanged();
         return updated;
     }
 
@@ -305,12 +306,19 @@ export class ProfileService
         $('html').css('font-size', this.profile().font_size + 'px');
     }
 
+    fontFamilyChanged()
+    {
+        document.querySelector('html').style.cssText = '--card-font: '+this.profile().font_family;
+        this.textSizeChanged();
+    }
+
     static createDefaultUser(): User
     {
         return {
             username: DEFAULT_USER_NAME,
             uid: null,
             font_size: 10,
+            font_family: 'roboto, helvetica, arial, sans-serif',
             saved_pages: [],
             items: [],
 
@@ -344,6 +352,7 @@ export type User = {
     append_to_bottom: boolean,
     insert_next_to_item: boolean,
     font_size: number,
+    font_family: string,
     saved_pages: SavedPage[],
     verses_on_new_line: boolean,
     show_verse_numbers: boolean,