Adobe Fonts (Formerly Typekit) on RevasOS

Embedding Adobe Fonts into your RevasOS site is easy and allows you to leverage a vast collection of premium fonts to enhance your site design. Follow the steps below.

Beware of privacy

Remember that when adding external resources, such as Adobe Fonts, it is important to ensure that your site complies with privacy regulations, such as GDPR. Make sure you have consent management enabled through a platform such as Iubenda.

Get Adobe Fonts Code

1. Access Adobe Fonts: Go to Adobe Fonts and log in with your Adobe account.
2. Select the font: Explore the library of available fonts and choose the ones you want to use.
3. Create a Font Kit:

• Once you have chosen your font, click Add to Web Project to create a new "Kit".

4. Get the Embed Code: After creating the Kit, copy the provided code that starts with <script> (for web fonts).

---

Insert the Code on RevasOS

To add the code on RevasOS:

1. Go to Your Website Dashboard.
2. Click Settings > Custom Code.
3. Paste the code copied from Adobe Fonts into the HEAD Code field.
4. Click 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>