diff --git a/11-single-price-grid-component/src/main/scala/pricegrid/Page.scala b/11-single-price-grid-component/src/main/scala/pricegrid/Page.scala
index 35a7965..e01570f 100644
--- a/11-single-price-grid-component/src/main/scala/pricegrid/Page.scala
+++ b/11-single-price-grid-component/src/main/scala/pricegrid/Page.scala
@@ -104,6 +104,10 @@ object Page {
           content := "width=device-width, initial-scale=1.0"
         ),
         tags2.title("Frontend Mentor | Single Price Grid Component"),
+        link(
+          href := "https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap",
+          rel := "stylesheet",
+        ),
         link(
           rel := "icon",
           `type` := "image/png",
diff --git a/11-single-price-grid-component/tailwind.config.js b/11-single-price-grid-component/tailwind.config.js
index 85e8ab7..259c893 100644
--- a/11-single-price-grid-component/tailwind.config.js
+++ b/11-single-price-grid-component/tailwind.config.js
@@ -3,6 +3,9 @@ module.exports = {
   content: ["./src/**/*.scala"],
   theme: {
     extend: {
+      fontFamily: {
+        'sans': ['Karla', 'sans-serif']
+      },
       colors: {
         'primary-cyan': 'hsl(179, 62%, 43%)',
         'primary-yellow': 'hsl(71, 73%, 54%)',