diff --git a/packages/css-property-parser/ppx/Generate.re b/packages/css-property-parser/ppx/Generate.re
index 83336a64..d2f9ceba 100644
--- a/packages/css-property-parser/ppx/Generate.re
+++ b/packages/css-property-parser/ppx/Generate.re
@@ -52,17 +52,15 @@ module Make = (Builder: Ppxlib.Ast_builder.S) => {
 
   let value_name_of_css = str =>
     String.(
-      {
-        let length = length(str);
-        let str =
-          if (is_function(str)) {
-            let str = sub(str, 0, length - 2);
-            function_value_name(str);
-          } else {
-            str;
-          };
-        kebab_case_to_snake_case(str);
-      }
+      let length = length(str);
+      let str =
+        if (is_function(str)) {
+          let str = sub(str, 0, length - 2);
+          function_value_name(str);
+        } else {
+          str;
+        };
+      kebab_case_to_snake_case(str)
     );
 
   // TODO: multiplier name
diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re
index c7faa616..7a731b0c 100644
--- a/packages/ppx/src/Property_to_runtime.re
+++ b/packages/ppx/src/Property_to_runtime.re
@@ -3156,7 +3156,9 @@ let render_single_transition_no_interp =
      ~timingFunction=?[%e
        render_option(~loc, render_timing_no_interp, timingFunction)
      ],
-     ~property=?[%e render_option(~loc, render_transition_property, property)],
+     ~property=?[%e
+       render_option(~loc, render_transition_property, property)
+     ],
      (),
    )];
 };
diff --git a/packages/runtime/melange/Emotion_bindings.ml b/packages/runtime/melange/Emotion_bindings.ml
index efbe45a6..94fe0e7d 100644
--- a/packages/runtime/melange/Emotion_bindings.ml
+++ b/packages/runtime/melange/Emotion_bindings.ml
@@ -51,14 +51,15 @@ let keyframes frames =
 let renderKeyframes _renderer frames = makeAnimation (framesToDict frames)
 
 (* This method is a Css_type function, but with side-effects. It pushes the fontFace as global style *)
