Make font previews less humongous

src/components/tool-options-panel/tool-options-text/font-preview/font-preview.vue

@@ -21,7 +21,9 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 <template>
-    <div class="font-preview" :class="fontPreviewClass"></div>
+    <div class="font-preview__wrapper">
+        <div class="font-preview" :class="fontPreviewClass"></div>
+    </div>
 </template>
 
 <script lang="ts">
@@ -42,4 +44,9 @@ export default {
 
 <style lang="scss" scoped>
 @import "@/styles/font-previews";
+
+.font-preview__wrapper {
+    padding-top: 4px;
+    height: 18px;
+}
 </style>

src/styles/font-previews.scss

@@ -3,6 +3,8 @@
     background-image: url( "@@/images/font-previews-fs8.png" );
     width: 316px;
     height: 24px;
+    transform: scale(0.5);
+    transform-origin: 0 0;
 }
 .AbrilFatface {
     background-position: 0 -0px;