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

How to turn off and on all elements within a Div tag

What is the best way to position a title and subheading alongside an image?

Checking for the Existence of a Database Table in HTML5 Local Storage

Experience mind-bending timing functions in CSS animations with IE11

Error in django boto3: NoCredentialsError - Unable to find valid credentials

Creating an element in react-draggable with two sides bound and two sides open - here's how!

What is the best way to display various dialogs based on the specific button that is clicked?

Customizing button appearances in the control div on Google Maps - A guide

``CSS: Styling a Rounded Div with a Clipped Scrollbar

Is the position relative malfunctioning when using display table-cell?

Tips for making radio button selection mandatory in an HTML5 form

The z-index of two elements seems to be behaving differently than anticipated

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

Unexpected problem with redrawing HTML application in Android WebView

Can I use the mouseover event on an image to display a sibling div?

Exploring Angular2's ability to interpret directive templates using the ng-container

Checking the status of a checkbox after submitting using AngularJs

The div element is finally loading properly after multiple clicks

The transparency feature using rgba is not supported in the Chrome browser for Android

How can you incorporate a custom button into the controlBar on videoJS in responsive mode?