How to pass a value in a Django drop down from a ModelForm

I want to display different fonts for users from a drop-down. The drop-down derives its values from the model which has choices option. The problem is when a certain font is chosen, it saves well in the database but the “value” is not caught.

Here is the flow of the project:

Model:

class Company(models.Model): 
    name = models.CharField(max_length=100, null=True, blank=True
    first_font = models.CharField(max_length=100, choices=header_font, blank=True, null=True)
    second_font = models.CharField(max_length=100, choices=body_font, blank=True, null=True)

    class Meta:
        verbose_name_plural = "Companies"
    
    def __str__(self):
        return self.name

Forms.py

class CompanyForm(forms.ModelForm):

    def __init__(self, *args, user=None,  **kwargs):
        super(CompanyForm, self).__init__(*args, **kwargs)

        self.fields['first_font'].widget.attrs = {'class': 'select',}
        self.fields['second_font'].widget.attrs = {'class': 'select',}
    
    class Meta:
        model = Company
        fields = ('first_font', 'second_font',)

Template output:

I have used HTMX to take the value of the drop-down and pass it to a partial template so that it can be inserted in a class and return a well-formatted sentence with the font applied.

<form action="" method="POST" enctype="multipart/form-data">
  <div class="column is-4">
   <h2>Choose fonts for documents</h2>
  <div class="field">
   <label class="label">Heading Font</label>
   
  <div class="select is-fullwidth"
  name = "heading_font"
  hx-get="{% url 'main_font' %}"
  hx-target="#main-font"
  hx-trigger="change"
  >
  {{ form.first_font }}

 </div>
  <div id="main-font">
    <p>This is your font</p>
 </div>
 </div>
 <div class="field">
 <label class="label">Body Font</label>

 <div class="select is-fullwidth"
  name = "body_font"
  hx-get="{% url 'secondary_font' %}"
  hx-target="#secondary-font"
  hx-trigger="change"
  >
  {{form.second_font }}
  
 </div>

 <div id="secondary-font">
  <p>This is your font</p>
 </div>
 </div>

 </div>
 </form>

Here is the partial template example for Second Font:

<p class="second-display">
    This is your main body font
 <p>{{chosen}}</p>
 </p>

 <style>
 .second-display {
    font-family: {{chosen}};
    font-size: 30px;
    font-style: bold;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  </style>

And finally the two partial views that will return the above template, for secondary_font. The issue is the value that is supposed to be stored in the “chosen” variable is not getting caught and not sent to the above partial. How do I get the right “value”?

@login_required(login_url='login')
def main_font(request):
    chosen = request.GET.get('heading_font')
    return render(request, 'company/first-font.html', {'chosen': chosen})

@login_required(login_url='login')
def secondary_font(request):
    chosen = request.GET.get('body_font')
    return render(request, 'company/second-font.html', {'chosen': chosen})

I will appreciate any help and pointers.