Using Google Fonts in your Django Project

Using Google Fonts in your Django Project

django google fonts - Title

Google Fonts & Django - Django Google Fonts Tutorial

We’ll cover the following in this very brief tutorial:

  • How to Use Google Fonts website
  • How to implement a google font you find to style your content on your Django website (or any website for that matter)
  • Some recommendations on what fonts to use
  • Using multiple Google fonts on the same website
Django Google Fonts Tutorial - How to use Google Fonts website

First thing’s first, we have to make our way over to fonts.google.com

After that, we can browse through an enormous selection of google font styles. 

After finding the one you want, you’ll want to click on the name and click ‘Select this font’ icon. It looks like the example below:

django google fonts - google font image
django google fonts - selecting
Django Google Fonts Tutorial - Implementing your font

Once you’ve selected you’ve selected your Google font and added it, open the family selected menu which should be towards the bottom of your screen. 

This screen will give you information on how to apply the font to your website and how to reference it.

The link href is what you will copy into your styling file or html file. Just depends on personal preference. 

The font-family is what you will call in your css document to change the font. 

Copy the link href and paste it into your html file. There’s a little bit of discrepancy here, on where the proper place to put it is, but I’ve always put it into my actual html file. I’ve added two fonts to my base.html file. They are ‘cookie’ and ‘Montserrat’ – Shown below:

Django Google Fonts - href link

Now, we have to reference the font family on the specific elements of an html page to apply them. Create a css file and link it to your html file. You can see I’ve also done this on the picture above. I’ve linked four css files: navbar.css, page.css, footer.css, and about.css

I try to seperate css files as much as I can whenever I’m extending base.html files – I want to be easily able to find the element I’m wanting to edit rather than have one large css file. 

Here’s my css file:

Django Google Font tutorial - Css implementation

The .subtitle element before each html element is just calling a div class that I have in my html file of ‘subtitle’

You can see this in the photo below. Changing the font of a given element is as simple as calling the element, and assigning the font-family of that element to the reference that the google fonts gives you. 

You can see that the div has the class of subtitle and has multiple h3 and p elements inside of it. The css file above will style all of them. 

Django Google Font tutorial - Css implementation
So let's see the difference:
Django Google Fonts tutorial - sample no CSS

The above image has not had any css applied to its font family, while the one below has been styled with the ‘cookie’ font for the headings and then ‘Montserrat’ font for the paragraph elements. 

Django Google Fonts tutorial - sample CSS

Google fonts are a very powerful tool for any web developer – They save a lot of time in styling your site and making it beautiful. I hope this Django Google Fonts tutorial was able to help you to begin using google fonts to their fullest extent. 

Enjoy the content? Subscribe to the newsletter!

Leave a Reply

Your email address will not be published. Required fields are marked *