Seeking Help with Google Fonts Issue - 403 Forbidden Error

Hi Everyone,

We’re experiencing a challenge in our application related to the use of Google fonts in a dynamic HTML.

Here are the approaches I’ve attempted without success:

  • using an href
  • using the tag style
  • converting the fonts in base64

Despite these efforts, I’m confronted with the following error: 403 Forbidden – you don’t have permission to access this resource.

I have a couple of questions and would be grateful for any insights:

  • Are there security reasons that could prevent the use of Google Fonts, whether directly or indirectly? Is this a possibility?
  • Has anyone successfully implemented Google Fonts in their application and could share their approach?

Thank you in advance for your assistance and insights!

Karam

Hi Karam,

Just to be sure, are you trying use these fonts in the context of a VIKTOR WebView?

Yes, precisely!

The design_brief here is the entire HTML page generated based on the inputs, including a reference or a tag with our CSS.

@WebView('Design Brief', duration_guess=1)
    def show_design_brief(self, params, **kwargs):
        """Return a WebResult object with a design brief (str)."""
        obj = safe_call(self.calculate_result, params, **kwargs)

        design_brief = self.get_html_result(
            obj=obj,
            params=params,
            **kwargs)

        return WebResult(html=design_brief)

We figured it might be the case we are not be able to access fonts files in our directory for security reasons, as the other components of the CSS that are not fonts/files work just fine.

We are looking for a workaround.

Hi again,

I’ve been in contact with our front-end team about this and they’ve managed to get it to work by simply importing the font from a url. A snippet of what that would look like in html code:

<!DOCTYPE html>
<html>
  <head>
    <title>Google fonts import</title>
    <meta charset="UTF-8" />

    <style>
      @import url("https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap");

      .fancy-text {
        font-size: 48px;
        font-family: "Dancing Script", cursive;
        color: green;
      }
    </style>
  </head>

  <body>
    <div class="fancy-text">Hello world</div>
  </body>
</html>

Would that be a possible solution for you?

In my test this shows up very fancy :wink:

2 Likes