diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss
index ff93623037..1aab4048d3 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss
@@ -11,6 +11,7 @@
 
 $people-picker-result-person-avatar-size: var(--people-picker-result-person-avatar-size, 40px);
 $people-picker-selected-person-avatar-size: var(--people-picker-selected-person-avatar-size, 24px);
+$people-picker-font-size: var(--people-picker-font-size, 14px);
 
 :host {
   --person-details-wrapper-width: 0;
@@ -19,6 +20,7 @@ $people-picker-selected-person-avatar-size: var(--people-picker-selected-person-
 
   fluent-text-field {
     width: 100%;
+    font-size: $people-picker-font-size;
 
     &::part(root) {
       display: flex;
diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index 0922410474..384a9c2b25 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -99,6 +99,7 @@ export const registerMgtPeoplePickerComponent = () => {
  * @cssprop --people-picker-remove-selected-close-icon-color - {Color} the remove selected person close icon color.
  * @cssprop --people-picker-result-person-avatar-size - {Length} the avatar size of the person in the result. Default is 40px.
  * @cssprop --people-picker-selected-person-avatar-size - {Length} the avatar size of the selected person. Default is 24px.
+ * @cssprop --people-picker-font-size - {Length} the font size of the text in the people picker input. Default is 14px.
  */
 export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
   /**
diff --git a/stories/components/peoplePicker/peoplePicker.style.stories.js b/stories/components/peoplePicker/peoplePicker.style.stories.js
index 8975546383..b90abc56e6 100644
--- a/stories/components/peoplePicker/peoplePicker.style.stories.js
+++ b/stories/components/peoplePicker/peoplePicker.style.stories.js
@@ -37,6 +37,7 @@ export const customCSSProperties = () => html`
     --people-picker-input-placeholder-text-color: white;
     --people-picker-search-icon-color: yellow;
     --people-picker-remove-selected-close-icon-color: blue;
+    --people-picker-font-size: 16px;
 
     /** You can also change the person tokens **/
     --person-line1-text-color: blue;