Add Google Fonts on RevasOS

Embedding Google Fonts into your RevasOS site is easy and allows you to customize the look of your site with a wide range of typographic styles. Follow the steps below.

Beware of privacy

When adding third-party scripts, such as Google Fonts, that load external resources, it is important to ensure that your site is compliant with privacy regulations, such as GDPR. Make sure you have consent management enabled through a platform such as Iubenda.

Get the Google Fonts Code

1. Access Google Fonts: Go to Google Fonts.
2. Select font: Choose the font you want to use. You can explore the vast library of fonts and choose the ones that best suit your design.
3. Customize the font:

• Select the weights and styles you want (e.g. Regular, Bold, Italic).

4. Get the embed code: After selecting the font, click on Select this style, then go to the Embed section and copy the code that starts with <link> (for web fonts).

---

Insert the Code on RevasOS

To add the code on RevasOS:

1. Go to Your website Dashboard.
2. Click on Settings > Custom Code.
3. Paste the code copied from Google Fonts in the HEAD Code field.
4. Click on Save to apply the changes.

If you want to use the font in specific blocks, you can also add the code in the New code block section and insert the CSS rule to apply it.

---

Apply Fonts

If you want to apply the font to the entire site or to specific selectors, you can create a <style> tag that changes the font for the entire site, or just specific headings or sections.

To add the <style> tag:

1. Go to Your Website Dashboard.
2. Click Settings > Custom Code.
3. Paste the code you copied from Google Fonts into the HEAD Code field.
4. Click Save to apply the changes.

Change the font to all text:

To apply the font to the entire site, you can use the asterisk (*) to select all elements. Add the following code to the HTML code block:

1. Go to Your Website Dashboard.
2. Click Settings > Custom Code.
3. Enter the following code in the HEAD Code field, replacing 'FontName' with the name of the font chosen by Google Fonts:

<style>
* {
font-family: 'FontName', sans-serif;
}
</style>

4. Click Save to apply the changes.

Change the font only for headings

1. Go to Your website Dashboard.
2. Click Settings > Custom Code.
3. Enter the following code in the HEAD Code field, replacing 'FontName' with the name of the font chosen by Google Fonts:

<style>
h1, h2, h3 {
font-family: 'FontName', sans-serif;
}
</style>

4. Click Save to apply your changes.

Change the font only for specific elements:

1. Go to Your Website Dashboard.
2. Click Settings > Custom Code.
3. Enter the following code in the HEAD Code field, replacing 'FontName' with the name of the font you chose from Google Fonts:

<style>
.DefaultBlock--title, .MainBlock--title {
font-family: 'FontName', sans-serif;
}
</style>