Unable to use fonts locally and webfonts #1080

TheoOliveira · 2023-10-13T18:29:44Z

TheoOliveira
Oct 13, 2023

Maizzle Version: latest
Node.js Version: 20.8.0

on my tailwind config i've setup like this

monteserrat: ["'Monteserrat'", 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], gotham: ['Gotham', 'Arial', 'sans-serif']

on my config file like this

/** @type {import('@maizzle/framework').Config} */

module.exports = {
  shorthandCSS: true,
  build: {
    templates: {
      source: 'src/templates',
      destination: {
        path: 'build_local',
      },
      assets: {
        source: ['src/images', 'src/fonts'],
        destination: 'assets',
      },
    },
  },
}

on my main file like this:

<!DOCTYPE {{{ page.doctype || 'html' }}}>
<html
  lang="{{ page.language || 'pt-br' }}"
  xmlns:v="urn:schemas-microsoft-com:vml"
>
  <head>
    <meta charset="{{ page.charset || 'utf-8' }}" />
    <meta name="x-apple-disable-message-reformatting" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="format-detection"
      content="telephone=no, date=no, address=no, email=no, url=no"
    />
    <meta name="color-scheme" content="light dark" />
    <meta name="supported-color-schemes" content="light dark" />

    <!--[if mso]>
      <noscript>
        <xml>
          <o:OfficeDocumentSettings
            xmlns:o="urn:schemas-microsoft-com:office:office"
          >
            <o:PixelsPerInch>96</o:PixelsPerInch>
          </o:OfficeDocumentSettings>
        </xml>
      </noscript>
      <style>
        td,
        th,
        div,
        p,
        a,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-family: "Segoe UI", sans-serif;
          mso-line-height-rule: exactly;
        }
      </style>
    <![endif]-->
    <if condition="page.title">
      <title>{{{ page.title }}}</title>
    </if>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap"
      rel="stylesheet"
    />
    <style>
         @font-face {
        font-family: 'Gotham';
        font-style: normal;
        font-weight: 900;
        src: url("assets/gotham-black.otf") format('otf');
      }
        {{{ page.css }}}
    </style>
    <stack name="head" />
  </head>
  <body
    class="m-0 p-0 w-full [word-break:break-word] [-webkit-font-smoothing:antialiased] {{ page.bodyClass || '' }}"
  >
    <if condition="page.preheader">
      <div class="hidden">
        {{{ page.preheader }}}
        <each loop="item in Array.from(Array(150))"
          >&#8199;&#65279;&#847;
        </each>
      </div>
    </if>
    <div
      role="article"
      aria-roledescription="email"
      aria-label="{{{ page.title || '' }}}"
      lang="{{ page.language || 'en' }}"
    >
      <content />
    </div>
  </body>
</html>

yet the asset is not loaded at all nor i can't access the usage of montserrat

cossssmin · 2023-10-16T12:51:31Z

cossssmin
Oct 16, 2023
Maintainer

Your @font-face declaration is incorrect, format needs to be opentype not otf:

@font-face {
  font-family: 'Gotham';
  font-style: normal;
  font-weight: 900;
- src: url("assets/gotham-black.otf") format('otf');
+ src: url("assets/gotham-black.otf") format('opentype');
}

0 replies

jaywilburn · 2023-11-14T18:28:56Z

jaywilburn
Nov 14, 2023

I'm trying to use fonts that I have in an S3 bucket - is that possible? Does this need to be changed in any way?

@font-face {
      font-family: 'CustomFont';
      font-style: normal;
      font-weight: 400;
      src: url('https://path-to-s3-bucket-fontr.ttf') format('ttf');
  }

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Maizzle

Unable to use fonts locally and webfonts #1080

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Maizzle

Unable to use fonts locally and webfonts #1080

TheoOliveira Oct 13, 2023

Replies: 2 comments

cossssmin Oct 16, 2023 Maintainer

jaywilburn Nov 14, 2023

TheoOliveira
Oct 13, 2023

cossssmin
Oct 16, 2023
Maintainer

jaywilburn
Nov 14, 2023