pretendard 가변 다이나믹 서브셋 사용방법 #148
-
|
안녕하세요. pretendard 폰트 용량을 줄이고자 기존 다이나믹 서브셋보다 적은 용량의 '가변 다이나믹 서브셋'을 사용하고자 합니다. https://github.com/orioncactus/pretendard 링크의 가변 다이나믹 서브셋 css 추가후 어떤 방식으로 각 글자마다 폰트를 변경하여 사용할 수 있는건가요? 참고로 워드프레스 기반 사이트에 해당 폰트를 적용하고자합니다. 확인부탁드립니다. 감사합니다. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
font-family로 지정하시면 됩니다. 가변 다이나믹 서브셋은 자동적으로 해당 폰트가 적용된 글자만큼만 폰트를 로딩하고 있습니다. font-family: "Pretendard Variable", ...;이런 식의 코드를 해당 폰트를 적용하고자 하는 element나 글자별로 적용을 원하시면 글자별로 element를 상위에 두어 css에 설정해 주시면 됩니다. Example) <!DOCHTML HTML>
<html>
<head>
<meta charset="UTF-8">
<!-- S: Optional - Preload -->
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
<link rel="preload" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css" />
<!-- E: Optional - Preload -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css" />
</head>
<body>
<h1 style="font-family: 'Pretendard Variable', sans-serif;">Hello, World!</h1>
</body>
</html>워드프레스는 제가 사용하지 않아 잘 모르겠으나, font-family를 css 속성으로 주는 것은 동일합니다. |
Beta Was this translation helpful? Give feedback.
-
|
@kms0219kms 님, 이렇게 사용 방법을 알려주셔서 감사드립니다! @kms0219kms 님께서 알려주신 것처럼, head 태그에 Pretendard Variable CDN URL가 포함된 link 태그를 넣어주시고, css에서 원하는 font-family에 참고로 head에 아래와 같이 preconnect와 preload를 정의해두면 해당 에셋을 우선해서 불러올 수 있어서, 참고하시면 좋을 듯합니다 :D <head>
...
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
<link rel="preload" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css" />
...
</head> |
Beta Was this translation helpful? Give feedback.
font-family로 지정하시면 됩니다. 가변 다이나믹 서브셋은 자동적으로 해당 폰트가 적용된 글자만큼만 폰트를 로딩하고 있습니다.
이런 식의 코드를 해당 폰트를 적용하고자 하는 element나 글자별로 적용을 원하시면 글자별로 element를 상위에 두어 css에 설정해 주시면 됩니다.
Example)