Skip to content

Font format incorrect import in theme #29719

Closed
@mrtuvn

Description

@mrtuvn

Preconditions:

Magento 2.4-develop

Default magento font import lib-font-face use type woff or woff2. In real case when user use another font type such as true type. Font import will work incorrect if add format truetype

Example in less define custom font

.lib-font-face( @family-name: 'Inter-Light', @font-path: '@{baseDir}fonts/Inter-Light', @font-format: 'ttf', @font-weight: normal, @font-style: normal, @font-display: auto );

will generate css font-face

@font-face { font-family: 'Inter-Light'; src: url('../fonts/Inter-Light.ttf') format('ttf'); font-weight: normal; font-style: normal; font-display: auto; }
format font src seem incorrect in the case truetype. Reference in this doc

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

src: url('../fonts/Inter-Light.ttf') format('ttf') should be

src: url('../fonts/Inter-Light.ttf') format('truetype');

Steps to Reproduce:

  1. Tested with font added with /web/css/source/_typography.less inside luma/blank theme or custom theme
  2. Use custom font non-default from magento (ttf, eot)
  3. use format specific while import font
  4. Also use type font specific too
  5. Make sure output css render and page load without problem. Font render correctly

Actual Result: ✖️

Font not render properly
font_before_change

styles-m.css render with font
Screenshot from 2020-10-05 21-26-58

Expected Result: ✔️

import
font_after_import
render styles-m.css
font_render_after
web font request
font_after_change

Proposed solution

--- Update mixin font with new type font argument in order import correct type
Please provide Severity assessment for the Issue as Reporter. This information will help during Confirmation and Issue triage processes.

  • Severity: S0 - Affects critical data or functionality and leaves users with no workaround.
  • Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
  • Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
  • Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
  • Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

Metadata

Metadata

Assignees

Labels

Fixed in 2.4.xThe issue has been fixed in 2.4-develop branchIssue: ConfirmedGate 3 Passed. Manual verification of the issue completed. Issue is confirmedIssue: Format is validGate 1 Passed. Automatic verification of issue format passedIssue: Ready for WorkGate 4. Acknowledged. Issue is added to backlog and ready for developmentPriority: P3May be fixed according to the position in the backlog.Progress: doneReported on 2.4.0Indicates original Magento version for the Issue report.Reproduced on 2.4.xThe issue has been reproduced on latest 2.4-develop branchSeverity: S3Affects non-critical data or functionality and does not force users to employ a workaround.Triage: Dev.ExperienceIssue related to Developer Experience and needs help with Triage to Confirm or Reject it

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions