v0.0.19

VERSION

@@ -1 +1 @@
-0.0.18
+0.0.19

bin/ts/index.ts

@@ -354,8 +354,8 @@ async function main() {
             CONFIG.path.font_output,
             {
                 assetTypes: [ "scss", ],
-                pathOptions: { scss: path.join(CONFIG.path.src, 'scss', 'variables', '_font_map.scss'), },
-                templates: { scss: path.join(CONFIG.path.src, 'hbs', '_variables_font_map.scss.hbs'), }, 
+                pathOptions: { scss: path.join(CONFIG.path.src, 'scss', 'variables', '_font.scss'), },
+                templates: { scss: path.join(CONFIG.path.src, 'hbs', '_font_variables.scss.hbs'), }, 
             }
         );
         // SCSS Font Classes

dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "icon.gl",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "icon.gl is a icon library and framework developed by Scape Agency.",
   "keywords": [
     "icon.gl",

dist/scss/font/---_font_face.scss

@@ -0,0 +1,51 @@
+// Copyright 2023 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// ============================================================================
+// icon.gl | Font Map
+// ============================================================================
+
+@use "../variables" as *;
+
+
+// FontFace URLs Function
+// ============================================================================
+// Generating font-face URLs with hash
+
+@function icongl_font_url($format) {
+    @return url("#{$icongl_font_dir}/#{$icongl_font}.#{$format}") format($format);
+}
+
+
+
+// FontFace Source Value Variables
+// ============================================================================
+// Constructing src value for @font-face
+
+$icongl_font_src: ();
+@each $format, $type in $icongl_font_formats {
+    $icongl_font_src: append($icongl_font_src, icongl_font_url($format), comma);
+}
+
+
+// FontFace Declaration
+// ============================================================================
+
+@font-face {
+    // Using 'swap' to ensure text remains visible during font loading
+    font-display: swap;
+    font-family: $icongl_font;
+    src: $icongl_font_src;
+}

dist/scss/font/--_font_face.scss

@@ -0,0 +1,51 @@
+// Copyright 2023 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// ============================================================================
+// icon.gl | Font Map
+// ============================================================================
+
+@use "../variables" as *;
+
+
+// FontFace URLs Function
+// ============================================================================
+// Generating font-face URLs with hash
+
+@function icongl_font_url($format) {
+    @return url("#{$icongl_font_dir}/#{$icongl_font}.#{$format}") format($format);
+}
+
+
+
+// FontFace Source Value Variables
+// ============================================================================
+// Constructing src value for @font-face
+
+$icongl_font_src: ();
+@each $format, $type in $icongl_font_formats {
+    $icongl_font_src: append($icongl_font_src, icongl_font_url($format), comma);
+}
+
+
+// FontFace Declaration
+// ============================================================================
+
+@font-face {
+    // Using 'swap' to ensure text remains visible during font loading
+    font-display: swap;
+    font-family: $icongl_font;
+    src: $icongl_font_src;
+}

dist/scss/font/_index.scss

@@ -17,6 +17,7 @@
 // icon.gl | Font
 // ============================================================================
 
-@forward "font_face";
+// @forward "font_face";
+// @forward "font_face";
 // @forward "font_base";
 // @forward "font_class";

dist/scss/mixins/_font.scss

@@ -0,0 +1,96 @@
+// https://stackoverflow.com/questions/1567184/sass-and-font-face
+
+@use "../variables" as *;
+
+
+@mixin icon_face(
+    $path,
+    $family,
+    $type: "",
+    // $weight: 400,
+    // $style: normal,
+    // $local1: null,
+    // $local2: null,
+    $ttf: null,
+    $otf: null,
+    $eot: null,
+    $svg: null
+) {
+
+    // Source List
+    // ------------------------------------------------------------------------
+
+    $src: null; // initialize an empty source path
+
+
+    // Local Sources
+    // ------------------------------------------------------------------------
+    // only load local files when both sources are present
+
+    // @if $local1 and $local2 {
+    //     $src: append($src, local("#{$local1}"), comma);
+    //     $src: append($src, local("#{$local2}"), comma);
+    // }
+
+    // ------------------------------------------------------------------------
+
+    @if $otf {
+        $src: append($src, url("#{$path}#{$type}.otf") format("opentype"), comma);
+    }
+
+
+    // Default Formats
+    // ------------------------------------------------------------------------
+    // load default formats (woff and woff2)
+
+    $src: append($src, url("#{$path}#{$type}.woff2") format("woff2"), comma);
+    $src: append($src, url("#{$path}#{$type}.woff") format("woff"), comma);
+
+
+
+    // Other Formats
+    // ------------------------------------------------------------------------
+    // Formats that should only be added at the end
+
+    @if $ttf {
+        $src: append($src, url("#{$path}#{$type}.ttf") format("truetype"), comma);
+    }
+
+    @if $svg {
+        $src: append($src, url("#{$path}#{$type}.svg##{$svg}") format("svg"), comma);
+    }
+
+
+
+    // Font Face Declaration
+    // ------------------------------------------------------------------------
+
+    @font-face {
+        font-family: $family;
+        // for compatibility reasons EOT comes first and is not appended
+        @if $eot {
+            src: url("#{$path}#{$type}.eot");
+        }
+        // load appended sources path
+        src: $src;
+        // font-weight: $weight;
+        // font-style: $style;
+    }
+
+
+}
+
+
+
+
+@include icon_face(
+    "#{$font_dir}/#{$font_name}",
+    $font_name,
+    "",
+    //   600,
+    //   "normal",
+    //   "#{$font_name} SemiBold",
+    //   "#{$font_name}-SemiBold",
+    "ttf",
+    //   "otf"
+);

dist/scss/mixins/_index.scss

@@ -17,5 +17,6 @@
 // icon.gl | Mixins
 // ============================================================================
 
+@forward "_font";  // Manages icon-related styles.
 @forward "_style";  // Manages icon-related styles.
 @forward "_size";  // Manages icon-related sizes.