Как изменить шрифт в форме Django?

Я пишу сайт на django, использую встроенную форму, но шрифт совсем не такой, как в примере. Я не могу сделать текст меньше

мой сайт выглядит как вот так

forms.py

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User


class SignUpForm(UserCreationForm):
    phone_number = forms.CharField(max_length=15, required=True, help_text='Номер телефона в формате +7 9XX XXX XX XX')
    password1 = forms.CharField(
        label='Password',
        strip=False,
        widget=forms.PasswordInput(attrs={"autocomplete": "new-password"}),)

    class Meta:
        model = User
        fields = ('username', 'phone_number', 'email', 'password1', 'password2', )

views.py

from django.contrib.auth import login, authenticate
from django.shortcuts import render, redirect
from .forms import SignUpForm
from .models import Profile


def registration(request):
    if request.method == 'POST':
        form = SignUpForm(request.POST)
        if form.is_valid():
            user = form.save()
            Profile.objects.create(user=user, phone_number=form.cleaned_data.get('phone_number'))
            raw_password = form.cleaned_data.get('password')
            user = authenticate(username=user.username, password=raw_password)
            login(request, user)
            return redirect('/')
    else:
        form = SignUpForm()
    return render(request, 'users/signup.html', {'form': form})

main.html (шаблон)

{% load static %}

{{ '<' }}{{ '!DOCTYPE html>' }}
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="{% static 'main/css/main.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div id="header">
        <span class="logo">Greenhouse</span>
    </div>
    <div id="content">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

signup.html (страница входа в систему)

{% extends "users/main.html" %}

{% block title %}Log-in{% endblock %}
{% block content %}
    <h1>Вход / <a href="">Регистрация</a></h1>
    <div class="form_sign">
        <form method="post">
            {{ form.as_p }}
            {% csrf_token %}
            <p><input type="submit" value="Войти"></p>
        </form>
        <p><a href="">Забыли пароль?</a></p>
    </div>
{% endblock %}

Я даже не могу отформатировать заголовок с помощью css. Буду благодарен за любую помощь.

Проверьте ссылку на CSS: Убедитесь, что файл CSS правильно связан с вашим HTML-файлом. В вашем случае это должно быть {% static 'main/css/main.css' %} в файле main.html.

Использовать

.form_sign {
    font-size: 14px; /* Adjust as needed */
}

h1 {
    color: #333; /* Adjust as needed */
    font-size: 24px; /* Adjust as needed */
}

Напоследок не забудьте очистить cache or hard reload страницу браузера, чтобы увидеть изменения.

Я нашел решение. Я размещаю это для тех, кто, возможно, уже давно ищет ответ на этот вопрос.

добавьте в файл forms.py

class SignUpForm(UserCreationForm):
    ...
    self.fields['username'].label = 'Имя пользователя:'
    self.fields['phone_number'].label = 'Телефон:'
    self.fields['email'].label = 'Почта:'
    self.fields['password1'].label = 'Пароль:'
    self.fields['password2'].label = 'Повторите пароль:'

    self.fields['username'].widget.attrs.update({'class': 'custom-label'})
    self.fields['phone_number'].widget.attrs.update({'class': 'custom-label'})
    self.fields['email'].widget.attrs.update({'class': 'custom-label'})
    self.fields['password1'].widget.attrs.update({'class': 'custom-label'})
    self.fields['password2'].widget.attrs.update({'class': 'custom-label'})
    ...

добавьте в main.css

# for label
.form_sign p {
    font-size: 22px;
}

# for entry field
.custom-label {
    font-size: 20px;
}

Остальные теги изменяются, как и раньше

Буду рад новым ответам с оптимизацией моего кода!

Вернуться на верх