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 the booking page Microsoft hosts, 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 the Microsoft-hosted 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.

The answer to a 2026 Microsoft Q&A question about custom backgrounds was that they aren't supported, with a suggestion to embed the page on your own site instead. Embedding changes what surrounds the booking page, not the page itself. A 2026 Microsoft Q&A answer about fitting Bookings into a custom website put it plainly: "The native Bookings page does not support complete HTML/CSS customization."

Fonts on the booking page and in emails#

The booking page loads its fonts from Microsoft's own font CDN: when we checked on 2 October 2026, the page's HTML set fontBaseUrl to //res.public.onecdn.static.microsoft/assets/mail/fonts/v1. That is Microsoft's own interface font. Microsoft doesn't document which typeface it is, and there's no setting to swap it for yours.

Confirmation and reminder emails are Microsoft templates too. The only thing you add is text, in the fields on each service's Notifications page, so the font can't change there either (customising the confirmation email).

If your customers write in a script that renders badly, you can't fix it with a font: in a 2020 Microsoft Q&A thread, a hospital asked to add a Karen-language font because text in Bookings invites was mangled, and the answer was that fonts can't be changed.

Options that actually change the look#

• Style everything around the frame. Use your brand font for the heading, intro and button text around the frame; the booking page inside keeps Microsoft's font. Put a branded header and your copy above and below the iframe on your own page. Visitors see your site with the Bookings page in the middle. The branding guide walks through this setup.
• 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 the Microsoft design on the booking page.
• Build your own front end on Microsoft Graph. The Microsoft Graph Bookings API lets a developer build a fully custom booking form. It needs an app registration, admin consent, a server to hold the credentials 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, font 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. Four templates, the accent colour and light or dark mode are free; four more templates and badge removal are on paid plans, along with the styling options: five font choices (System, Geist, Serif, Rounded and Mono), corner radius, density, button style and background. Those are five built-in font stacks, not an upload of your own font file, and the widget doesn't inherit your site's font. Microsoft's confirmation emails keep Microsoft's font. You can set the font once for every widget under workspace defaults. Browse the templates or see how the embed works. BookingsXP is independent and not affiliated with or endorsed by Microsoft.