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
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
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)
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.