-let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust ()
-    =
+let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust
+  ?unicodeRange () =
   let fontFace =
     [|
       Kloth.Option.map ~f:Declarations.fontStyle fontStyle;
       Kloth.Option.map ~f:Declarations.fontWeight fontWeight;
       Kloth.Option.map ~f:Declarations.fontDisplay fontDisplay;
       Kloth.Option.map ~f:Declarations.sizeAdjust sizeAdjust;
+      Kloth.Option.map ~f:Declarations.unicodeRange unicodeRange;
       Some (Declarations.fontFamily fontFamily);
       Some
         (Rule.Declaration
diff --git a/packages/runtime/native/CSS.ml b/packages/runtime/native/CSS.ml
index 9c9d877e..3ef49696 100644
--- a/packages/runtime/native/CSS.ml
+++ b/packages/runtime/native/CSS.ml
@@ -478,14 +478,15 @@ let style_tag ?key:_ ?children:_ () =
     []
 
 (* This method is a Css_type function, but with side-effects. It pushes the fontFace as global style *)
-let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust ()
-    =
+let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust
+  ?unicodeRange () =
   let fontFace =
     [|
       Kloth.Option.map ~f:Declarations.fontStyle fontStyle;
       Kloth.Option.map ~f:Declarations.fontWeight fontWeight;
       Kloth.Option.map ~f:Declarations.fontDisplay fontDisplay;
       Kloth.Option.map ~f:Declarations.sizeAdjust sizeAdjust;
+      Kloth.Option.map ~f:Declarations.unicodeRange unicodeRange;
       Some (Declarations.fontFamily fontFamily);
       Some
         (Rule.Declaration
diff --git a/packages/runtime/native/shared/Css_types.ml b/packages/runtime/native/shared/Css_types.ml
index c4e3aa40..3dc789ef 100644
--- a/packages/runtime/native/shared/Css_types.ml
+++ b/packages/runtime/native/shared/Css_types.ml
@@ -4064,6 +4064,23 @@ module FontVariantEmoji = struct
     | #Cascading.t as c -> Cascading.toString c
 end
 
+module URange = struct
+  type t =
+    [ `single of string
+    | `range of string * string
+    | `wildcard of string * string
+    ]
+    array
+
+  let toString (x : t) =
+    Kloth.Array.map_and_join
+      ~f:(function
+        | `single x -> "U+" ^ x
+        | `range (x, y) -> Printf.sprintf "U+%s-%s" x y
+        | `wildcard (x, y) -> "U+" ^ x ^ y)
+      ~sep:{js|, |js} x
+end
+
 module InflexibleBreadth = struct
   type t =
     [ Length.t
diff --git a/packages/runtime/native/shared/Declarations.ml b/packages/runtime/native/shared/Declarations.ml
index 209811fa..f8e67629 100644
--- a/packages/runtime/native/shared/Declarations.ml
+++ b/packages/runtime/native/shared/Declarations.ml
@@ -906,3 +906,5 @@ let fontOpticalSizing x =
 
 let fontVariantEmoji x =
   Rule.declaration ({js|fontVariantEmoji|js}, FontVariantEmoji.toString x)
+
+let unicodeRange x = Rule.declaration ({js|unicodeRange|js}, URange.toString x)
diff --git a/packages/runtime/rescript/Emotion_bindings.ml b/packages/runtime/rescript/Emotion_bindings.ml
index 309bfb76..eeceb3cc 100644
--- a/packages/runtime/rescript/Emotion_bindings.ml
+++ b/packages/runtime/rescript/Emotion_bindings.ml
@@ -50,14 +50,15 @@ let keyframes frames =
 let renderKeyframes _renderer frames = makeAnimation (framesToDict frames)
 
 (* This method is a Css_type function, but with side-effects. It pushes the fontFace as global style *)
-let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust ()
-    =
+let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust
+  ?unicodeRange () =
   let fontFace =
     [|
       Kloth.Option.map ~f:Declarations.fontStyle fontStyle;
       Kloth.Option.map ~f:Declarations.fontWeight fontWeight;
       Kloth.Option.map ~f:Declarations.fontDisplay fontDisplay;
       Kloth.Option.map ~f:Declarations.sizeAdjust sizeAdjust;
+      Kloth.Option.map ~f:Declarations.unicodeRange unicodeRange;
       Some (Declarations.fontFamily fontFamily);
       Some
         (Rule.Declaration
diff --git a/packages/runtime/test/test_styles.ml b/packages/runtime/test/test_styles.ml
index 59d84681..a753b309 100644
--- a/packages/runtime/test/test_styles.ml
+++ b/packages/runtime/test/test_styles.ml
@@ -408,6 +408,21 @@ let global =
   let css = get_string_style_rules () in
   assert_string css (Printf.sprintf "html{line-height:1.15;}")
 
+let fontFace =
+  test "global" @@ fun () ->
+  let _ =
+    CSS.fontFace ~fontFamily:"foo" ~fontWeight:`bold
+      ~src:[| `url "foo.bar" |]
+      ~fontDisplay:`swap ~fontStyle:`normal ()
+      ~unicodeRange:
+        [| `wildcard ("30", "??"); `range ("3040", "309F"); `single "30A0" |]
+  in
+  let css = get_string_style_rules () in
+  assert_string css
+    (Printf.sprintf
+       "@font-face{font-style:normal;font-weight:700;font-display:swap;unicode-range:U+30??, \
+        U+3040-309F, U+30A0;font-family:\"foo\";src:url(\"foo.bar\");}")
+
 let duplicated_styles_unique =
   test "duplicated_styles_unique" @@ fun () ->
   let classname1 = CSS.style [| CSS.flexGrow 1. |] in
@@ -1046,6 +1061,7 @@ let tests =
       avoid_hash_collision;
       keyframe;
       global;
+      fontFace;
       duplicated_styles_unique;
       style_tag;
       real_world;