How to load shared static files with Python Flask?
Question
We have a server running a basic LAMP stack. Our team has a few existing PHP apps, but we're going to use Python/Flask going forward (we're all new to Flask, hence the flurry of dumb questions). The PHP pages use some shared css & js files, which include bootstrap as well as a custom bootstrap extension built by my company. Since these files existed before the switch to Flask, they obviously live outside my Flask app's directory structure. I'm able to use these shared files by creating symbolic links to them in the Flask app's static directory, but apparently my company's custom bootstrap extension includes some font files that the Flask app can't load:
<my-ip-addr> - - [17/May/2021 09:35:11] "GET /fonts/Neue-haas/display-bold-75.woff2 HTTP/1.1" 404 -
<my-ip-addr> - - [17/May/2021 09:35:11] "GET /fonts/fontawesome-webfont.woff2?v=4.7.0 HTTP/1.1" 404 -
<my-ip-addr> - - [17/May/2021 09:35:11] "GET /fonts/Neue-haas/roman-text-55.woff2 HTTP/1.1" 404 -
<my-ip-addr> - - [17/May/2021 09:35:11] "GET /fonts/Neue-haas/display-bold-75.woff HTTP/1.1" 404 -
<my-ip-addr> - - [17/May/2021 09:35:11] "GET /fonts/fontawesome-webfont.woff?v=4.7.0 HTTP/1.1" 404 -
<my-ip-addr> - - [17/May/2021 09:35:11] "GET /fonts/Neue-haas/roman-text-55.woff HTTP/1.1" 404 -
<my-ip-addr> - - [17/May/2021 09:35:11] "GET /fonts/Neue-haas/display-bold-75.ttf HTTP/1.1" 404 -
<my-ip-addr> - - [17/May/2021 09:35:11] "GET /fonts/fontawesome-webfont.ttf?v=4.7.0 HTTP/1.1" 404 -
<my-ip-addr> - - [17/May/2021 09:35:11] "GET /fonts/Neue-haas/roman-text-55.ttf HTTP/1.1" 404 -
The custom bootstrap extension attempts to load these fonts like so: url(../fonts/Neue-haas/roman-text-55.woff2) format("woff2") . I've created a fonts directory in my Flask app's home directory & copied these fonts into it. Why can't the Flask app find these fonts?
This is my base.html template:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title><*some title*></title>
<!-- Bootstrap core CSS -->
<link href="{{url_for('static', filename='bootstrap.min.css')}}" rel="stylesheet">
<link href="{{url_for('static', filename='<*custom-bootstrap-extension-name*>.min.css')}}" rel="stylesheet">
<! This part I added in response to Jason's comment -->
<style>
@font-face {
font-family: "FontAwesome";
src: url("/static/fontawesome-webfont.woff2?v=4.7.0");
}
</style>
</head>
<body class="container">
{{ header | safe }}
{% block content %}{% endblock %}
{{ footer | safe }}
</body>
<script src="{{url_for('static', filename='jquery.min.js')}}"></script>
<script src="{{url_for('static', filename='bootstrap.min.js')}}"></script>
<script src="{{url_for('static', filename='<*custom-bootstrap-extension-name*>.min.js')}}"></script>
</html>
1 answers
solution1
0 2021-05-17 17:07:46
This worked for me:
@font-face {
font-family: "FontAwesome";
src: url("/static/fonts/fontawesome-webfont.woff2");
}
I added one of these for each font that wasn't loading.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.