diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 69e645f57e6125..9735eea815f865 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -181,7 +181,6 @@ function InstalledFonts() {
) ) }
>
) }
-
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index cfc42aa63a5c50..c823b8f1280aba 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -1,3 +1,7 @@
+// Fixed height for the modal footer.
+// Ensures that the footer is always visible when the modal content is scrollable.
+$footer-height: 70px;
+
.font-library-modal {
// @todo: If a new prop is added to the Modal component that constrains
// the content width, we should use that prop instead of this style.
@@ -15,6 +19,7 @@
.components-modal__content {
padding-top: 0;
+ margin-bottom: $footer-height;
}
.font-library-modal__subtitle {
@@ -40,6 +45,7 @@
position: absolute;
bottom: $grid-unit-40;
width: 100%;
+ height: $footer-height;
background-color: $white;
}
}