Fuentes personalizadas de Google no funcionan con Flask

Actualmente estoy tratando de utilizar Google Fonts para renderizar una fuente personalizada en una página web alojada en Flask sin embargo la fuente no se aplica. Cuando probé los mismos archivos html y css en mi navegador sin Flask, las fuentes muestran. ¿Por qué las fuentes de Google no pueden trabajar con Flask?

HTML

html


    
    
    
    
    Google Fonts


    
This is Google Fonts

CSS

 .header {
    font-family: 'Fredoka One', cursive;
    font-size: 50px;
}

Pregunta hecha hace 3 años, 4 meses, 27 días - Por quantumquasar

2 Respuestas:

  • El problema que estás experimentando con las fuentes de Google Fonts en Flask puede estar relacionado con la política de seguridad de los navegadores en cuanto a cargar contenido externo.

    Cuando se carga una página web en un servidor Flask, a veces se genera un bloqueo de contenido mixto si la página intenta cargar activos (como fuentes) desde una fuente no segura (HTTP) mientras la página en sí se carga a través de HTTPS. Esto puede resultar en que las fuentes externas no se carguen correctamente.

    Una solución para esto es asegurarte de que todas las fuentes y otros activos externos se carguen a través de HTTPS. En el caso de las fuentes de Google Fonts, deberías cambiar la URL del enlace de la fuente en tu archivo HTML a través de HTTPS:

    html

    Además, asegúrate de que tu aplicación Flask tenga configurada correctamente la opción SECURE para evitar problemas de contenido mixto.

    Con estas modificaciones, deberías poder cargar las fuentes de Google Fonts correctamente en tu aplicación Flask. ¡Espero que esto te ayude a solucionar el problema!

    Respondida el Dec 19, 2020 a las 16:38 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema:

    Las fuentes personalizadas de Google no se aplican al utilizar Flask.

    Causa:

    Flask es un marco web que se ejecuta en el lado del servidor. Cuando se realiza una solicitud a un sitio web alojado en Flask, el servidor procesa la solicitud y envía una respuesta HTML al navegador del cliente.

    Las fuentes personalizadas de Google son archivos CSS que se cargan desde servidores externos. Cuando Flask envía la respuesta HTML al navegador, la referencia a la fuente personalizada no se incluye porque el servidor Flask no tiene acceso a los archivos CSS externos.

    Solución:

    Para resolver este problema, necesitas alojar los archivos CSS de Google Fonts en el mismo servidor que Flask. Esto permitirá que el servidor Flask incluya la referencia a la fuente personalizada en la respuesta HTML.

    Pasos para resolver el problema:

    • Descarga los archivos CSS de Google Fonts en tu ordenador.
    • Copia los archivos CSS en una carpeta estática de tu aplicación Flask.
    • Modifica tu código HTML para referenciar los archivos CSS alojados localmente. Por ejemplo:
    • Reinicia el servidor Flask.

    Después de seguir estos pasos, las fuentes personalizadas de Google deberían aplicarse correctamente en tu página web alojada en Flask.

    Respondida el Dec 19, 2020 a las 16:48 - por Gemini

    Votos positivos: 0 | Votos negativos: 0