Merge pull request #19 from eigilnikolajsen/fix-issues-001

Fix issues 001

Author: eigilnikolajsen

index.html

@@ -135,6 +135,12 @@
                                 </div>
                                 <p>Light/dark</p>
                             </div>
+                            <div class="key_group" id="change_weight">
+                                <div class="keys">
+                                    <p data-key-code="KeyC" data-key="c" class="key">C</p>
+                                </div>
+                                <p>High contrast</p>
+                            </div>
                             <div class="key_group" id="show_hide_keys">
                                 <div class="keys">
                                     <p data-key-code="KeyH" data-key="h" class="key">H</p>
@@ -546,7 +552,8 @@ <h2>Choose download alternate characters</h2>
                                     <br />
                                     <p>
                                         Download all 34 cuts with your custom settings + source variable fonts (.tff &
-                                        .woff2) for design.
+                                        .woff2) for design. Variable fonts don’t contain custom settings. Use OpenType
+                                        features to expose, see exact features in docs.
                                     </p>
                                     <br />
                                     <br />
@@ -800,12 +807,24 @@ <h2>Activate Commit Mono in your editor.</h2>
                                                 Is there a .woff2 version of the font available?
                                             </summary>
                                             <p>
-                                                No, but you can use an online conversion tool like
-                                                <a
-                                                    href="https://www.fontsquirrel.com/tools/webfont-generator"
-                                                    target="_blank"
-                                                    >this one from Font Squirrel</a
-                                                >.
+                                                There is a variable .woff2 version included if you "Download custom for
+                                                design" in
+                                                <button
+                                                    class="download_button"
+                                                    tabindex="0"
+                                                    onclick="keyDown({code:'Digit7'})"
+                                                >
+                                                    07 Customize</button
+                                                >. However, that variable font does not contain custom settings. You
+                                                have to manually enable features and alternates that are OFF by default.
+                                                To see the OpenType feature codes for each feature and alternate, go to
+                                                <button
+                                                    class="download_button"
+                                                    tabindex="0"
+                                                    onclick="keyDown({code:'Digit9'})"
+                                                >
+                                                    09 Docs
+                                                </button>
                                             </p>
                                         </details>
                                         <details>
@@ -1042,7 +1061,7 @@ <h2>Programs used</h2>
             <div tabindex="0" id="block_tab_end"></div>
         </div>
         <script>
