diff --git a/src/uxbox/data/shapes.cljs b/src/uxbox/data/shapes.cljs
index 86141958c..ecf708968 100644
--- a/src/uxbox/data/shapes.cljs
+++ b/src/uxbox/data/shapes.cljs
@@ -52,6 +52,12 @@
    :x2 [sc/integer]
    :y2 [sc/integer]})
 
+(def ^:static +shape-font-attrs-schema+
+  {:family [sc/string]
+   :style [sc/string]
+   :weight [sc/string]
+   :size [sc/number]})
+
 (def ^:static +shape-radius-attrs-schema+
   {:rx [sc/integer]
    :ry [sc/integer]})
@@ -159,6 +165,19 @@
                  (when color {:fill color})
                  (when opacity {:opacity opacity})))))
 
+(defn update-font-attrs
+  [sid {:keys [family style weight size] :as opts}]
+  (sc/validate! +shape-font-attrs-schema+ opts)
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (update-in state [:shapes-by-id sid :font]
+                 merge
+                 (when family {:family family})
+                 (when style {:style style})
+                 (when weight {:weight weight})
+                 (when size {:size size})))))
+
 (defn update-stroke-attrs
   [sid {:keys [color opacity type width] :as opts}]
   (sc/validate! +shape-stroke-attrs-schema+ opts)
diff --git a/src/uxbox/library.cljs b/src/uxbox/library.cljs
index 8033f92c8..a8d4ad791 100644
--- a/src/uxbox/library.cljs
+++ b/src/uxbox/library.cljs
@@ -8,24 +8,35 @@
 (ns uxbox.library
   (:require [uxbox.library.colors :as colors]
             [uxbox.library.icons :as icons]
+            [uxbox.library.fonts :as fonts]
             [uxbox.util.data :refer (index-by-id)]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Colors
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(def ^:static +color-collections+
+(def ^:const +color-collections+
   colors/+collections+)
 
-(def ^:static +color-collections-by-id+
+(def ^:const +color-collections-by-id+
   (index-by-id colors/+collections+))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Icons
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(def ^:static +icon-collections+
+(def ^:const +icon-collections+
   icons/+collections+)
 
-(def ^:static +icon-collections-by-id+
+(def ^:const +icon-collections-by-id+
   (index-by-id icons/+collections+))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Fonts
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:const +fonts+
+  fonts/+collections+)
+
+(def ^:const +fonts-by-id+
+  (index-by-id fonts/+collections+))
diff --git a/src/uxbox/ui/shapes/text.cljs b/src/uxbox/ui/shapes/text.cljs
index 74ac12d8a..91b05dbcc 100644
--- a/src/uxbox/ui/shapes/text.cljs
+++ b/src/uxbox/ui/shapes/text.cljs
@@ -105,7 +105,6 @@
         local (:rum/local own)]
     (html
      [:g.shape {:class (when selected? "selected")
-                ;; :on-double-click #(on-double-click own %)
                 :ref "main"
                 :on-mouse-down on-mouse-down
                 :on-mouse-up on-mouse-up}
@@ -135,8 +134,16 @@
   [:font-size])
 
 (defn- build-style
-  [{:keys [font-size]}]
-  (merge {} (when font-size {:fontSize (str font-size "px")})))
+  [{:keys [font]}]
+  (let [{:keys [family weight style size]
+         :or {family "sourcesanspro"
+              weight "normal"
+              style "normal"
+              size 16}} font]
+    {:fontSize (str size "px")
+     :fontFamily family
+     :fontWeight weight
+     :fontStyle style}))
 
 (defmethod uusc/render-shape :builtin/text
   [{:keys [id x1 y1 x2 y2 content drawing? editing?] :as shape}]
diff --git a/src/uxbox/ui/workspace/colorpalette.cljs b/src/uxbox/ui/workspace/colorpalette.cljs
index 721a71bdd..ff7bab258 100644
--- a/src/uxbox/ui/workspace/colorpalette.cljs
+++ b/src/uxbox/ui/workspace/colorpalette.cljs
@@ -27,6 +27,8 @@
 ;; Lenses
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
+;; TODO: move this lense under library ns.
+
 (def ^:static ^:private collections-by-id-l
   (-> (comp (l/in [:colors-by-id])
             (ul/merge library/+color-collections-by-id+))
diff --git a/src/uxbox/ui/workspace/sidebar/options.cljs b/src/uxbox/ui/workspace/sidebar/options.cljs
index 09eefee93..b7c570472 100644
--- a/src/uxbox/ui/workspace/sidebar/options.cljs
+++ b/src/uxbox/ui/workspace/sidebar/options.cljs
@@ -498,52 +498,66 @@
      )))
 
 (defmethod -render-menu :menu/text
-  [menu own shape]
+  [menu own {:keys [font] :as shape}]
   (letfn [(on-font-family-change [event]
             (let [value (dom/event->value event)
-                  sid (:id shape)]
-              (println "on-font-family-change" value)))
+                  sid (:id shape)
+                  params {:family (read-string value)
+                          :weight "normal"
+                          :style "normal"}]
+              (rs/emit! (uds/update-font-attrs sid params))))
           (on-font-size-change [event]
             (let [value (dom/event->value event)
-                  value (parse-int value)
+                  params {:size (parse-int value)}
                   sid (:id shape)]
-              (println "on-font-size-change" value)))
-          (on-font-weight-change [event]
+              (rs/emit! (uds/update-font-attrs sid params))))
+          (on-font-style-change [event]
             (let [value (dom/event->value event)
-                  value (read-string value)
-                  sid (:id shape)]
-              (println "on-font-size-change" value)))]
-    (html
-     [:div.element-set {:key (str (:id menu))}
-      [:div.element-set-title (:name menu)]
-      [:div.element-set-content
-       [:span "Font family"]
-       [:div.row-flex
-        [:select.input-select {:value (:font-family shape "sans-serif")
-                                     :on-change on-font-family-change}
-         [:option {:value "sans-serif"} "Sans Serif"]
-         [:option {:value "monospace"} "Monospace"]]]
+                  [weight style] (read-string value)
+                  sid (:id shape)
+                  params {:style style
+                          :weight weight}]
+              (rs/emit! (uds/update-font-attrs sid params))))]
+    (let [{:keys [family style weight size]
+           :or {family "sourcesanspro"
+                style "normal"
+                weight "normal"
+                size 16}} font
+          styles (:styles (first (filter #(= (:id %) family) library/+fonts+)))]
+      (html
+       [:div.element-set {:key (str (:id menu))}
+        [:div.element-set-title (:name menu)]
+        [:div.element-set-content
+         [:span "Font family"]
+         [:div.row-flex
+          [:select.input-select {:value (pr-str family)
+                                 :on-change on-font-family-change}
+           (for [font library/+fonts+]
+             [:option {:value (pr-str (:id font))
+                       :key (:id font)} (:name font)])]]
+         [:span "Size and Weight"]
+         [:div.row-flex
+          [:input.input-text
+           {:placeholder "Font Size"
+            :type "number"
+            :min "0"
+            :max "200"
+            :value size
+            :on-change on-font-size-change}]
+          [:select.input-select {:value (pr-str [weight style])
+                                 :on-change on-font-style-change}
+           (for [style styles
+                 :let [data (mapv #(get style %) [:weight :style])]]
+             [:option {:value (pr-str data)
+                       :key (:name style)} (:name style)])]]
 
-       [:span "Size and Weight"]
-       [:div.row-flex
-        [:input.input-text
-         {:placeholder "Font Size"
-          :type "number"
-          :min "0"
-          :max "200"
-          :value (:font-size shape "16")
-          :on-change on-font-size-change}]
-        [:select.input-select {:value (:font-weight shape ":normal")
-                                     :on-change on-font-weight-change}
-         [:option {:value ":normal"} "Normal"]
-         [:option {:value ":bold"} "Solid"]]]
-       [:span "Text align"]
-       [:div.row-flex.align-icons
-        [:span.current i/align-left]
-        [:span i/align-right]
-        [:span i/align-center]
-        [:span i/align-justify]
-         ]]])))
+         [:span "Text align"]
+         [:div.row-flex.align-icons
+          [:span.current i/align-left]
+          [:span i/align-right]
+          [:span i/align-center]
+          [:span i/align-justify]
+          ]]]))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Components