Custom font example

by timum

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>timum single instance example</title>
  </head>

  <body>
    <div id="bookingjs" style="margin: 32px"></div>
    <script type="module">
    	import * as timum from 'https://cdn.timum.de/bookingjs/1/latest-rc/booking.js'
      
      timum.init({ 
        ref: 'booking-widget-demo-resource@timum', 
        prdRefs: '3a84f300-574a-11eb-a108-0255636a7558', 
      },     
          {
      typography: {
        // Default font for the whole app
        fontFamily:
          '"Ysabeau Office", Roboto, Helvetica, Arial',
        // Link-based loader will inject <link rel="stylesheet"> for these URLs
        fontSource: [
          // Inter + Sora + Source Serif 4 (regular/700 shown here — adjust as needed)
          // using a google font as an example. timum hosts all its fonts on its own servers.
          'https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&family=Ysabeau+Office:ital,wght@0,1..1000;1,1..1000&display=swap',
        ],
      },
      components: {
        // Use Sora for all MUI Buttons
        MuiButton: {
          styleOverrides: {
            root: {
              fontFamily: '"Tangerine", Roboto, Helvetica, Arial',
            },
          },
        },
        // Use Source Serif 4 for all MUI Links
        MuiLink: {
          styleOverrides: {
            root: {
              fontFamily: '"Tangerine", Roboto, Helvetica, Arial',
            },
          },
        },
      },
    },)
    </script>
  </body>

</html>