View source for Changing Fonts with Custom CSS

{{#seo:
|title=Custom Features - SimplyBook.me
|titlemode=append
|keywords=faq, frequently asked questions, booking software, appointment system questions, appointments online, calendar software, booking system, booking calendar, scheduling software, online appointment scheduling, online scheduling, plugins, custom features, additional functionality, custom css, changing booking page fonts, chnaging fonts with CSS
}}


One of the most common Custom CSS customizations is changing the font used on your scheduling page.
<p>
'''Option 1 — Google Fonts (Recommended)'''
</p>
We recommend using '''Google Fonts''', most fonts are free to use, including commercially. 
Browse available fonts [https://fonts.google.com/ here].

Example:
<pre>
   @import url('https://fonts.googleapis.com/css?family=Oswald');
:not(.fa):not(.fi) {
font-family: 'Oswald' !important;
}
</pre>
<p>Save the CSS, clear cache and refresh your booking page.</p>
<p>'''Option 2 — Your own hosted font'''</p>
If your company has its own licensed font, you can reference it from your own hosting.
<p>Example:</p>
<pre>
   @font-face {
    font-family: 'MyCompanyFont';
    src: url('https://your-domain.com/fonts/MyCompanyFont.woff2') format('woff2');
   }
   :not(.fa):not(.fi)  {
    font-family: 'MyCompanyFont', sans-serif !important;
   }
</pre>
<br>
<br>
<p>'''Please note!'''</p>
If you use fonts '''other than Google Fonts''':
<p>
* you are responsible for obtaining the appropriate font license;</p>
<p>
* you must host the font files yourself;</p>
<p>
* SimplyBook.me does not provide or host font files.</p>
<p>Support can assist with simple CSS syntax and applying Google Fonts, but cannot '''source, upload, or host''' non-Google font files.</p>
<br><br>