CODEWITHSUNDEEP
pythoncssfontsflask
qasimalbaqali
qasimalbaqali

Reputation: 2131

Adding Google Fonts to Flask

So with flask I know that I can add CSS with 

<link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />

but if I am adding a google font which usually in HTML looks like 

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

what do I need to edit/add for it to work with Flask?

Upvotes: 3

Views: 5993

Answers (2)

Topaz
Topaz

Reputation: 61

Add the google font link to your index.html or any page that you want like this: 

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename= 'mystyle.css') }}">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
{% endblock %}

Then, add the CSS font statement to your custom CSS file (mine is static/mysyle.css) :

body {
    font-family: 'Open Sans Condensed', sans-serif;`
}

Upvotes: 6

aneroid
aneroid

Reputation: 16137

You can't use static here like you would normally for a link to a resource on the webserver. Your link is still essentially static but not related to anything you are serving. So you either put the Google font link directly in the HTML template, or as a variable expanding to the full link (which would be convenient if you aren't using the same header template everywhere and may change the font later).

Upvotes: 2

Related Questions