diff --git a/public/images/nextjs-chrome-extension-error/chrome-extension-error.avif b/public/images/nextjs-chrome-extension-error/chrome-extension-error.avif new file mode 100644 index 0000000..feb1281 Binary files /dev/null and b/public/images/nextjs-chrome-extension-error/chrome-extension-error.avif differ diff --git a/public/images/pretendard-safari/italic-after.avif b/public/images/pretendard-safari/italic-after.avif new file mode 100644 index 0000000..3f23b94 Binary files /dev/null and b/public/images/pretendard-safari/italic-after.avif differ diff --git a/public/images/pretendard-safari/italic-before.avif b/public/images/pretendard-safari/italic-before.avif new file mode 100644 index 0000000..f9464ab Binary files /dev/null and b/public/images/pretendard-safari/italic-before.avif differ diff --git a/public/images/pretendard-safari/weight-after.avif b/public/images/pretendard-safari/weight-after.avif new file mode 100644 index 0000000..6b3dc5a Binary files /dev/null and b/public/images/pretendard-safari/weight-after.avif differ diff --git a/public/images/pretendard-safari/weight-before.avif b/public/images/pretendard-safari/weight-before.avif new file mode 100644 index 0000000..7900612 Binary files /dev/null and b/public/images/pretendard-safari/weight-before.avif differ diff --git a/scripts/sharp-api.ts b/scripts/sharp-api.ts index df99a9c..a41d111 100644 --- a/scripts/sharp-api.ts +++ b/scripts/sharp-api.ts @@ -35,7 +35,7 @@ export type SharpFileType = keyof typeof SHARP_OPTIONS_TYPE_MAPPER const CONFIG = { imageGlobPattern: 'public/images/**/*.{png,jpg,jpeg,webp,gif}', mdxGlobPattern: 'src/content/post/**/*.mdx', - ignoreList: ['og.png', 'thumbnails/'], + ignoreList: ['og.png'], } export type ProcessedResult = { @@ -83,7 +83,7 @@ export const sharpImages = async () => { try { const filename = path.basename(filePath) - if (CONFIG.ignoreList.includes(filename)) { + if (CONFIG.ignoreList.includes(filename) || filePath.includes('thumbnails/')) { console.log(`::✧:: Skipping ignored file ${filename}`) continue } diff --git a/src/content/post/notes/pretendard-safari.mdx b/src/content/post/notes/pretendard-safari.mdx new file mode 100644 index 0000000..f6358d3 --- /dev/null +++ b/src/content/post/notes/pretendard-safari.mdx @@ -0,0 +1,56 @@ +--- +title: NextJS Pretendard Safari 글꼴 굵기 렌더링 오류 해결 +date: 2025-03-04 +updatedDate: 2025-03-04 +tags: [pretendard safari, nextjs pretendard] +category: cross-browsing +image: '' +--- + +:::note +PretendardVariable 폰트를 사용했을 때 발생한 문제입니다. +::: + +NextJS에서 Pretendard 폰트를 적용했을 때, Semibold 이상의 굵기가 **유독 굵게 렌더링 되는 문제**가 발생했다. + +![좌 Chrome 우 Safari](/images/pretendard-safari/weight-before.avif) + +구글링을 통해 다음 방법으로 해결할 수 있다는 걸 알게 되었다. + +```css +html, +body { + font-synthesis: none; +} +``` + +`font-synthesis: none;`을 적용하면 **브라우저의 강제 합성을 막아** 폰트 굵기가 정상적으로 표시된다. +하지만, 폰트에 특정 굵기(weight)나 italic 스타일이 없으면 브라우저가 합성해 주는 기능도 막혀서 **디자인이 달라질 위험**이 있다. + +![좌 Chrome 우 Safari](/images/pretendard-safari/italic-before.avif) + +`font-synthesis: none;` 적용 후 italic을 테스트해 보니 Chrome과 Safari 모두에서 적용되지 않는 걸 확인할 수 있었다. + +## Pretendard 공식 문서에서 권장하는 방식 + +[Pretendard Github README](https://github.com/orioncactus/pretendard)를 살펴보면, NextJS에서 Pretendard를 사용할 경우 `weight` 속성을 추가하라는 안내가 있다. + +> weight 옵션을 지정하지 않으면 WebKit 기반의 브라우저에서 굵기가 잘못 렌더링 될 수 있으니 주의해 주세요. + +```jsx +import localFont from 'next/font/local' + +const pretendard = localFont({ + src: './fonts/PretendardVariable.woff2', + display: 'swap', + weight: '45 920', // [!code highlight] +}) +``` + +![좌 Chrome 우 Safari](/images/pretendard-safari/weight-after.avif) + +`weight` 값을 추가해 주니 Safari에서의 굵기 렌더링 이슈가 해결되었다. + +![좌 Chrome 우 Safari](/images/pretendard-safari/italic-after.avif) + +italic 역시 정상적으로 적용된다.