diff --git a/docs/features/font.md b/docs/features/font.md
index 78d1ecc..6a9a42e 100644
--- a/docs/features/font.md
+++ b/docs/features/font.md
@@ -94,19 +94,19 @@ The CSS definition for the classes (presets) must be included in the web page st
 Here is an example of the font size CSS classes:
 
 ```css
-.text-tiny {
+.ck-content .text-tiny {
 	font-size: 0.7em;
 }
 
-.text-small {
+.ck-content .text-small {
 	font-size: 0.85em;
 }
 
-.text-big {
+.ck-content .text-big {
 	font-size: 1.4em;
 }
 
-.text-huge {
+.ck-content .text-huge {
 	font-size: 1.8em;
 }
 ```
diff --git a/theme/fontsize.css b/theme/fontsize.css
index 677b6ef..b99e73e 100644
--- a/theme/fontsize.css
+++ b/theme/fontsize.css
@@ -3,18 +3,24 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.text-tiny {
-	font-size: .7em;
-}
+/* The values should be synchronized with the "FONT_SIZE_PRESET_UNITS" object in the "/src/fontsize/utils.js" file. */
 
-.text-small {
-	font-size: .85em;
-}
+/* Styles should be prefixed with the `.ck-content` class.
+See https://github.com/ckeditor/ckeditor5/issues/6636 */
+.ck-content {
+	& .text-tiny {
+		font-size: .7em;
+	}
 
-.text-big {
-	font-size: 1.4em;
-}
+	& .text-small {
+		font-size: .85em;
+	}
+
+	& .text-big {
+		font-size: 1.4em;
+	}
 
-.text-huge {
-	font-size: 1.8em;
+	& .text-huge {
+		font-size: 1.8em;
+	}
 }