mirror of
https://github.com/penpot/penpot.git
synced 2025-03-20 19:51:23 -05:00
🐛 Fix default font loading.
This commit is contained in:
Andrey Antukh
parent
4729801fca
commit
60f9b47115
4 changed files with 64 additions and 113 deletions
frontend
resources/styles
src/app/main
|
|
@ -2,8 +2,7 @@
|
|||
// 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/.
|
||||
//
|
||||
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
// Copyright (c) UXBOX Labs SL
|
||||
|
||||
// Font sizes
|
||||
$fs8: 0.5rem;
|
||||
|
|
@ -41,71 +40,31 @@ $title-lh: 1.25;
|
|||
$title-lh-sm: 1.15;
|
||||
|
||||
// Work Sans
|
||||
@include font-face("worksans","WorkSans-ExtraLight", "100");
|
||||
@include font-face("worksans","WorkSans-ExtraLightitalic","100",italic);
|
||||
@include font-face("worksans","WorkSans-Light","200");
|
||||
@include font-face("worksans","WorkSans-LightItalic","200",italic);
|
||||
@include font-face("worksans","WorkSans-Regular",normal);
|
||||
@include font-face("worksans","WorkSans-Italic",normal,italic);
|
||||
@include font-face("worksans","WorkSans-SemiBold","500");
|
||||
@include font-face("worksans","WorkSans-SemiBoldItalic","500",italic);
|
||||
@include font-face("worksans","WorkSans-Bold",bold);
|
||||
@include font-face("worksans","WorkSans-BoldItalic",bold,italic);
|
||||
@include font-face("worksans","WorkSans-Black","900");
|
||||
@include font-face("worksans","WorkSans-BlackItalic","900",italic);
|
||||
@include font-face("worksans","WorkSans-Thin", "100");
|
||||
@include font-face("worksans","WorkSans-ThinItalic", "100", italic);
|
||||
@include font-face("worksans","WorkSans-ExtraLight", "200");
|
||||
@include font-face("worksans","WorkSans-ExtraLightitalic", "200", italic);
|
||||
@include font-face("worksans","WorkSans-Light", "300");
|
||||
@include font-face("worksans","WorkSans-LightItalic", "300", italic);
|
||||
@include font-face("worksans","WorkSans-Regular", normal);
|
||||
@include font-face("worksans","WorkSans-Italic", normal, italic);
|
||||
@include font-face("worksans","WorkSans-SemiBold", "600");
|
||||
@include font-face("worksans","WorkSans-SemiBoldItalic", "600", italic);
|
||||
@include font-face("worksans","WorkSans-Bold", bold);
|
||||
@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
|
||||
@include font-face("sourcesanspro","sourcesanspro-extralight", "100");
|
||||
@include font-face("sourcesanspro","sourcesanspro-extralightitalic","100",italic);
|
||||
@include font-face("sourcesanspro","sourcesanspro-light","200");
|
||||
@include font-face("sourcesanspro","sourcesanspro-lightitalic","200",italic);
|
||||
@include font-face("sourcesanspro","sourcesanspro-regular",normal);
|
||||
@include font-face("sourcesanspro","sourcesanspro-italic",normal,italic);
|
||||
@include font-face("sourcesanspro","sourcesanspro-semibold","500");
|
||||
@include font-face("sourcesanspro","sourcesanspro-semibolditalic","500",italic);
|
||||
@include font-face("sourcesanspro","sourcesanspro-bold",bold);
|
||||
@include font-face("sourcesanspro","sourcesanspro-bolditalic",bold,italic);
|
||||
@include font-face("sourcesanspro","sourcesanspro-black","900");
|
||||
@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);
|
||||
@include font-face("sourcesanspro","sourcesanspro-extralight", "200");
|
||||
@include font-face("sourcesanspro","sourcesanspro-extralightitalic", "200", italic);
|
||||
@include font-face("sourcesanspro","sourcesanspro-light", "300");
|
||||
@include font-face("sourcesanspro","sourcesanspro-lightitalic", "300", italic);
|
||||
@include font-face("sourcesanspro","sourcesanspro-regular", normal);
|
||||
@include font-face("sourcesanspro","sourcesanspro-italic", normal, italic);
|
||||
@include font-face("sourcesanspro","sourcesanspro-semibold", "600");
|
||||
@include font-face("sourcesanspro","sourcesanspro-semibolditalic", "600", italic);
|
||||
@include font-face("sourcesanspro","sourcesanspro-bold", bold);
|
||||
@include font-face("sourcesanspro","sourcesanspro-bolditalic", bold, italic);
|
||||
@include font-face("sourcesanspro","sourcesanspro-black", "900");
|
||||
@include font-face("sourcesanspro","sourcesanspro-blackitalic", "900", italic);
|
||||
|
|
|
|||
|
|
@ -745,7 +745,7 @@
|
|||
&:hover {
|
||||
background: $color-gray-60;
|
||||
|
||||
|
||||
|
||||
.custom-select,
|
||||
.editable-select,
|
||||
input {
|
||||
|
|
@ -1016,7 +1016,7 @@
|
|||
.typography-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.row-flex {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,21 +5,21 @@
|
|||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
;; Copyright (c) UXBOX Labs SL
|
||||
|
||||
(ns app.main.fonts
|
||||
"Fonts management and loading logic."
|
||||
(:require-macros [app.main.fonts :refer [preload-gfonts]])
|
||||
(: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.util.dom :as dom]
|
||||
[app.util.object :as obj]
|
||||
[app.util.timers :as ts]
|
||||
[beicon.core :as rx]
|
||||
[clojure.set :as set]
|
||||
[app.util.object :as obj]))
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
[promesa.core :as p]))
|
||||
|
||||
(def google-fonts
|
||||
(preload-gfonts "fonts/gfonts.2020.04.23.json"))
|
||||
|
|
@ -28,20 +28,17 @@
|
|||
[{:id "sourcesanspro"
|
||||
:name "Source Sans Pro"
|
||||
:family "sourcesanspro"
|
||||
:variants [{:id "100" :name "100" :weight "100" :style "normal"}
|
||||
{:id "100italic" :name "100 (italic)" :weight "100" :style "italic"}
|
||||
{:id "200" :name "200" :weight "200" :style "normal"}
|
||||
{:id "200italic" :name "200 (italic)" :weight "200" :style "italic"}
|
||||
{:id "300" :name "300" :weight "300" :style "normal"}
|
||||
{:id "300italic" :name "300 (italic)" :weight "300" :style "italic"}
|
||||
{:id "regular" :name "regular" :weight "400" :style "normal"}
|
||||
{:id "italic" :name "italic" :weight "400" :style "italic"}
|
||||
{:id "500" :name "500" :weight "500" :style "normal"}
|
||||
{:id "500italic" :name "500 (italic)" :weight "500" :style "italic"}
|
||||
{:id "bold" :name "bold" :weight "bold" :style "normal"}
|
||||
{: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"}]}])
|
||||
:variants
|
||||
[{:id "200" :name "200" :weight "200" :style "normal" :suffix "extralight"}
|
||||
{:id "200italic" :name "200 (italic)" :weight "200" :style "italic" :suffix "extralightitalic"}
|
||||
{:id "300" :name "300" :weight "300" :style "normal" :suffix "light"}
|
||||
{:id "300italic" :name "300 (italic)" :weight "300" :style "italic" :suffix "lightitalic"}
|
||||
{:id "regular" :name "regular" :weight "400" :style "normal"}
|
||||
{:id "italic" :name "italic" :weight "400" :style "italic"}
|
||||
{:id "bold" :name "bold" :weight "bold" :style "normal"}
|
||||
{: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 fontsview (l/atom {}))
|
||||
|
|
@ -75,7 +72,6 @@
|
|||
[backend]
|
||||
(get @fontsview backend))
|
||||
|
||||
|
||||
;; --- Fonts Loader
|
||||
|
||||
(defonce loaded (l/atom #{}))
|
||||
|
|
@ -93,12 +89,6 @@
|
|||
variants (str/join "," (map :id variants))]
|
||||
(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)
|
||||
|
||||
(defmethod load-font :builtin
|
||||
|
|
@ -140,8 +130,3 @@
|
|||
(or
|
||||
(d/seek #(or (= (:id %) "regular") (= (:name %) "regular")) 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))))))
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; 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
|
||||
(:require
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
font-style: %(style)s;
|
||||
font-weight: %(weight)s;
|
||||
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
|
||||
[font-id font-variant-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)]
|
||||
(-> (str/format font-face-template {:family family :style style :width weight})
|
||||
{:keys [name weight style suffix] :as variant} (d/seek #(= (:id %) font-variant-id) variants)]
|
||||
(-> (str/format font-face-template {:family family :suffix (or suffix font-variant-id) :width weight})
|
||||
(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]
|
||||
(->> text
|
||||
(re-seq #"url\(([^)]+)\)")
|
||||
|
|
@ -54,11 +63,9 @@
|
|||
(p/all)))
|
||||
|
||||
(defn embed-font [{:keys [font-id font-variant-id] :or {font-variant-id "regular"}}]
|
||||
(let [{:keys [backend]} (get @fonts/fontsdb font-id)]
|
||||
(p/let [font-text (case backend
|
||||
:google (fonts/fetch-font font-id font-variant-id)
|
||||
(get-local-font-css font-id font-variant-id))
|
||||
url-to-data (get-text-font-data font-text)
|
||||
(let [{:keys [backend family]} (get @fonts/fontsdb font-id)]
|
||||
(p/let [font-text (fetch-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))]
|
||||
(reduce replace-text font-text url-to-data))))
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue