# Lora Font

**URL:** <https://community.hubspot.com/t/lora-font/124896>\
**Category:** CMS Development\
**Tags:** starter\
**Created:** [January 28, 2025, 8:34am UTC](https://community.hubspot.com/t/lora-font/124896 "2025-01-28T08:34:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![SBhatti](https://avatars.discourse-cdn.com/v4/letter/s/b3f665/32.png) [@SBhatti](https://community.hubspot.com/u/SBhatti)\
**Post date:** [January 28, 2025, 8:34am UTC](https://community.hubspot.com/t/lora-font/124896/1 "2025-01-28T08:34:37Z")

</div>

Hi

Has anyone had any issus creating custom modules with Lora fonts? It doesnt seem to recinise it and HubSpot seems to be overriding with a default font.

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [January 28, 2025, 3:33pm UTC](https://community.hubspot.com/t/lora-font/124896/2 "2025-01-28T15:33:26Z")

</div>

Hey @SBhatti,

it depends on how your setup is and therefore there are quite a few potential places you can look at.

**1. The theme setup**

Usually themes come with a font option for at least text(paragraph) and headlines. This means that somewhere in the theme - most likely theme-ovewrite.css (might be called different) there’s something like

```lia-code-sample
body{
font-family: {{ theme.fonts.body_font }};
}

h1,h2,h3...{
font-family: {{ theme.fonts.headline_font }};
}

```

(^ only as example - can be completely different)

If this is the case, then everything except the h-tags will get the body font.

There might be more specific CSS rules hidden somewhere in the CSS setup like

```lia-code-sample
.card h3{
font-family: {{theme.fonts.body_font }}
}

```

if this should be the case, then the h3 in the card element will have the body font - regardless of the fact there’s a definition for all headlines above it.

This is due to the fact that CSS rules are implemented top to bottom. What comes last, overwrites the previous rules.

The only exception is the “!important” tag. It’s like a sledgehammer and I don’t recommend using it because you’ll get down the rabbit hole real quick with this. An “!important” tag can be overwritten only by a different “!important” and so on.

**2. Module setup**

Check your module setup.

If you like to provide font options to the user - something I don’t recommend - you can add your css styles to the module.html area/file like this:

```lia-code-sample
{% require_css %}
<style>
{% scope_css %}
.some-class{
font-family: {{ module.style.font_field.font|escape_attr }};
}
{% end_scope_css %}
</style>
{% end_require_css %}

```

the **require\_css** tag will tell HubSpot, that some CSS rules are inside and therefore the code should be placed inside the \<head\>-tag

the **scope\_css** tag will tell HubSpot, that the following CSS rules should be generated per module instance. It’s good if you like to have several module instances with seperated styling on a single page.

One thing that you should also check:

Your theme should have a base.html, layout.html … something file which should be located in templates/layout or so. Since the CSS is working from top to bottom, check the order of your CSS in there.

1. main.css (if your theme has something like this)

2. theme-overwrite.css

3. {{ standard\_header\_includes }} ← this is a specific HS code that is required.

4. optional: {{ template\_css }}

if the standard\_header\_includes are above the main.css or theme-overwrite.css, than all module CSS files are being outruled by the files below.

Just another element you can check.

**3. Module field**

Check if you’re using the right variable. to do this, you can use the |pprint filter and put the following code like

`{{ module.styles.headline_font.font|pprint }}`

somewhere in the module. While previewing it, you should see the result and therefore debug a bit better 🙂

hope this helps

best,

Anton