3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-25 15:26:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix default font loading.

Browse source
This commit is contained in:
Andrey Antukh 2021-03-23 10:53:40 +01:00
parent 4729801fca
commit 60f9b47115
4 changed files with 64 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

95
frontend/resources/styles/common/dependencies/fonts.scss
View file

@ -2,8 +2,7 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this // License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/. // file, You can obtain one at http://mozilla.org/MPL/2.0/.
// //
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz> // Copyright (c) UXBOX Labs SL
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Font sizes // Font sizes
$fs8: 0.5rem; $fs8: 0.5rem;
@ -41,71 +40,31 @@ $title-lh: 1.25;
$title-lh-sm: 1.15; $title-lh-sm: 1.15;
// Work Sans // Work Sans
@include font-face("worksans","WorkSans-ExtraLight", "100"); @include font-face("worksans","WorkSans-Thin", "100");
@include font-face("worksans","WorkSans-ExtraLightitalic","100",italic); @include font-face("worksans","WorkSans-ThinItalic", "100", italic);
@include font-face("worksans","WorkSans-Light","200"); @include font-face("worksans","WorkSans-ExtraLight", "200");
@include font-face("worksans","WorkSans-LightItalic","200",italic); @include font-face("worksans","WorkSans-ExtraLightitalic", "200", italic);
@include font-face("worksans","WorkSans-Regular",normal); @include font-face("worksans","WorkSans-Light", "300");
@include font-face("worksans","WorkSans-Italic",normal,italic); @include font-face("worksans","WorkSans-LightItalic", "300", italic);
@include font-face("worksans","WorkSans-SemiBold","500"); @include font-face("worksans","WorkSans-Regular", normal);
@include font-face("worksans","WorkSans-SemiBoldItalic","500",italic); @include font-face("worksans","WorkSans-Italic", normal, italic);
@include font-face("worksans","WorkSans-Bold",bold); @include font-face("worksans","WorkSans-SemiBold", "600");
@include font-face("worksans","WorkSans-BoldItalic",bold,italic); @include font-face("worksans","WorkSans-SemiBoldItalic", "600", italic);
@include font-face("worksans","WorkSans-Black","900"); @include font-face("worksans","WorkSans-Bold", bold);
@include font-face("worksans","WorkSans-BlackItalic","900",italic); @include font-face("worksans","WorkSans-BoldItalic", bold, italic);
@include font-face("worksans","WorkSans-Black", "900");
@include font-face("worksans","WorkSans-BlackItalic","900", italic);
// Source Sans Pro // Source Sans Pro
@include font-face("sourcesanspro","sourcesanspro-extralight", "100"); @include font-face("sourcesanspro","sourcesanspro-extralight", "200");
@include font-face("sourcesanspro","sourcesanspro-extralightitalic","100",italic); @include font-face("sourcesanspro","sourcesanspro-extralightitalic", "200", italic);
@include font-face("sourcesanspro","sourcesanspro-light","200"); @include font-face("sourcesanspro","sourcesanspro-light", "300");
@include font-face("sourcesanspro","sourcesanspro-lightitalic","200",italic); @include font-face("sourcesanspro","sourcesanspro-lightitalic", "300", italic);
@include font-face("sourcesanspro","sourcesanspro-regular",normal); @include font-face("sourcesanspro","sourcesanspro-regular", normal);
@include font-face("sourcesanspro","sourcesanspro-italic",normal,italic); @include font-face("sourcesanspro","sourcesanspro-italic", normal, italic);
@include font-face("sourcesanspro","sourcesanspro-semibold","500"); @include font-face("sourcesanspro","sourcesanspro-semibold", "600");
@include font-face("sourcesanspro","sourcesanspro-semibolditalic","500",italic); @include font-face("sourcesanspro","sourcesanspro-semibolditalic", "600", italic);
@include font-face("sourcesanspro","sourcesanspro-bold",bold); @include font-face("sourcesanspro","sourcesanspro-bold", bold);
@include font-face("sourcesanspro","sourcesanspro-bolditalic",bold,italic); @include font-face("sourcesanspro","sourcesanspro-bolditalic", bold, italic);
@include font-face("sourcesanspro","sourcesanspro-black","900"); @include font-face("sourcesanspro","sourcesanspro-black", "900");
@include font-face("sourcesanspro","sourcesanspro-blackitalic","900",italic); @include font-face("sourcesanspro","sourcesanspro-blackitalic", "900", italic);
// Open Sans
@include font-face("opensans","opensans-extralight","100");
@include font-face("opensans","opensans-extralightitalic","100",italic);
@include font-face("opensans","opensans-light","200");
@include font-face("opensans","opensans-lightitalic","200",italic);
@include font-face("opensans","opensans-regular",normal);
@include font-face("opensans","opensans-italic",normal,italic);
@include font-face("opensans","opensans-semibold","500");
@include font-face("opensans","opensans-semibolditalic","500",italic);
@include font-face("opensans","opensans-bold",bold);
@include font-face("opensans","opensans-bolditalic",bold,italic);
@include font-face("opensans","opensans-black","900");
@include font-face("opensans","opensans-blackitalic","900",italic);
// Roboto
@include font-face("roboto","roboto-thin","100");
@include font-face("roboto","roboto-thinitalic","100",italic);
@include font-face("roboto","roboto-light","200");
@include font-face("roboto","roboto-lightitalic","200",italic);
@include font-face("roboto","roboto-regular",normal);
@include font-face("roboto","roboto-italic",normal,italic);
@include font-face("roboto","roboto-semibold","500");
@include font-face("roboto","roboto-semibolditalic","500",italic);
@include font-face("roboto","roboto-bold",bold);
@include font-face("roboto","roboto-bolditalic",bold,italic);
@include font-face("roboto","roboto-black","900");
@include font-face("roboto","roboto-blackitalic","900",italic);
// Roboto Condensed
@include font-face("robotocondensed","robotocondensed-thin","100");
@include font-face("robotocondensed","robotocondensed-thinitalic","100",italic);
@include font-face("robotocondensed","robotocondensed-light","200");
@include font-face("robotocondensed","robotocondensed-lightitalic","200",italic);
@include font-face("robotocondensed","robotocondensed-regular",normal);
@include font-face("robotocondensed","robotocondensed-italic",normal,italic);
@include font-face("robotocondensed","robotocondensed-semibold","500");
@include font-face("robotocondensed","robotocondensed-semibolditalic","500",italic);
@include font-face("robotocondensed","robotocondensed-bold",bold);
@include font-face("robotocondensed","robotocondensed-bolditalic",bold,italic);
@include font-face("robotocondensed","robotocondensed-black","900");
@include font-face("robotocondensed","robotocondensed-blackitalic","900",italic);

