Font sizes differ between local (hugo server -FD) and production (hugo -FD) builds

support
1

Description:
I’m using the hugo-hero-theme. When running the site locally with hugo server -FD, fonts render as expected. However, after building with hugo -FD and deploying to production, the font sizes appear significantly larger.

What I’ve checked so far:

  • Cleared browser cache—issue persists.
  • No explicit font-size overrides in config.toml.
  • DevTools shows the same CSS rules being applied, but the rendered result differs.

Question:
What could be causing this discrepancy? Could Hugo or the theme process fonts differently in development vs. production builds?

hugo.toml:

baseURL = 'https://myurl.ru/'
theme = 'hugo-hero-theme'
DefaultContentLanguage = "ru"
defaultContentLanguageInSubdir = true

[module]
  [module.hugoVersion]
    extended = true
    min = "0.92.0"

[params]
  google_analytics_id=""

  [params.logo]
    mobile = "images/logo-mobile.svg"
    mobile_height = "36px"
    mobile_width = "36px"
    desktop = "images/logo.svg"
    desktop_height = "29px"
    desktop_width = "217px"
    alt = "My Alt"

[languages]
  [languages.en]
    title = "My Title"
    languageName = "English"
    weight = 1
  [languages.ru]
    title = "Мое Название"
    languageName = "Русский"
    weight = 2
  [languages.en.menus]
    [[languages.en.menus.main]]
      name = "Services"
      url = "/en/services/"
        weight = 1
    [[languages.en.menus.main]]
        name = "Work"
        url = "/en/work/"
        weight = 2
    [[languages.en.menus.main]]
        name = "About"
        url = "/en/about/"
        weight = 3
#    [[languages.en.menus.main]]
#        name = "History"
#        url = "/en/history/"
#        weight = 3
    [[languages.en.menus.main]]
        name = "Contact"
        url = "/en/contact/"
        weight = 4
  [languages.ru.menus]
    [[languages.ru.menus.main]]
      name = "Услуги"
      url = "/ru/services/"
        weight = 1
    [[languages.ru.menus.main]]
        name = "Портфолио"
        url = "/ru/work/"
        weight = 2
    [[languages.ru.menus.main]]
        name = "О нас"
        url = "/ru/about/"
        weight = 3
#    [[languages.ru.menus.main]]
#        name = "История"
#        url = "/ru/history/"
#        weight = 3
    [[languages.ru.menus.main]]
        name = "Контакты"
        url = "/ru/contact/"
        weight = 4

# to be able generate html from .md with html code (pages)
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

[permalinks]
  post = "/:year/:month/:day/:slug/"
  pages = "/:contentbasename/"
2

How much larger? 5%, 50%, 500%?

Are you sure the font family is the same in both places?

1 Like
3

@jmooring about 50% like in the pictures

I remember I used to change hugo hero theme to make fonts smaller (dont remember where exactly) and it worked locally. But seems that it was restored when renning remotely.

image
image294×107 2.46 KB

4

Perhaps you modified the theme instead of overriding its files, and your production pipeline just pulls the virgin theme.

1 Like
5

Hmm, maybe.

Is it possible to not pull the raw theme but rather use the modified files that are within themes\hugo-hero-theme ?

6

That depends on your build/deploy workflow. This would be easier to discuss with access to your project repository.

1 Like
7

Here it is:

Also in developper mode I see an error from the homepage:

Verify stylesheet URLs
This page failed to load a stylesheet from a URL.

1 source
en/:80
8

These font sizes look the same to me:

image
image1739×780 361 KB

1 Like
9

That is strange.

In my local server I see font smaller.

image
image1599×850 155 KB

10

You might try visiting the local site in an incognito window. Other than that, I have no clue other than somehow your local repository doesn’t match the GitHub repository.

1 Like
11

Thank you.

Just tried this.
Loacal incognito also gives smaller fonts.

Ok, I I want to modify fonts so that it would be visible at both local and remote servers where I should change it? What is the best place to do such modifications?

12

That’s a question for the theme author.

1 Like
13

Ohhh… The problem was that I used to have 80% zoom for the local host page and 100% for remote.

That is ashame…

14

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.