Can I use custom CSS or fonts on Microsoft Bookings?

Why your site's CSS does nothing#

The typical attempt looks like this: someone embeds the booking page on WordPress, opens the browser inspector, finds class names such as .WpLer or .Qkr3P, and adds rules to the theme's custom CSS to fix word wrapping or width. Nothing changes.

That is expected. An iframe loads a separate document from outlook.office.com, and browsers don't let a parent page's CSS or JavaScript style or modify a cross-origin document. Those class names are internal to Microsoft's page, not a public interface, so even if you could target them they could change with any Microsoft release. The Tech Community thread asking exactly this question has had no working answer since 2023.

What your CSS can control is the iframe element itself on your page: its width, height, border, margin and the container around it. That helps with layout problems such as a cut-off or narrow embed (see why the embedded page is cut off or broken on mobile), but not with anything drawn inside the frame.

/* This works: it styles the frame on your page */
.booking-embed iframe {
  width: 100%;
  min-height: 900px;
  border: 0;
}

/* This does nothing: the element lives inside Microsoft's document */
.booking-embed .WpLer {
  word-wrap: break-word;
}

What Microsoft does let you change#

On a shared booking page, go to Booking page and then Customize your page to choose a colour theme and whether to show your logo. The logo itself is uploaded under Business information. The Graph bookingPageSettings resource confirms the full list of appearance-related options: one colour, a logo on/off flag, privacy and terms URLs, and a consent message. There is no font, CSS, background or layout option. Full details are on the logo and colours page.

Microsoft's own answer to a 2026 question about custom backgrounds was that they are not supported, and suggested embedding the page on your own site instead. Embedding changes what surrounds the booking page, not the page itself.

Options that actually change the look#

• Style everything around the frame. Put a branded header, your fonts and your copy above and below the iframe on your own page. Visitors see your site with Microsoft's booking page in the middle.
• Link out instead of embedding. A styled "Book a call" button on your site that opens the Bookings page avoids the look of a mismatched iframe. It keeps your design on your page and Microsoft's on theirs.
• Build your own front end on the Graph API. Microsoft Graph has a Bookings API, so a developer can build a fully custom booking form. It needs an app registration, admin consent and ongoing maintenance.
• Use a widget layer. Covered below.

Doing this with BookingsXP#

BookingsXP draws the booking flow as its own widget on your site, so you choose the template, accent colour, light or dark theme, fonts and corner radius, while bookings are still created in Microsoft Bookings. It uses your public booking page link, with no Microsoft sign-in or admin consent. The extra templates, corner radius and badge removal are on paid plans; browse the templates or see how the embed works. BookingsXP is independent and not affiliated with or endorsed by Microsoft.