Change your front-end font with Google Fonts

Change your front-end font with Google Fonts

Go to the Google Fonts website. Here is the Google Fonts URL: fonts.google.com Search for the Google Font you want to apply to your front-end. Click on a font in the results list to open its page.

Click "Select" at the end of the row for each font weight you want to be able to use on your front-end. We recommend selecting at least the following weights:

• Light
• Regular
• Bold

The list of selected weights is displayed in the right-hand panel. Once all weights are selected, choose the "@import" option.

Then select this portion of code and copy it. Select only the portion of code starting with @ and ending with ; You do not need to copy the

Go to the back-end of your rental platform, under the Administration - Front-end menu. Open the "Pages" tab.

Click on the builder icon of any page. You will not need to repeat this procedure on each page — you are going to modify the CSS stylesheet globally. In the builder, click on the CSS icon to edit your front-end CSS. Paste the portion of code copied from Google Fonts into the editor that opens.

Then add the following snippet:

body {
   font-family: "YYY", sans-serif;
}

In this snippet, replace YYY with the name of your Google Font (for example: Montserrat). Verify the information you have entered. You should have the following result:

@import url('XXX');
body {
  font-family: "YYY", sans-serif;
}

==> XXX being the URL provided in the code copied from Google Fonts ==> YYY being the name of your Google Font

Once the information has been verified, click the "Fermer" button. A notification will inform you that your CSS has been updated. Refresh a page of your front-end and see the font change.