-            const versionOfCommitMono = "V130"
+            const versionOfCommitMono = "V132"
             let fontsLoaded = false
             const commitMono = new FontFace("CommitMono", `url(/src/fonts/CommitMono${versionOfCommitMono}-VF.woff2)`, {
                 style: "normal",

src/css/section_7.css

@@ -84,6 +84,13 @@ button:focus a {
     content: "✕";
     animation: none;
 }
+.download_button.safari::after {
+    content: "Safari download not working. Try Chrome or Firefox.";
+    font-variation-settings: "ital" 1;
+    right: auto;
+    left: calc(100% + 1ch);
+    animation: none;
+}
 
 @keyframes loading {
     0% {

src/fonts/CommitMonoV130-300Italic.otf

@@ -55,9 +55,9 @@ async function updateCodeFont() {
         .catch((err) => console.log(err))
 
     opentype
-        .load("src/fonts/CommitMonoV130-450Regular.otf")
+        .load("src/fonts/CommitMonoV132-450Regular.otf")
         .then((font) => {
-            // console.log(font)
+            console.log(font)
             // font.download()
         })
         .catch((err) => console.log(err))

src/fonts/CommitMonoV130-300Regular.otf

@@ -17,9 +17,7 @@ function buildDocs() {
     customizeContent.features.forEach((feature) => {
         const sizes = [
             [3, 4],
-            [2, 2.5],
-            [1, 1.5],
-            [0.75, 1],
+            [1.5, 2],
             [0.5, 1],
         ]
         const container = document.createElement("div")
@@ -42,7 +40,7 @@ function buildDocs() {
         h2.tabIndex = 0
         h2.dataset.edit = "true"
         const p = document.createElement("p")
-        p.textContent = `Default: ${feature.on ? "ON" : "OFF"}`
+        p.textContent = `Default: ${feature.on ? "ON" : "OFF"}. Feature in variable font: "${feature.feature}".`
         container.append(h2, p)
         sizes.forEach((size) => {
             const exampleText = document.createElement("p")

src/fonts/CommitMonoV130-325Italic.otf

@@ -5,63 +5,80 @@ const fontFileBlobs = { regular: null, italic: null, bold: null, bolditalic: nul
 let downloadStarted = false
 async function downloadFont(kindOfDownload, button) {
     // console.log("downloadFont")
-    if (!downloadStarted) {
-        downloadStarted = true
-        button.classList.remove("loaded", "error")
-        button.classList.add("loading")
 
-        let allSettings = {}
-        if (kindOfDownload === "dev") {
-            allSettings.regular = { ...downloadSettingsCustom, style: "Regular" }
-            allSettings.italic = {
-                ...downloadSettingsCustom,
-                style: "Italic",
-                italic: true,
-            }
-            allSettings.bold = { ...downloadSettingsCustom, style: "Bold", weight: 700 }
-            allSettings.bolditalic = {
-                ...downloadSettingsCustom,
-                style: "Bold Italic",
-                italic: true,
-                weight: 700,
-            }
-        }
-        if (kindOfDownload === "default") {
-            allSettings.regular = { ...downloadSettingsDefault, style: "Regular" }
-            allSettings.italic = {
-                ...downloadSettingsDefault,
-                style: "Italic",
-                italic: true,
-            }
-            allSettings.bold = { ...downloadSettingsDefault, style: "Bold", weight: 700 }
-            allSettings.bolditalic = {
-                ...downloadSettingsDefault,
-                style: "Bold Italic",
-                italic: true,
-                weight: 700,
-            }
-        }
-        if (kindOfDownload === "design") {
-            for (let weight = 300; weight <= 700; weight += 25) {
-                allSettings[weight + "Regular"] = {
+    // detect safari
+    const userAgentString = navigator.userAgent || "."
+    let usingChrome = userAgentString.indexOf("Chrome") > -1 || false
+    let usingSafari = userAgentString.indexOf("Safari") > -1 || false
+    if (usingChrome && usingSafari) usingSafari = false
+
+    // block download if from Safari since zip is corrupted
+    if (usingSafari) {
+        button.classList.remove("loaded", "error", "safari")
+        button.classList.add("loading")
+        setTimeout(() => {
+            button.classList.remove("loading")
+            button.classList.add("safari")
+        }, 500)
+    } else {
+        if (!downloadStarted) {
+            downloadStarted = true
+            button.classList.remove("loaded", "error", "safari")
+            button.classList.add("loading")
+
+            let allSettings = {}
+            if (kindOfDownload === "dev") {
+                allSettings.regular = { ...downloadSettingsCustom, style: "Regular" }
+                allSettings.italic = {
                     ...downloadSettingsCustom,
-                    style: weight + "Regular",
-                    weight,
-                    italic: false,
+                    style: "Italic",
+                    italic: true,
                 }
-                allSettings[weight + "Italic"] = {
+                allSettings.bold = { ...downloadSettingsCustom, style: "Bold", weight: 700 }
+                allSettings.bolditalic = {
                     ...downloadSettingsCustom,
-                    style: weight + "Italic",
-                    weight,
+                    style: "Bold Italic",
                     italic: true,
+                    weight: 700,
+                }
+            }
+            if (kindOfDownload === "default") {
+                allSettings.regular = { ...downloadSettingsDefault, style: "Regular" }
+                allSettings.italic = {
+                    ...downloadSettingsDefault,
+                    style: "Italic",
+                    italic: true,
+                }
+                allSettings.bold = { ...downloadSettingsDefault, style: "Bold", weight: 700 }
+                allSettings.bolditalic = {
+                    ...downloadSettingsDefault,
+                    style: "Bold Italic",
+                    italic: true,
+                    weight: 700,
+                }
+            }
+            if (kindOfDownload === "design") {
+                for (let weight = 300; weight <= 700; weight += 25) {
+                    allSettings[weight + "Regular"] = {
+                        ...downloadSettingsCustom,
+                        style: weight + "Regular",
+                        weight,
+                        italic: false,
+                    }
+                    allSettings[weight + "Italic"] = {
+                        ...downloadSettingsCustom,
+                        style: weight + "Italic",
+                        weight,
+                        italic: true,
+                    }
                 }
             }
-        }
 
-        Promise.all(Object.values(allSettings).map((settings) => makeCustomFont(settings)))
-            .then((resolve) => getZipFileBlob(kindOfDownload, resolve))
-            .then((resolve) => initializeDownload(button, resolve))
-            .catch((error) => catchError(button, error))
+            Promise.all(Object.values(allSettings).map((settings) => makeCustomFont(settings)))
+                .then((resolve) => getZipFileBlob(kindOfDownload, resolve))
+                .then((resolve) => initializeDownload(button, resolve))
+                .catch((error) => catchError(button, error))
+        }
     }
 }
 
@@ -87,7 +104,7 @@ function makeCustomFont(settings) {
     const fontWeight = settings.weight
     const fontItalic = settings.italic ? "Italic" : "Regular"
     const fontFilePath = `${fontBaseURL}${fontName}-${fontWeight}${fontItalic}.otf`
-    // "/src/fonts/CommitMonoV130-450Italic.otf"
+    // "/src/fonts/CommitMonoV132-450Italic.otf"
 
     return opentype
         .load(fontFilePath)
@@ -203,7 +220,9 @@ function makeCustomFont(settings) {
             font.names.postScriptName.en = `CommitMono-${settings.style.split(" ").join("")}`
             delete font.names.preferredFamily
             delete font.names.preferredSubfamily
-            font.names.uniqueID.en = `Version 1.001;;CommitMono-${settings.style.split(" ").join("")};2023;FL801`
+            font.names.uniqueID.en = `${font.names.version.en};;CommitMono-${settings.style
+                .split(" ")
+                .join("")};2023;FL801`
 
             font.tables.cff.topDict.familyName = font.names.fontFamily.en
             font.tables.cff.topDict.fullName = font.names.fullName.en