4
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -745,7 +745,7 @@
&:hover { &:hover {
background: $color-gray-60; background: $color-gray-60;
.custom-select, .custom-select,
.editable-select, .editable-select,
input { input {
@ -1016,7 +1016,7 @@
.typography-name { .typography-name {
font-size: 14px; font-size: 14px;
} }
.row-flex { .row-flex {
padding: 0.5rem 0; padding: 0.5rem 0;
} }

53
frontend/src/app/main/fonts.cljs
View file

@ -5,21 +5,21 @@
;; This Source Code Form is "Incompatible With Secondary Licenses", as ;; This Source Code Form is "Incompatible With Secondary Licenses", as
;; defined by the Mozilla Public License, v. 2.0. ;; defined by the Mozilla Public License, v. 2.0.
;; ;;
;; Copyright (c) 2020 UXBOX Labs SL ;; Copyright (c) UXBOX Labs SL
(ns app.main.fonts (ns app.main.fonts
"Fonts management and loading logic." "Fonts management and loading logic."
(:require-macros [app.main.fonts :refer [preload-gfonts]]) (:require-macros [app.main.fonts :refer [preload-gfonts]])
(:require (:require
[beicon.core :as rx]
[promesa.core :as p]
[okulary.core :as l]
[cuerdas.core :as str]
[app.util.dom :as dom]
[app.util.timers :as ts]
[app.common.data :as d] [app.common.data :as d]
[app.util.dom :as dom]
[app.util.object :as obj]
[app.util.timers :as ts]
[beicon.core :as rx]
[clojure.set :as set] [clojure.set :as set]
[app.util.object :as obj])) [cuerdas.core :as str]
[okulary.core :as l]
[promesa.core :as p]))
(def google-fonts (def google-fonts
(preload-gfonts "fonts/gfonts.2020.04.23.json")) (preload-gfonts "fonts/gfonts.2020.04.23.json"))
@ -28,20 +28,17 @@
[{:id "sourcesanspro" [{:id "sourcesanspro"
:name "Source Sans Pro" :name "Source Sans Pro"
:family "sourcesanspro" :family "sourcesanspro"
:variants [{:id "100" :name "100" :weight "100" :style "normal"} :variants
{:id "100italic" :name "100 (italic)" :weight "100" :style "italic"} [{:id "200" :name "200" :weight "200" :style "normal" :suffix "extralight"}
{:id "200" :name "200" :weight "200" :style "normal"} {:id "200italic" :name "200 (italic)" :weight "200" :style "italic" :suffix "extralightitalic"}
{:id "200italic" :name "200 (italic)" :weight "200" :style "italic"} {:id "300" :name "300" :weight "300" :style "normal" :suffix "light"}
{:id "300" :name "300" :weight "300" :style "normal"} {:id "300italic" :name "300 (italic)" :weight "300" :style "italic" :suffix "lightitalic"}
{:id "300italic" :name "300 (italic)" :weight "300" :style "italic"} {:id "regular" :name "regular" :weight "400" :style "normal"}
{:id "regular" :name "regular" :weight "400" :style "normal"} {:id "italic" :name "italic" :weight "400" :style "italic"}
{:id "italic" :name "italic" :weight "400" :style "italic"} {:id "bold" :name "bold" :weight "bold" :style "normal"}
{:id "500" :name "500" :weight "500" :style "normal"} {:id "bolditalic" :name "bold (italic)" :weight "bold" :style "italic"}
{:id "500italic" :name "500 (italic)" :weight "500" :style "italic"} {:id "black" :name "black" :weight "900" :style "normal"}
{:id "bold" :name "bold" :weight "bold" :style "normal"} {:id "blackitalic" :name "black (italic)" :weight "900" :style "italic"}]}])
{:id "bolditalic" :name "bold (italic)" :weight "bold" :style "italic"}
{:id "black" :name "black" :weight "900" :style "normal"}
{:id "blackitalic" :name "black (italic)" :weight "900" :style "italic"}]}])
(defonce fontsdb (l/atom {})) (defonce fontsdb (l/atom {}))
(defonce fontsview (l/atom {})) (defonce fontsview (l/atom {}))
@ -75,7 +72,6 @@
[backend] [backend]
(get @fontsview backend)) (get @fontsview backend))
;; --- Fonts Loader ;; --- Fonts Loader
(defonce loaded (l/atom #{})) (defonce loaded (l/atom #{}))
@ -93,12 +89,6 @@
variants (str/join "," (map :id variants))] variants (str/join "," (map :id variants))]
(str base ":" variants "&display=block"))) (str base ":" variants "&display=block")))
(defn font-url [font-id font-variant-id]
(let [{:keys [backend family] :as entry} (get @fontsdb font-id)]
(case backend
:google (gfont-url family {:id font-variant-id})
(str "/fonts/" family "-" (or font-variant-id "regular") ".woff"))))
(defmulti ^:private load-font :backend) (defmulti ^:private load-font :backend)
(defmethod load-font :builtin (defmethod load-font :builtin
@ -140,8 +130,3 @@
(or (or
(d/seek #(or (= (:id %) "regular") (= (:name %) "regular")) variants) (d/seek #(or (= (:id %) "regular") (= (:name %) "regular")) variants)
(first variants))) (first variants)))
(defn fetch-font [font-id font-variant-id]
(let [font-url (font-url font-id font-variant-id)]
(-> (js/fetch font-url)
(p/then (fn [res] (.text res))))))

25
frontend/src/app/main/ui/shapes/text/embed.cljs
View file

@ -5,7 +5,7 @@
;; This Source Code Form is "Incompatible With Secondary Licenses", as ;; This Source Code Form is "Incompatible With Secondary Licenses", as
;; defined by the Mozilla Public License, v. 2.0. ;; defined by the Mozilla Public License, v. 2.0.
;; ;;
;; Copyright (c) 2020-2021 UXBOX Labs SL ;; Copyright (c) UXBOX Labs SL
(ns app.main.ui.shapes.text.embed (ns app.main.ui.shapes.text.embed
(:require (:require
@ -26,7 +26,7 @@
font-style: %(style)s; font-style: %(style)s;
font-weight: %(weight)s; font-weight: %(weight)s;
font-display: block; font-display: block;
src: url(/fonts/%(family)s-%(style)s.woff) format('woff'); src: url(/fonts/%(family)s-%(suffix)s.woff) format('woff');
} }
") ")
@ -42,10 +42,19 @@
(defn get-local-font-css (defn get-local-font-css
[font-id font-variant-id] [font-id font-variant-id]
(let [{:keys [family variants] :as font} (get @fonts/fontsdb font-id) (let [{:keys [family variants] :as font} (get @fonts/fontsdb font-id)
{:keys [name weight style] :as variant} (d/seek #(= (:id %) font-variant-id) variants)] {:keys [name weight style suffix] :as variant} (d/seek #(= (:id %) font-variant-id) variants)]
(-> (str/format font-face-template {:family family :style style :width weight}) (-> (str/format font-face-template {:family family :suffix (or suffix font-variant-id) :width weight})
(p/resolved)))) (p/resolved))))
(defn fetch-font-css
[font-id font-variant-id]
(let [{:keys [backend family] :as entry} (get @fonts/fontsdb font-id)]
(if (= :google backend)
(-> (fonts/gfont-url family [{:id font-variant-id}])
(js/fetch)
(p/then (fn [res] (.text res)))))
(get-local-font-css font-id font-variant-id)))
(defn get-text-font-data [text] (defn get-text-font-data [text]
(->> text (->> text
(re-seq #"url\(([^)]+)\)") (re-seq #"url\(([^)]+)\)")
@ -54,11 +63,9 @@
(p/all))) (p/all)))
(defn embed-font [{:keys [font-id font-variant-id] :or {font-variant-id "regular"}}] (defn embed-font [{:keys [font-id font-variant-id] :or {font-variant-id "regular"}}]
(let [{:keys [backend]} (get @fonts/fontsdb font-id)] (let [{:keys [backend family]} (get @fonts/fontsdb font-id)]
(p/let [font-text (case backend (p/let [font-text (fetch-font-css font-id font-variant-id)
:google (fonts/fetch-font font-id font-variant-id) url-to-data (get-text-font-data font-text)
(get-local-font-css font-id font-variant-id))
url-to-data (get-text-font-data font-text)
replace-text (fn [text [url data]] (str/replace text url data))] replace-text (fn [text [url data]] (str/replace text url data))]
(reduce replace-text font-text url-to-data)))) (reduce replace-text font-text url-to-data))))