Using a custom font in a Django project without relying on the Google Fonts API

Question

Using a custom font in a Django project without relying on the Google Fonts API

I've hit a roadblock in my programming journey and I'm seeking help. As a newcomer to both programming and Django, I've been following a helpful tutorial up until part 4.

Everything was going well until I stumbled upon a new font online called Crimson Foam that I'd like to use for the Django "logo" in the top bar, instead of the Google font used in the tutorial.

The issue is, I'm unsure how to incorporate this font into my base.html file and what steps to take with my CSS files (I know they are required). Here's how my static files are organized:

-- static
 |--fonts
 | |--crimson_foam.ttf
 |
 |--css
   |-- app2.css
   |-- bootstrap files

I attempted the following setup:

templates/base.html

{% load static %}<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{% block title %}Django Boards{% endblock %}</title>
    <link href="{% static 'fonts/crimson_foam.ttf' %}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/app2.css' %}">
  </head>
Rest of the html file

I experimented with two versions of the .css file:

static/css/app2.css

Version 1:

title {
    color:#FAB4FF;
    font-family: "Crimson foam";      #didnt know what to put there
}

Version 2:

.navbar_brand {
    font-family: "Crimson foam", regular;
}

To be honest, I am feeling overwhelmed by the vast amount of information related to Django. While there are similar threads discussing this topic, they don't specifically address the HTML base file, which is where I'm struggling. Any assistance would be greatly appreciated!

Thank you all in advance for taking the time to read through this lengthy explanation!

html css django fonts

Answer 1

Answer №1

For anyone searching for the solution to my query, I have found an answer:

The technique I used involves a css method known as @font-face.

To achieve the desired outcome, we need to include the following code in our css file:

css/app2.css

@font-face {
    font-family: "Choose any name for your font";
    src: url("either an absolute path or a relative path from your directory");
}

# In my example, the code appeared like this:

@font-face {
    font-family: "Crimson Foam";
    src: url("../fonts/crimson_foam.ttf);
}

This way, you add the font named "Crimson Foam" to your list of available fonts. Multiple @font-face methods can be included in one .css file.

To use the newly declared font, you can do either of the following:

Assign it to a specific html tag:

html-tag.your_method_name {
    font-family: "One of the fonts assigned with @font-face", style (such as regular or cursive);
    font-size: A percentage (e.g., 150%) or pixel value like "36px";
}

# In my case, it looked like this:

h1.crimson_method {
    font-family: Crimson Foam, regular;
    font-size: 30px;
}

You can also create a font method without associating it with a specific tag, which may appear as follows:

.method_name {
    font-family: "";
    font-size: "";
}

Once you have done that, you must also reference your method name in your html file within the class="something" section. This could look like the following:

{% load static %}<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title class="crimson_method">{% block title %}Django Boards{% endblock %}</title>
  </head>
Rest of the html file

The links mentioned in the html part of my question were used to link to a site where I obtained google fonts. There is also a method for incorporating google fonts, but there are numerous tutorials available on the web for that topic, such as this one.

Answer 2

For anyone searching for the solution to my query, I have found an answer:

The technique I used involves a css method known as @font-face.

To achieve the desired outcome, we need to include the following code in our css file:

css/app2.css

@font-face {
    font-family: "Choose any name for your font";
    src: url("either an absolute path or a relative path from your directory");
}

# In my example, the code appeared like this:

@font-face {
    font-family: "Crimson Foam";
    src: url("../fonts/crimson_foam.ttf);
}

This way, you add the font named "Crimson Foam" to your list of available fonts. Multiple @font-face methods can be included in one .css file.

To use the newly declared font, you can do either of the following:

Assign it to a specific html tag:

html-tag.your_method_name {
    font-family: "One of the fonts assigned with @font-face", style (such as regular or cursive);
    font-size: A percentage (e.g., 150%) or pixel value like "36px";
}

# In my case, it looked like this:

h1.crimson_method {
    font-family: Crimson Foam, regular;
    font-size: 30px;
}

You can also create a font method without associating it with a specific tag, which may appear as follows:

.method_name {
    font-family: "";
    font-size: "";
}

Once you have done that, you must also reference your method name in your html file within the class="something" section. This could look like the following:

{% load static %}<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title class="crimson_method">{% block title %}Django Boards{% endblock %}</title>
  </head>
Rest of the html file

The links mentioned in the html part of my question were used to link to a site where I obtained google fonts. There is also a method for incorporating google fonts, but there are numerous tutorials available on the web for that topic, such as this one.

Using a custom font in a Django project without relying on the Google Fonts API

Answer №1

Similar questions

What is the best way to showcase data from input fields within a bootstrap modal dialog?

How can an input field with a checkbox type be properly placed within a table data tag in a table nested within an AngularJS modal?

Troubleshooting problem with Ajax responseText

Django is successfully loading CSS, but images and javascript files are not found with a 404 error

Exploring XPath: strategies for excluding text within nested elements

Tips for adjusting the color of a row when hovering

I noticed a significant space below the footer on my webpage. As a first-time website creator, are there any solutions to this

Reset the queue for the slideDown animation using jQuery

Eliminate any additional spacing within the pre/code tags

Is there a way to showcase every published WordPress page in a drop-down menu?

Streamlining the process of formatting URLs?

Challenges encountered with Material-UI elements

What is the best way to align three images horizontally using bootstrap?

What is the best way to integrate HTML templates into AngularJS?

Is there a way to refresh only a specific div when clicked?

The total sum of various divs containing a mix of numbers and letters

Firefox won't trigger the `beforeunload` event unless I interact with the webpage by clicking on it

The HTML code displays the changes in output after resizing the screen

Adjusting the color of text based on the fulfillment of a condition

When combining <a> with the class line-through, the line does not appear