Font Feature Setting Not Working. Can anyone help me?

[fahmiidris]

When I want to enable single-storey font feature a on Inter font, the css property font-feature-settings doesn't work.

default:

that I want:

[iamhectorsosa]

@fahmiidris-labs can you share the code or source for your api route? By default, @vercel/og only has the Noto Sans font included. If you need to use other fonts, you can pass them in the fonts option. View the custom font example for more details. Hope it helps!

[fahmiidris]

This is my main og component:
/api/articles/default.tsx

import * as React from 'react';
import { ImageResponse } from '@vercel/og';

import type { NextApiRequest, NextApiResponse } from 'next';

export const config = {
  runtime: 'experimental-edge',
};

const fontInterSemiBold = fetch(
  new URL('../../../fonts/Inter-SemiBold.ttf', import.meta.url)
).then((res) => res.arrayBuffer());

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const font = await fontInterSemiBold;

  const { searchParams } = new URL(req.url as string);

  const hasTitle = searchParams.has('title');
  const hasDescription = searchParams.has('description');

  const title = hasTitle
    ? searchParams.get('title')?.slice(0, 50)
    : 'Title Open Graph Generator For Personal Use';

  const description = hasDescription
    ? searchParams.get('description')?.slice(0, 80)
    : 'Description Open Graph Generator';

  try {
    return new ImageResponse(
      (
        <div
          style={{
            display: 'flex',
            height: '100%',
            width: '100%',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'column',
            backgroundImage: 'linear-gradient(to bottom, #dbf4ff, #fff1f1)',
            fontSize: 54,
            fontWeight: 700,
            color: '#1e293b',
            fontFeatureSettings: 'cv11',
          }}
        >
          <div
            style={{
              left: 42,
              top: 42,
              position: 'absolute',
              display: 'flex',
              alignItems: 'center',
            }}
          >
            <span
              style={{
                width: 24,
                height: 24,
                background: '#1e293b',
              }}
            />
            <span
              style={{
                marginLeft: 8,
                fontSize: 20,
              }}
            >
              www.fahmiidris.dev
            </span>
          </div>

          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              maxWidth: 900,
              margin: '0 auto',
            }}
          >
            <div
              style={{
                display: 'flex',
                padding: '5px 40px',
                width: 'auto',
                textAlign: 'center',
                backgroundImage:
                  'linear-gradient(90deg, rgb(0, 124, 240), rgb(0, 223, 216))',
                backgroundClip: 'text',
                WebkitBackgroundClip: 'text',
                color: 'transparent',
                letterSpacing: -2,
              }}
            >
              {title}
            </div>
            <div
              style={{
                display: 'flex',
                fontSize: 24,
                textAlign: 'center',
                margin: '8px auto 0 auto',
                maxWidth: 700,
              }}
            >
              {description}
            </div>
          </div>

          <div
            style={{
              right: 42,
              bottom: 42,
              position: 'absolute',
              display: 'flex',
              alignItems: 'center',
            }}
          >
            <span
              style={{
                marginLeft: 8,
                fontSize: 20,
                color: '#1e293b',
              }}
            >
              www.github.com/fahmiidris-labs
            </span>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
        fonts: [
          {
            name: 'Inter',
            data: font,
            style: 'normal',
            weight: 700,
          },
        ],
      }
    );
  } catch (e: any) {
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
};

export default handler;

And this is my folder structure:

I'm a little less understanding about some types of fonts, but I think in plain jsx, the font ligatures work perfectly.

[iamhectorsosa]

@fahmiidris-labs notice you aren't declaring your font. You'd use the name key you declared in the font array (i.e fontFamily: 'Inter').

Also check supported CSS properties from the Satori library. Not all of them are supported (such as fontFeatureSettings). Hope it works.