feat: Google font selection

google_fonts.json with a decent selection of fonts

frappe/data/google_fonts.json

@@ -0,0 +1,56 @@
+[
+	"Alegreya Sans",
+	"Alegreya",
+	"Andada Pro",
+	"Anton",
+	"Archivo Narrow",
+	"Archivo",
+	"BioRhyme",
+	"Cardo",
+	"Chivo",
+	"Cormorant",
+	"Crimson Text",
+	"DM Sans",
+	"Eczar",
+	"Encode Sans",
+	"Epilogue ",
+	"Fira Sans",
+	"Hahmlet",
+	"IBM Plex Sans",
+	"Inconsolata",
+	"Inknut Antiqua",
+	"Inter",
+	"JetBrains Mono",
+	"Karla",
+	"Lato",
+	"Libre Baskerville",
+	"Libre Franklin",
+	"Lora",
+	"Manrope",
+	"Merriweather",
+	"Montserrat",
+	"Neuton",
+	"Nunito",
+	"Old Standard TT",
+	"Open Sans",
+	"Oswald",
+	"Oxygen",
+	"Playfair Display",
+	"Poppins",
+	"Proza Libre",
+	"PT Sans",
+	"PT Serif",
+	"Raleway",
+	"Roboto Slab",
+	"Roboto",
+	"Rubik",
+	"Sora",
+	"Source Sans Pro",
+	"Source Serif Pro",
+	"Space Grotesk",
+	"Space Mono",
+	"Spectral",
+	"Syne",
+	"Work Sans"
+]
+

frappe/printing/page/print_format_builder_beta/print_format_builder_beta.py

@@ -0,0 +1,15 @@
+# Copyright (c) 2021, Frappe Technologies Pvt. Ltd. and Contributors
+# MIT License. See license.txt
+
+from __future__ import unicode_literals
+import frappe
+
+
+@frappe.whitelist()
+def get_google_fonts():
+	return frappe.cache().get_value("google_fonts", generator=_get_google_fonts)
+
+
+def _get_google_fonts():
+	file_path = frappe.get_app_path("frappe", "data", "google_fonts.json")
+	return frappe.parse_json(frappe.read_file(file_path))

frappe/public/js/print_format_builder/Preview.vue

@@ -19,7 +19,7 @@
 				<button
 					v-if="url"
 					class="ml-3 btn btn-default btn-sm btn-new-tab"
-					@click="$refs.iframe.contentWindow.location.reload()"
+					@click="refresh"
 				>
 					{{ __("Refresh") }}
 				</button>
@@ -79,8 +79,14 @@ export default {
 		this.get_default_docname().then(
 			docname => docname && this.doc_select.set_value(docname)
 		);
+		this.$store.$on("after_save", () => {
+			this.refresh();
+		});
 	},
 	methods: {
+		refresh() {
+			this.$refs.iframe.contentWindow.location.reload();
+		},
 		get_default_docname() {
 			return frappe.db.get_list(this.doctype, { limit: 1 }).then(doc => {
 				return doc.length > 0 ? doc[0].name : null;

frappe/public/js/print_format_builder/PrintFormatControls.vue

@@ -39,16 +39,17 @@
 				<div class="form-group">
 					<div class="control-input-wrapper">
 						<div class="control-input">
-							<input
-								type="text"
+							<select
 								class="form-control form-control-sm"
-								:placeholder="__('Roboto, Lato, Merriweather')"
-								:value="print_format.font"
-								@change="
-									e =>
-										(print_format.font = e.target.value.trim())
-								"
-							/>
+								v-model="print_format.font"
+							>
+								<option
+									v-for="font in google_fonts"
+									:value="font"
+								>
+									{{ font }}
+								</option>
+							</select>
 						</div>
 					</div>
 				</div>
@@ -133,12 +134,23 @@ export default {
 	mixins: [storeMixin],
 	data() {
 		return {
-			search_text: ""
+			search_text: "",
+			google_fonts: []
 		};
 	},
 	components: {
 		draggable
 	},
+	mounted() {
+		let method =
+			"frappe.printing.page.print_format_builder_beta.print_format_builder_beta.get_google_fonts";
+		frappe.call(method).then(r => {
+			this.google_fonts = r.message || [];
+			if (!this.google_fonts.includes(this.print_format.font)) {
+				this.google_fonts.push(this.print_format.font);
+			}
+		});
+	},
 	methods: {
 		update_margin(fieldname, value) {
 			value = parseFloat(value);

frappe/public/js/print_format_builder/store.js

@@ -89,7 +89,7 @@ export function getStore(print_format_name) {
 													"fieldtype",
 													"options",
 													"width",
-													"field_template",
+													"field_template"
 												]);
 											}
 										);
@@ -101,7 +101,7 @@ export function getStore(print_format_name) {
 										"options",
 										"table_columns",
 										"html",
-										"field_template",
+										"field_template"
 									]);
 								});
 							return column;
@@ -125,7 +125,10 @@ export function getStore(print_format_name) {
 						}
 					})
 					.then(() => this.fetch())
-					.always(() => frappe.dom.unfreeze());
+					.always(() => {
+						frappe.dom.unfreeze();
+						this.$emit("after_save");
+					});
 			},
 			reset_changes() {
 				this.fetch();
@@ -143,9 +146,11 @@ export function getStore(print_format_name) {
 				return create_default_layout(this.meta, this.print_format);
 			},
 			change_letterhead(letterhead) {
-				return frappe.db.get_doc("Letter Head", letterhead).then(doc => {
-					this.letterhead = doc;
-				});
+				return frappe.db
+					.get_doc("Letter Head", letterhead)
+					.then(doc => {
+						this.letterhead = doc;
+					});
 			}
 		}
 	};