Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ios의 경우에만 dynamic한 값에 대한 font-black이 적용되지 않음 #210

Open
chaejung-kim opened this issue Nov 21, 2024 · 0 comments
Open

ios의 경우에만 dynamic한 값에 대한 font-black이 적용되지 않음 #210

chaejung-kim opened this issue Nov 21, 2024 · 0 comments

Comments

@chaejung-kim
Copy link

안녕하세요. 아래와 같은 환경에서 Pretendard를 쓰고 있습니다.

- Next.js 14
- tailwindcss

image

  • layout.tsx
import './globals.css'
import localFont from 'next/font/local'

const pretendard = localFont({
  src: [
    { path: '../../public/fonts/PretendardVariable.woff2', style: 'normal' }
  ],
  display: 'swap',
  weight: '45 920',
  variable: '--font-pretendard'
})

const futura = localFont({
  src: [
    {
      path: '../../public/fonts/Futura-PT_Heavy.woff2',
      weight: '700',
      style: 'normal'
    }
  ],
  variable: '--font-futura'
})

export default function RootLayout({
  children,
  modal
}: {
  children: React.ReactNode
  modal: React.ReactNode
}) {
  return (
    <html lang="ko" className={`${pretendard.variable} ${futura.variable}`}>
      <body className={`${pretendard.className} font-pretendard`}>
        {children}
      </body>
    </html>
  )
}
  • globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Pretendard 기본 폰트 설정 */
:root {
  --font-base: Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

@layer base {

  * {
    @apply border-border;
    font-feature-settings: 'ss05';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

}

/* Pretendard 가변 폰트 기본 설정 */
.font-base {
  font-family:
    var(--font-pretendard),
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    Roboto,
    'Helvetica Neue',
    'Segoe UI',
    'Apple SD Gothic Neo',
    'Noto Sans KR',
    'Malgun Gothic',
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    sans-serif;
}

/* Futura-PT 폰트 설정 */
.font-brand {
  font-family: var(--font-futura), sans-serif;
}
  • tailwind.config.ts
import type { Config } from 'tailwindcss'
import plugin from 'tailwindcss/plugin'
import defaultTheme from 'tailwindcss/defaultTheme'

// https://github.com/themesberg/flowbite/issues/488
const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.tsx',
    './**/src/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}'
  ],

  theme: {
    extend: {
      fontFamily: {
        pretendard: [
          'var(--font-pretendard)',
          'sans-serif',
          ...defaultTheme.fontFamily.sans
        ],
        brand: ['var(--font-futura)', 'sans-serif']
      },

    }
  },
  plugins: [
    /* 생략 */
  ]
}
export default config

여기서 macOS, android의 경우는 아래와 같이 'font-black'이 잘 적용되지만,
image

ios의 경우에만 아래와 같이 폰트 굵기가 들쭉날쭉하게 적용되는 것을 확인했습니다.
image

특이한 점은 정적으로 넣은 값에 대해서는 font-black이 잘 적용되지만, dynamic하게 들어간 값에 대해서 위 현상이 나타나고 있습니다.

관련 이슈 및 해결 방안이 있다면 공유 부탁드리겠습니다.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@chaejung-kim