diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
index 3e3ef586ff..2563e539de 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -1171,39 +1171,7 @@ void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* ele
         }
     }
 
-    int weight = Gfx::FontWeight::Regular;
-    if (font_weight->is_identifier()) {
-        switch (static_cast<IdentifierStyleValue const&>(*font_weight).id()) {
-        case CSS::ValueID::Normal:
-            weight = Gfx::FontWeight::Regular;
-            break;
-        case CSS::ValueID::Bold:
-            weight = Gfx::FontWeight::Bold;
-            break;
-        case CSS::ValueID::Lighter:
-            // FIXME: This should be relative to the parent.
-            weight = Gfx::FontWeight::Regular;
-            break;
-        case CSS::ValueID::Bolder:
-            // FIXME: This should be relative to the parent.
-            weight = Gfx::FontWeight::Bold;
-            break;
-        default:
-            break;
-        }
-    } else if (font_weight->has_integer()) {
-        int font_weight_integer = font_weight->to_integer();
-        if (font_weight_integer <= Gfx::FontWeight::Regular)
-            weight = Gfx::FontWeight::Regular;
-        else if (font_weight_integer <= Gfx::FontWeight::Bold)
-            weight = Gfx::FontWeight::Bold;
-        else
-            weight = Gfx::FontWeight::Black;
-    } else if (font_weight->is_calculated()) {
-        auto maybe_weight = const_cast<CalculatedStyleValue&>(font_weight->as_calculated()).resolve_integer();
-        if (maybe_weight.has_value())
-            weight = maybe_weight.value();
-    }
+    auto weight = font_weight->to_font_weight();
 
     bool bold = weight > Gfx::FontWeight::Regular;
 
@@ -1282,21 +1250,7 @@ void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* ele
         }
     }
 
-    int slope = Gfx::name_to_slope("Normal"sv);
-    // FIXME: Implement oblique <angle>
-    if (font_style->is_identifier()) {
-        switch (static_cast<IdentifierStyleValue const&>(*font_style).id()) {
-        case CSS::ValueID::Italic:
-            slope = Gfx::name_to_slope("Italic"sv);
-            break;
-        case CSS::ValueID::Oblique:
-            slope = Gfx::name_to_slope("Oblique"sv);
-            break;
-        case CSS::ValueID::Normal:
-        default:
-            break;
-        }
-    }
+    auto slope = font_style->to_font_slope();
 
     // FIXME: Implement the full font-matching algorithm: https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm
 
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValue.cpp b/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
index 9a2aaca5bf..85122b3393 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2018-2023, Andreas Kling <kling@serenityos.org>
  * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
  * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
  * Copyright (c) 2022-2023, MacDue <macdue@dueutil.tech>
@@ -7,6 +7,7 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
+#include <LibGfx/Font/FontStyleMapping.h>
 #include <LibWeb/CSS/StyleValue.h>
 #include <LibWeb/CSS/StyleValues/AbstractImageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
@@ -369,4 +370,59 @@ ValueID StyleValue::to_identifier() const
     return ValueID::Invalid;
 }
 
+int StyleValue::to_font_weight() const
+{
+    if (is_identifier()) {
+        switch (static_cast<IdentifierStyleValue const&>(*this).id()) {
+        case CSS::ValueID::Normal:
+            return Gfx::FontWeight::Regular;
+        case CSS::ValueID::Bold:
+            return Gfx::FontWeight::Bold;
+        case CSS::ValueID::Lighter:
+            // FIXME: This should be relative to the parent.
+            return Gfx::FontWeight::Regular;
+        case CSS::ValueID::Bolder:
+            // FIXME: This should be relative to the parent.
+            return Gfx::FontWeight::Bold;
+        default:
+            return Gfx::FontWeight::Regular;
+        }
+    }
+    if (has_integer()) {
+        int font_weight_integer = to_integer();
+        if (font_weight_integer <= Gfx::FontWeight::Regular)
+            return Gfx::FontWeight::Regular;
+        if (font_weight_integer <= Gfx::FontWeight::Bold)
+            return Gfx::FontWeight::Bold;
+        return Gfx::FontWeight::Black;
+    }
+    if (is_calculated()) {
+        auto maybe_weight = const_cast<CalculatedStyleValue&>(as_calculated()).resolve_integer();
+        if (maybe_weight.has_value())
+            return maybe_weight.value();
+    }
+    return Gfx::FontWeight::Regular;
+}
+
+int StyleValue::to_font_slope() const
+{
+    // FIXME: Implement oblique <angle>
+    if (is_identifier()) {
+        switch (static_cast<IdentifierStyleValue const&>(*this).id()) {
+        case CSS::ValueID::Italic: {
+            static int italic_slope = Gfx::name_to_slope("Italic"sv);
+            return italic_slope;
+        }
+        case CSS::ValueID::Oblique:
+            static int oblique_slope = Gfx::name_to_slope("Oblique"sv);
+            return oblique_slope;
+        case CSS::ValueID::Normal:
+        default:
+            break;
+        }
+    }
+    static int normal_slope = Gfx::name_to_slope("Normal"sv);
+    return normal_slope;
+}
+
 }
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValue.h
index 00074060c4..d5aa2ea85a 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValue.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2018-2023, Andreas Kling <kling@serenityos.org>
  * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
  * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
  * Copyright (c) 2022-2023, MacDue <macdue@dueutil.tech>
@@ -304,6 +304,9 @@ public:
     virtual float to_integer() const { return 0; }
     virtual ErrorOr<String> to_string() const = 0;
 
+    [[nodiscard]] int to_font_weight() const;
+    [[nodiscard]] int to_font_slope() const;
+
     virtual bool equals(StyleValue const& other) const = 0;
 
     bool operator==(StyleValue const& other) const