Custom fonts not working #130

fvlasie · 2023-05-10T06:19:57Z

fvlasie
May 10, 2023

Hello!

I cannot get the fonts to work. :(

I have followed the instructions here to set up custom fonts: https://breezefront.com/docs/custom-fonts#adding-local-font-using-font-face-rule

I am using a local font, CormorantInfant, that I downloaded from Google fonts.

I have added the following code to app/design/frontend/Local/breeze-custom/Magento_Theme/layout/breeze_default.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link rel="preload" src_type="url" src="fonts/CormorantInfant-Regular.ttf"/>
    </head>
</page>

I realise that I am only preloading one font file but it should work for testing right?

I have added the following code to app/design/frontend/Local/breeze-custom/web/css/_extend.less:

@import "custom/base/_fonts.less"

@base__font-family: 'CormorantInfant', serif;
@block-title__font-family: 'CormorantInfant', serif;
@hero-block-title__font-family: 'CormorantInfant', serif;
@button__font-family: 'Arial', sans-serif;

& when (@critical) {
    h1 {
        font-family: 'CormorantInfant', serif;
    }
}

I have added the following code to app/design/frontend/Local/breeze-custom/web/css/_fonts.less:

& when (@critical) {
    @font-face {
        font-family: 'CormorantInfant';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(../fonts/CormorantInfant-Light.ttf) format('ttf');
    }
    @font-face {
        font-family: 'CormorantInfant';
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: url(../fonts/CormorantInfant-LightItalic.ttf) format('ttf');
    }
    @font-face {
        font-family: 'CormorantInfant';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(../fonts/CormorantInfant-Regular.ttf) format('ttf');
    }
    @font-face {
        font-family: 'CormorantInfant';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url(../fonts/CormorantInfant-Italic.ttf) format('ttf');
    }
    @font-face {
        font-family: 'CormorantInfant';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(../fonts/CormorantInfant-Medium.ttf) format('ttf');
    }
    @font-face {
        font-family: 'CormorantInfant';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: url(../fonts/CormorantInfant-MediumItalic.ttf) format('ttf');
    }
    @font-face {
        font-family: 'CormorantInfant';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url(../fonts/CormorantInfant-SemiBold.ttf) format('ttf');
    }
    @font-face {
        font-family: 'CormorantInfant';
        font-style: italic;
        font-weight: 600;
        font-display: swap;
        src: url(../fonts/CormorantInfant-SemiBoldItalic.ttf) format('ttf');
    }
    @font-face {
        font-family: 'CormorantInfant';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(../fonts/CormorantInfant-Bold.ttf) format('ttf');
    }
    @font-face {
        font-family: 'CormorantInfant';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: url(../fonts/CormorantInfant-BoldItalic.ttf) format('ttf');
    }

}

Any help would be very much appreciated!

Answered by fvlasie

May 10, 2023

OK I got it to work by making these changes:

In app/design/frontend/Local/breeze-custom/Magento_Theme/layout/breeze_default.xml:

       <link src_type="url" src="fonts/CormorantInfant-Regular.ttf" rel="preload" as="font" type="font/ttf" />

In app/design/frontend/Local/breeze-custom/web/css/_extend.less:

@import "_fonts";

In app/design/frontend/Local/breeze-custom/web/css/_fonts.less I changed each instance of format('ttf') to format('truetype').

And last but not least, the selinux context was wrong on my font files so I ran sudo semanage fcontext -a -t httpd_sys_rw_content_t '/var/www/html/pub/static(/.*)?' and sudo restorecon -Rv '/var/www/html/'

View full answer

fvlasie · 2023-05-10T08:33:05Z

fvlasie
May 10, 2023
Author

OK I got it to work by making these changes:

In app/design/frontend/Local/breeze-custom/Magento_Theme/layout/breeze_default.xml:

       <link src_type="url" src="fonts/CormorantInfant-Regular.ttf" rel="preload" as="font" type="font/ttf" />

In app/design/frontend/Local/breeze-custom/web/css/_extend.less:

@import "_fonts";

In app/design/frontend/Local/breeze-custom/web/css/_fonts.less I changed each instance of format('ttf') to format('truetype').

And last but not least, the selinux context was wrong on my font files so I ran sudo semanage fcontext -a -t httpd_sys_rw_content_t '/var/www/html/pub/static(/.*)?' and sudo restorecon -Rv '/var/www/html/'

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Breeze Frontend

Custom fonts not working #130

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Breeze Frontend

Custom fonts not working #130

Uh oh!

fvlasie May 10, 2023

Replies: 1 comment

Uh oh!

Uh oh!

fvlasie May 10, 2023 Author

fvlasie
May 10, 2023

fvlasie
May 10, 2023
Author