Specifying font in HTML component

App Building
1
  • Goal:
    I am trying to use the Aleo font package from google in a html component in Retool
  • Steps:
    Here is my html code so far
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample Title</title>
    <!-- Preconnect to Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Import the Aleo font from Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,900;1,900&display=swap" rel="stylesheet">
    <!-- Link CSS file -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- Apply Aleo font to the dynamic text with CSS class -->
        <h1 class="aleo-heading">Welcome to Retool!</h1>
        <p>This is a sample paragraph using the default font.</p>
        <!-- Other HTML content -->
    </div>
</body>
</html>

and CSS:

.aleo-heading {
    font-family: 'Aleo', serif; /* Specify Aleo font without fallback */
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

  • Details:

  • Screenshots: This falls back to serif font rather than Aleo
    image

2

Hi @ttam_ei

The HTML component strips some HTML tags such as body, head, script, link, style, therefore it doesn't allow to load external resources.

It's meant to render chunk of html, not web pages.
For such case, use the IFrame instead.

Hope this help