fonts as snippets

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,9 +1,12 @@
 @import (less) './client/icons/customIcons.less';
+@import (less) '././././themes/fonts/5e/fonts.less';
+
 .snippetBar {
 	@menuHeight : 25px;
 	position: relative;
 	height: @menuHeight;
 	background-color: #ddd;
+
 	.editors {
 		position: absolute;
 		display: flex;
@@ -11,73 +14,92 @@
 		right: 0px;
 		height: @menuHeight;
 		justify-content: space-between;
+
 		&>div {
 			height: @menuHeight;
 			width: @menuHeight;
 			cursor: pointer;
 			line-height: @menuHeight;
 			text-align: center;
-			&:hover,&.selected{
+
+			&:hover,
+			&.selected {
 				background-color: #999;
 			}
+
 			&.text {
 				.tooltipLeft('Brew Editor');
 			}
+
 			&.style {
 				.tooltipLeft('Style Editor');
 			}
+
 			&.meta {
 				.tooltipLeft('Properties');
 			}
+
 			&.undo {
 				.tooltipLeft('Undo');
 				font-size: 0.75em;
 				color: grey;
+
 				&.active {
 					color: black;
 				}
 			}
+
 			&.redo {
 				.tooltipLeft('Redo');
 				font-size: 0.75em;
 				color: grey;
+
 				&.active {
 					color: black;
 				}
 			}
+
 			&.foldAll {
 				.tooltipLeft('Fold All');
 				font-size: 0.75em;
 				color: grey;
+
 				&.active {
 					color: black;
 				}
 			}
+
 			&.unfoldAll {
 				.tooltipLeft('Unfold All');
 				font-size: 0.75em;
 				color: grey;
+
 				&.active {
 					color: black;
 				}
 			}
+
 			&.editorTheme {
 				.tooltipLeft('Editor Themes');
 				font-size: 0.75em;
 				color: black;
+
 				&.active {
 					color: white;
 					background-color: black;
 				}
 			}
+
 			&.divider {
 				background: linear-gradient(#000, #000) no-repeat center/1px 100%;
 				width: 5px;
+
 				&:hover {
 					background-color: inherit;
 				}
 			}
 		}
+
 		.themeSelector {
 			position: absolute;
 			left: -65px;
@@ -88,6 +110,7 @@
 			border-radius: 5px;
 		}
 	}
+
 	.snippetBarButton {
 		height: @menuHeight;
 		line-height: @menuHeight;
@@ -97,15 +120,41 @@
 		font-size: 0.625em;
 		text-transform: uppercase;
 		cursor: pointer;
-		&:hover, &.selected{
+
+		&:hover,
+		&.selected {
 			background-color: #999;
 		}
+
 		i {
 			vertical-align: middle;
 			margin-right: 3px;
 			font-size: 1.4em;
 		}
+		/* Fonts */
+		& i {
+			&.OpenSans+span {font-family: 'OpenSans';}
+			&.CodeBold+span {font-family: 'CodeBold';}
+			&.CodeLight+span {font-family: 'CodeLight';}
+			&.ScalySansRemake+span {font-family: 'ScalySansRemake';}
+			&.BookInsanityRemake+span {font-family: 'BookInsanityRemake';}
+			&.MrEavesRemake+span {font-family: 'MrEavesRemake';}
+			&.SolberaImitationRemake+span {font-family: 'SolberaImitationRemake';}
+			&.ScalySansSmallCapsRemake+span {font-family: 'ScalySansSmallCapsRemake';}
+			&.WalterTurncoat+span {font-family: 'WalterTurncoat';}
+			&.Lato+span {font-family: 'Lato';}
+			&.Courier+span {font-family: 'Courier';}
+			&.NodestoCapsCondensed+span {font-family: 'NodestoCapsCondensed';}
+			&.Overpass+span {font-family: 'Overpass';}
+			&.Davek+span {font-family: 'Davek';}
+			&.Iokharic+span {font-family: 'Iokharic';}
+			&.Rellanic+span {font-family: 'Rellanic';}
+			&.TimesNewRoman+span {font-family: 'Times New Roman';}
+
+			&:is(.OpenSans,.CodeBold,.CodeLight,.ScalySansRemake,.BookInsanityRemake,.MrEavesRemake,.SolberaImitationRemake,.ScalySansSmallCapsRemake,.WalterTurncoat,.Lato,.Courier,.NodestoCapsCondensed,.Overpass,.Davek,.Iokharic,.Rellanic,.TimesNewRoman) { font-size:12px}
 		}
+	}
+
 	.toggleMeta {
 		position: absolute;
 		top: 0px;
@@ -113,13 +162,16 @@
 		border-left: 1px solid black;
 		.tooltipLeft("Edit Brew Properties");
 	}
+
 	.snippetGroup {
 		border-right: 1px solid black;
+
 		&:hover {
 			&>.dropdown {
 				visibility: visible;
 			}
 		}
+
 		.dropdown {
 			position: absolute;
 			top: 100%;
@@ -128,6 +180,7 @@
 			margin-left: -5px;
 			padding: 0px;
 			background-color: #ddd;
+
 			.snippet {
 				position: relative;
 				.animate(background-color);
@@ -137,18 +190,22 @@
 				padding: 5px;
 				cursor: pointer;
 				font-size: 10px;
+
 				i {
 					margin-right: 8px;
 					font-size: 1.2em;
 					height: 1.2em;
+
 					&~i {
 						margin-right: 0;
 						margin-left: 5px;
 					}
 				}
+
 				.name {
 					margin-right: auto;
 				}
+
 				.beta {
 					color: white;
 					padding: 4px 6px;
@@ -159,10 +216,13 @@
 					border-radius: 12px;
 					font-family: monospace;
 				}
+
 				&:hover {
 					background-color: #999;
+
 					&>.dropdown {
 						visibility: visible;
+
 						&.side {
 							left: 100%;
 							top: 0%;

themes/V3/Blank/snippets.js

@@ -304,6 +304,104 @@ module.exports = [
 			}
 		]
 	},
+	/**************** FONTS *************/
+	{
+		groupName : 'Fonts',
+		icon	  : 'fas fa-keyboard',
+		view	  : 'text',
+		snippets  : [
+			{
+				name : 'Open Sans',
+				icon : 'OpenSans',
+				gen	 : dedent`{{OpenSans Dummy Text}}`
+			},
+			{
+				name : 'Code Bold',
+				icon : 'CodeBold',
+				gen	 : dedent`{{CodeBold Dummy Text}}`
+			},
+			{
+				name : 'Code Light',
+				icon : 'CodeLight',
+				gen	 : dedent`{{CodeLight Dummy Text}}`
+			},
+			{
+				name : 'Scaly Sans Remake',
+				icon : 'ScalySansRemake',
+				gen	 : dedent`{{ScalySansRemake Dummy Text}}`
+			},
+			{
+				name : 'Book Insanity Remake',
+				icon : 'BookInsanityRemake',
+				gen	 : dedent`{{BookInsanityRemake Dummy Text}}`
+			},
+			{
+				name : 'Mr Eaves Remake',
+				icon : 'MrEavesRemake',
+				gen	 : dedent`{{MrEavesRemake Dummy Text}}`
+			},
+			{
+				name : 'Mr Eaves Remake',
+				icon : 'MrEavesRemake',
+				gen	 : dedent`{{MrEavesRemake Dummy Text}}`
+			},
+			{
+				name: 'Solbera Imitation Remake',
+				icon: 'SolberaImitationRemake',
+				gen: dedent`{{SolberaImitationRemake Dummy Text}}`
+			  },
+			  {
+				name: 'Scaly Sans Small Caps Remake',
+				icon: 'ScalySansSmallCapsRemake',
+				gen: dedent`{{ScalySansSmallCapsRemake Dummy Text}}`
+			  },
+			  {
+				name: 'Walter Turncoat',
+				icon: 'WalterTurncoat',
+				gen: dedent`{{WalterTurncoat Dummy Text}}`
+			  },
+			  {
+				name: 'Lato',
+				icon: 'Lato',
+				gen: dedent`{{Lato Dummy Text}}`
+			  },
+			  {
+				name: 'Courier',
+				icon: 'Courier',
+				gen: dedent`{{Courier Dummy Text}}`
+			  },
+			  {
+				name: 'Nodesto Caps Condensed',
+				icon: 'NodestoCapsCondensed',
+				gen: dedent`{{NodestoCapsCondensed Dummy Text}}`
+			  },
+			  {
+				name: 'Overpass',
+				icon: 'Overpass',
+				gen: dedent`{{Overpass Dummy Text}}`
+			  },
+			  {
+				name: 'Davek',
+				icon: 'Davek',
+				gen: dedent`{{Davek Dummy Text}}`
+			  },
+			  {
+				name: 'Iokharic',
+				icon: 'Iokharic',
+				gen: dedent`{{Iokharic Dummy Text}}`
+			  },
+			  {
+				name: 'Rellanic',
+				icon: 'Rellanic',
+				gen: dedent`{{Rellanic Dummy Text}}`
+			  },
+			  {
+				name: 'Times New Roman',
+				icon: 'TimesNewRoman',
+				gen: dedent`{{TimesNewRoman Dummy Text}}`
+			  }
+		]
+	},
 
 	/**************** PAGE *************/
 

themes/V3/Blank/style.less

@@ -152,6 +152,27 @@ body { counter-reset : phb-page-numbers; }
 		break-inside                : avoid;
 	}
 
+	/* Fonts */
+
+	.OpenSans 					{ font-family: 'OpenSans'; }
+	.CodeBold 					{ font-family: 'CodeBold';}
+	.CodeLight 					{ font-family: 'CodeLight';}
+	.ScalySansRemake 			{ font-family: 'ScalySansRemake';}
+	.BookInsanityRemake 		{ font-family: 'BookInsanityRemake';}
+	.MrEavesRemake 				{ font-family: 'MrEavesRemake';}
+	.SolberaImitationRemake 	{ font-family: 'SolberaImitationRemake';}
+	.ScalySansSmallCapsRemake 	{ font-family: 'ScalySansSmallCapsRemake';}
+	.WalterTurncoat 			{ font-family: 'WalterTurncoat';}
+	.Lato 						{ font-family: 'Lato';}
+	.Courier 					{ font-family: 'Courier';}
+	.NodestoCapsCondensed 		{ font-family: 'NodestoCapsCondensed';}
+	.Overpass 					{ font-family: 'Overpass';}
+	.Davek 						{ font-family: 'Davek';}
+	.Iokharic 					{ font-family: 'Iokharic';}
+	.Rellanic 					{ font-family: 'Rellanic';}
+	.TimesNewRoman 				{ font-family: 'Times New Roman';}
+
+
 	/* Watermark */
 	.watermark {
 		position        : absolute;