--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/customization/custom-fonts' title: 'DXPR Builder에 브랜드 글꼴 설정 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:39:55+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder에는 자체 글꼴 설정이 없습니다. 빌더 페이지의 텍스트는 테마의 글꼴을 사용합니다. 바꾸려면 테마에 웹 글꼴을 불러오고 테마 CSS가 해당 글꼴을 가리키게 합니다. 완료하면 모든 빌더 페이지에 브랜드 글꼴이 표시됩니다. 에디터와 방문자 화면 모두 해당됩니다. 사이트에서 DXPR Theme을 사용 중이면 대신 테마 설정에서 글꼴을 고르세요. tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'DXPR Builder에 브랜드 글꼴 설정' description: |- DXPR Builder에는 자체 글꼴 설정이 없습니다. 빌더 페이지의 텍스트는 테마의 글꼴을 사용합니다. 바꾸려면 테마에 웹 글꼴을 불러오고 테마 CSS가 해당 글꼴을 가리키게 합니다. 완료하면 모든 빌더 페이지에 브랜드 글꼴이 표시됩니다. 에디터와 방문자 화면 모두 해당됩니다. 사이트에서 DXPR Theme을 사용 중이면 대신 테마 설정에서 글꼴을 고르세요. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T01:39:55+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/customization/custom-fonts' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/customization/custom-fonts' description: |- DXPR Builder에는 자체 글꼴 설정이 없습니다. 빌더 페이지의 텍스트는 테마의 글꼴을 사용합니다. 바꾸려면 테마에 웹 글꼴을 불러오고 테마 CSS가 해당 글꼴을 가리키게 합니다. 완료하면 모든 빌더 페이지에 브랜드 글꼴이 표시됩니다. 에디터와 방문자 화면 모두 해당됩니다. 사이트에서 DXPR Theme을 사용 중이면 대신 테마 설정에서 글꼴을 고르세요. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 홈 item: 'https://dxpr.com/ko' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ko --- [Help Center](/ko/node/75)/[Documentation](/ko/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # DXPR Builder에 브랜드 글꼴 설정. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [테마 CSS로 빌더 콘텐츠 스타일 지정](/ko/hc/documentation/learn-dxpr-builder/customization/custom-css) - [Typography](/hc/documentation/learn-dxpr-builder/element-settings/typography) - [아이콘 라이브러리](/ko/hc/documentation/learn-dxpr-builder/customization/icon-libraries) DXPR Builder에는 자체 글꼴 설정이 없습니다. 빌더 페이지의 텍스트는 테마의 글꼴을 사용합니다. 바꾸려면 테마에 웹 글꼴을 불러오고 테마 CSS가 해당 글꼴을 가리키게 합니다. 완료하면 모든 빌더 페이지에 브랜드 글꼴이 표시됩니다. 에디터와 방문자 화면 모두 해당됩니다. 사이트에서 DXPR Theme을 사용 중이면 대신 테마 설정에서 글꼴을 고르세요. ## 시작하기 전에 - 테마 파일에 접근할 수 있습니다. 커스텀 테마나 서브테마를 사용하세요. - 글꼴 라이선스가 웹사이트 사용을 허용하는지 확인하세요. - 단계에서는 `global-styling` 라이브러리와 `css/custom.css`(을)를 사용합니다. 자세한 내용은 [Custom CSS](/ko/hc/documentation/learn-dxpr-builder/customization/custom-css) 문서를 참고하세요. ## 설정 1. 글꼴 스타일시트를 `mytheme.libraries.yml`의 라이브러리에 추가하세요. Google 글꼴의 경우: ```yaml global-styling: css: theme: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap': { type: external } css/custom.css: {} ``` 2. 다음에 글꼴을 설정하세요: `css/custom.css`. ```css body { font-family: 'Inter', sans-serif; } ``` 3. 다음에서 캐시를 비우세요: **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`). 4. 빌더에서 페이지를 열고 **Text** 요소를 보세요. ## 글꼴 직접 호스팅 자체 호스팅 글꼴은 제3자에 대한 요청을 피하므로 개인정보 규정에 중요할 수 있습니다. 1. WOFF2 형식으로 글꼴을 내려받아 테마의 `fonts/` 폴더에 넣으세요. 2. 2단계의 규칙 위에 `css/custom.css`에 각 굵기를 선언하세요: ```css @font-face { font-family: 'BrandFont'; src: url('../fonts/brandfont.woff2') format('woff2'); font-weight: 400; font-display: swap; } ``` 3. 다음 글꼴 이름을 사용하세요: `'BrandFont'`. `font-family` 규칙에 넣고, 라이브러리에서 Google 줄을 제거한 뒤 캐시를 비우세요. ## 표시되는 내용 모든 빌더 요소의 텍스트에 새 글꼴이 적용됩니다. 편집 모드와 게시된 페이지 모두 해당됩니다. 각 요소의 **Style** 패널에서는 여전히 크기와 색상을 설정합니다. 자세한 내용은 [Change text size and colour](/hc/documentation/learn-dxpr-builder/element-settings/typography) 문서를 참고하세요. 텍스트 에디터의 **Font family** 버튼은 기본적으로 꺼져 있습니다. CKEditor의 표준 웹 안전 글꼴이 나열되며 사용자 글꼴이 아니므로, 편집자를 브랜드에 맞게 유지하려면 꺼진 상태로 두세요. ## DXPR Theme DXPR Theme에는 자체 글꼴 설정이 있습니다. **Appearance**(으)로 이동하여 DXPR Theme 설정(`/admin/appearance/settings/dxpr_theme`)을 열고 **Fonts**(을)를 펼치세요. **Base Font**, **Headings**, **Navigation**, **Site Name**, **Blockquote**(을)를 따로 설정하므로 CSS가 필요 없습니다. ## 글꼴이 표시되지 않는 경우 - **텍스트에 여전히 이전 글꼴이 표시됩니다.** 라이브러리가 불러와지지 않았거나 캐시에 이전 CSS가 있습니다. `mytheme.info.yml`에 라이브러리가 나열되는지 확인한 뒤 `/admin/config/development/performance`에서 캐시를 비우세요. - **제목이나 일부 상자에 다른 글꼴이 유지됩니다.** 해당 요소의 테마 규칙이 `body`보다 구체적입니다. 브라우저에서 텍스트를 검사하고 해당 선택자를 규칙에 추가하세요. - **한 문단에 다른 글꼴이 표시됩니다.** 편집자가 **Font family**(을)를 적용했습니다. 텍스트를 선택하고 **Remove format**(을)를 클릭한 뒤 프로필에서 **Font family** 선택을 해제하세요. 자세한 내용은 [Text editor](/ko/hc/documentation/learn-dxpr-builder/customization/text-editor#toolbar-buttons-per-role) 문서를 참고하세요. ## 다음 단계 - [Custom CSS](/ko/hc/documentation/learn-dxpr-builder/customization/custom-css): 이 단계의 기반이 되는 라이브러리와 스타일시트입니다. - [Change text size and colour](/hc/documentation/learn-dxpr-builder/element-settings/typography): 편집자가 요소별로 설정하는 항목입니다. - [Icon libraries](/ko/hc/documentation/learn-dxpr-builder/customization/icon-libraries): DXPR Builder에 포함된 아이콘 글꼴입니다.