diff --git a/a11y/role-button/demos/button-toggle/index.html b/a11y/role-button/demos/button-toggle/index.html
index 09e9c6aa04..4570284d82 100644
--- a/a11y/role-button/demos/button-toggle/index.html
+++ b/a11y/role-button/demos/button-toggle/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
   <style>
     *, *::before, *::after {
       margin: 0;
diff --git a/a11y/role-button/demos/button-with-interaction/index.html b/a11y/role-button/demos/button-with-interaction/index.html
index 53f76b2f24..11752c682e 100644
--- a/a11y/role-button/demos/button-with-interaction/index.html
+++ b/a11y/role-button/demos/button-with-interaction/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
   <style>
     *, *::before, *::after {
       margin: 0;
diff --git a/a11y/role-button/images/computed-name.png b/a11y/role-button/images/computed-name.png
index 76e4a7a4bc..908c5ba112 100644
Binary files a/a11y/role-button/images/computed-name.png and b/a11y/role-button/images/computed-name.png differ