How to add custom fonts to Flask?

Viewed 850

I have my own font and I've created their webkit, however I can't load it.

I have used the font previously in some android and desktop apps it runs perfectly.

I've tried in 3 different ways, usign the same app.py file

app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def start():
    return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True)

Attempt # 1

folder structure

-static
--css
---stylesheet.css
---myfont.ttf
-templates
--index.html

stylesheet.css

@font-face{
font-family: myfont;
src: ('myfont.ttf');
}
p {font-family:myfont; color:blue}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="{{url_for('static', filename='css/stylesheet.css')}}" type="text/css"/>
<body>
<p>test</p>
</body>
</html>

Attempt #2

folder structure

-static
--css
---stylesheet.css
---myfont.ttf
---myfont.eot
---myfont.svg
---myfont.woff
-templates
--index.html

stylesheet.css

@font-face{
font-family: myfont;
src: ('myfont.eot');
src: ('myfont.eot?#iefix') format('embedded-opentype'),
     ('myfont.woff') format('woff'),
     ('myfont.ttf') format('truetype'),
     ('myfont.svg#myfont') format('svg');
}
p {font-family:myfont; color:blue}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="{{url_for('static', filename='css/stylesheet.css')}}" type="text/css" />
<body>
<p>test</p>
</body>
</html>

Attempt #3

folder structure

-static
--fonts
---stylesheet.css
---myfont.ttf
---myfont.eot
---myfont.svg
---myfont.woff
-templates
--index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
    @font-face{
    font-family: myfont;
    src: {{ url_for('static',filename='fonts/myfont.eot') }};
    src: {{ url_for('static',filename='fonts/myfont.eot?#iefix') }} format('embedded-opentype'),
         {{ url_for('static',filename='fonts/myfont.woff') }} format('woff'),
         {{ url_for('static',filename='fonts/myfont.ttf') }} format('truetype'),
         {{ url_for('static',filename='fonts/myfont.svg#myfont') }} format('svg');
    }
    p {font-family:myfont; color:green}

    </style>
<body>
<p>prueba</p>
</body>
</html>

I also have checked out this links, but the result is negative again

How do you upload a font to your webpage (is the server needed)?

How to add custom font in python-flask?

2 Answers

You must come back to root directory and then give the directory for stylesheet.

<link rel="stylesheet" href="{{url_for('static', filename='../css/stylesheet.css')}}" type="text/css"/>

and why do you use this type of incuding? use this :

<link rel="stylesheet" href="../css/styesheet.css" type="text/css">

As you are using Flask with render_template, your root directory should look like this:

  • app.py
  • static/style.css
  • templates/index.html

You have to specify your css file inside a static folder and html files inside the templates folder.

After that, add this into your html file:

<link rel= "stylesheet" type= "text/css" 
    href= "{{ url_for('static',filename='style.css') }}">

Hope this will solve your problem.

Related