feature: Added font-weight support (#165)

Co-authored-by: Jonah Lawrence <[email protected]>

Author: it-jhack

src/demo/index.php

@@ -64,6 +64,9 @@ function gtag() {
                 </div>
                 <input class="param" type="text" id="font" name="font" alt="Font name" placeholder="Fira Code" value="Fira Code" pattern="^[A-Za-z0-9\- ]*$" title="Font from Google Fonts. Only letters, numbers, and spaces.">
 
+                <label for="weight">Font weight</label>
+                <input class="param" type="number" id="weight" name="weight" alt="Font weight" placeholder="400" value="400" min="100" max="900" step="100">
+
                 <label for="size">Font size</label>
                 <input class="param" type="number" id="size" name="size" alt="Font size" placeholder="20" value="20">
 

src/demo/js/script.js

@@ -2,6 +2,7 @@ let preview = {
   // default values
   defaults: {
     font: "monospace",
+    weight: "400",
     color: "36BCF7",
     background: "00000000",
     size: "20",

src/models/GoogleFontConverter.php

@@ -12,12 +12,12 @@ class GoogleFontConverter
      * @param string $text Text to display in font
      * @return string|false The CSS for displaying the font
      */
-    public static function fetchFontCSS($font, $text)
+    public static function fetchFontCSS($font, $weight, $text)
     {
         $url =
             "https://fonts.googleapis.com/css2?" .
             http_build_query([
-                "family" => $font,
+                "family" => $font . ":wght@" . $weight,
                 "text" => $text,
                 "display" => "fallback",
             ]);

src/models/RendererModel.php

@@ -13,6 +13,9 @@ class RendererModel
     /** @var string $font Font family */
     public $font;
 
+    /** @var string $font Font weight */
+    public $weight;
+
     /** @var string $color Font color */
     public $color;
 
@@ -52,6 +55,7 @@ class RendererModel
     /** @var array<string, string> $DEFAULTS */
     private $DEFAULTS = [
         "font" => "monospace",
+        "weight" => "400",
         "color" => "#36BCF7",
         "background" => "#00000000",
         "size" => "20",
@@ -75,6 +79,7 @@ public function __construct($template, $params)
         $this->template = $template;
         $this->lines = $this->checkLines($params["lines"] ?? "");
         $this->font = $this->checkFont($params["font"] ?? $this->DEFAULTS["font"]);
+        $this->weight = $this->checkNumberPositive($params["weight"] ?? $this->DEFAULTS["weight"], "Font weight");
         $this->color = $this->checkColor($params["color"] ?? $this->DEFAULTS["color"], "color");
         $this->background = $this->checkColor($params["background"] ?? $this->DEFAULTS["background"], "background");
         $this->size = $this->checkNumberPositive($params["size"] ?? $this->DEFAULTS["size"], "Font size");
@@ -85,7 +90,7 @@ public function __construct($template, $params)
         $this->multiline = $this->checkBoolean($params["multiline"] ?? $this->DEFAULTS["multiline"]);
         $this->duration = $this->checkNumberPositive($params["duration"] ?? $this->DEFAULTS["duration"], "duration");
         $this->pause = $this->checkNumberNonNegative($params["pause"] ?? $this->DEFAULTS["pause"], "pause");
-        $this->fontCSS = $this->fetchFontCSS($this->font, $params["lines"]);
+        $this->fontCSS = $this->fetchFontCSS($this->font, $this->weight, $params["lines"]);
     }
 
     /**
@@ -185,12 +190,12 @@ private function checkBoolean($bool)
      * @param string $text Text to display in font
      * @return string The CSS for displaying the font
      */
-    private function fetchFontCSS($font, $text)
+    private function fetchFontCSS($font, $weight, $text)
     {
         // skip checking if left as default
         if ($font != $this->DEFAULTS["font"]) {
             // fetch and convert from Google Fonts
-            $from_google_fonts = GoogleFontConverter::fetchFontCSS($font, $text);
+            $from_google_fonts = GoogleFontConverter::fetchFontCSS($font, $weight, $text);
             if ($from_google_fonts) {
                 // return the CSS for displaying the font
                 return "<style>\n{$from_google_fonts}</style>\n";