Minify lowercases CSS font-family declaration

When I minify CSS, the font-family changed to lower case, and it caused an issue with font-awesome pseudo-elements. demo repository for testing somratpro/minify-lowercases-hugo: Minify lowercases CSS font-family declaration (github.com)

I need this

font-family: 'Font Awesome 5 Free';

Hugo generate this after minify

font-family: 'font awesome 5 free';

I tried string, print, variables, scratch but no luck. HELP !!!

I changed the topic title to make it more informative.

Please do not undo my change.

1 Like

cc: @tdewolff

Hello,

What is the issue you have ?
Because I also use FA5 (as a hugo module), I minifiy it, the css name is lowered cased (same as you) and I have no problem.

For example this is an extract of my minified resulting CSS:

url(../webfonts/fa-regular-400.svg#fontawesome)format("svg")}.fab,.far{font-weight:400}@font-face{font-family:"font awesome 5 free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix)format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2)format("woff2"),url(../webfonts/fa-solid-900.woff)format("woff"),url(../webfonts/fa-solid-900.ttf)format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome)format("svg")}.far,.fas{font-family:"font awesome 5 free"}.fas{

And this is my inline partial for the procees.

{{- define "partials/css-process" }}
{{- $css     := .css }}
{{- $isProd  := .isprod  | default hugo.IsProduction }}
{{- $options := .options | default ""}}
{{- $media   := .media   | default "screen"}}
{{- if $isProd }}
   {{- if site.Params.purgecss }}
      {{- $css = $css | resources.PostCSS $options}}
      {{- $css = $css | minify | fingerprint "sha384" | resources.PostProcess }}
   {{- else }}
      {{- $css = $css | minify | fingerprint "sha384" | resources.PostProcess }}
   {{- end }}
{{- else }}
      {{- $css = $css | fingerprint "sha384" }}
{{- end }}
<link rel="preload" href="{{ $css.RelPermalink }}" as="style" media="{{ $media }}" {{ if $isProd }}integrity="{{ $css.Data.Integrity }}"{{ end }}>
<link href="{{ $css.RelPermalink }}" {{ if $isProd }}integrity="{{ $css.Data.Integrity }}"{{ end }} rel="stylesheet" type="text/css" media="{{ $media }}">
{{- end }}

  # Latest fontawesome
  #   $ hugo mod get github.com/FortAwesome/Font-Awesome@5.15.1
  [[module.imports]]
    path = "github.com/FortAwesome/Font-Awesome"
    disable = false
    [[module.imports.mounts]]
      source = "css"
      target = "assets/css/fa-v5"
    [[module.imports.mounts]]
      source = "webfonts"
      target = "static/webfonts"
      # Utiliser "static/css/webfonts" si CSS autonome et pas concat avec autres css.

Thanks for your reply, but I am not using any module or font awesome CSS. I am using font awesome i2svg script, and that caused the issue.

Did you tried to lowercase your call to {{.icon_font}} ?

font-family: "{{ with site.Params.variables }} {{ .icon_font | lower }} {{ end }}";

PS : themefisher themes are still awesome :slight_smile:

I tried every possible way, then I post it.

Ah, OK, i see how it works. Sorry i didn’t knew this FA way of doing things with the js doing the magic.
So. i’m no help.

But just being curious and considering the performance hit you should get with “FA5 SVG icons data-search-pseudo-elements”, what is your use case for not using a classic way for the icon ??

I used it to get rid of render-blocking resources, here you can see an example PageSpeed Insights (google.com)

Ah, interesting. Thanks.

https://www.w3.org/TR/css-fonts-3/#font-family-casing

As part of the font matching algorithm outlined below, user agents must match font family names used in style rules with actual font family names contained in fonts available in a given environment or with font family names defined in @font-face rules. User agents must match these names case insensitively, using the “Default Caseless Matching” algorithm outlined in the Unicode specification [UNICODE].

Given the requirement for a case-insensitive match, I think tdewolff/minify is doing the right thing.

I would try raising an issue with the FA team.

A user-agent is the browser, not the font developer. I wonder what the exact issue is with the font-name being lowercased.

In my use cases I always have the font-face and font-family descriptions in the same files so the minification does apply to all the calls and there wont be any issues.

My point is that minification is not the culprit.