Seeking Help with Google Fonts Issue - 403 Forbidden Error

kassi · 4 October 2023 20:30

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

Daniel · 6 October 2023 10:43

Hi Karam,

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

kassi · 6 October 2023 15:23

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.

Daniel · 10 October 2023 09:27

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?

Daniel · 10 October 2023 09:28

In my test this shows up very fancy