How to import Google fonts into your booking system

IanIan Checkfront
edited March 2016 in Support Tutorials
Some people are looking to add some flair to their booking system and this often includes the use of custom fonts. If you are using Google fonts then then is a way to include these fonts within your booking system.

The first thing to do is decide which font to use that are available at Google Fonts. Once you have found the font that you want to use then you need to copy the import function code for that particular font name by clicking on the Quick Use button.

In this tutorial we will be using the Lobster font so our code will look like:
@import url(https://fonts.googleapis.com/css?family=Lobster);


After you have copied this code then what you will need to do is paste it in your CSS editor by going to Manage->Layout>Booking Page and then click the save button

The next step is to generate your code with the included font name which you will use to integrate Checkfront into your website


More information on implementing your website integration can be found at https://www.checkfront.com/support/docs/integrations

The next step is to paste the code into your website editor and remember to save the file


If these steps are successful then you should see the new font displayed on your Checkfront booking site:

If you look at the above picture you will see that the calendar dates are not shown in the custom font you have chosen so we have to make a few more custom CSS entries to ensure your font is used on the following pages such as the booking form page and payment page. To do this you need to again go to the CSS editor at Manage->Layout-Booking Page and enter these CSS overrides
/*The main booking page*/
#www-booking-reserve {
    font-family: Lobster;
}

/*The invoice Page*/
#www-booking-conf {
    font-family: Lobster;
}

/*For Payment invoice screen*/
#payment fieldset input {
font-family: Lobster;
} /*The custom booking fields*/ .form-control { font-family: Lobster;
} /*The Booking creation page*/ #www-booking-create { font-family: Lobster;
} /*The booking payment page*/ #www-booking-payment { font-family: Lobster;
} /*The booking date*/ #cf-date { font-family: Lobster;
} /*Sidebar month*/ #cf-month { font-family: Lobster;
}
Remember to click the save button to save the custom CSS overrides and then you should see your font apply to all of the booking pages even on your hosted booking page.
Sign In or Register to comment.