[도구] > [글꼴 관리]를 선택합니다.
[글꼴 관리] 대화 상자를 사용하여 Dreamweaver에서 글꼴 조합을 추가하거나 수정합니다.
2022년 7월 1일부터 Adobe Edge 웹 글꼴은 Dreamweaver 21.2 및 이전 버전에서 사용이 중단됩니다. 웹 사이트에서 Edge 웹 글꼴을 사용 중인 경우 Adobe Fonts 또는 기타 선호하는 글꼴을 사용하여 변경할 수 있습니다.
글꼴 조합은 브라우저에 웹 페이지의 텍스트가 표시되는 모양을 지정합니다. 브라우저는 사용자 시스템에 설치된 글꼴 조합에서 첫 번째 글꼴을 사용합니다. 글꼴 조합에 들어 있는 글꼴 중 설치되어 있는 글꼴이 하나도 없는 경우에는 사용자의 브라우저 환경 설정에 지정된 텍스트가 표시됩니다.
글꼴 목록에 Adobe Edge Web Fonts 추가
웹 페이지에서 Adobe Edge Web Fonts를 사용할 수 있습니다. 페이지에서 Edge 글꼴이 사용되는 경우 JavaScript 파일을 참조하기 위해 추가적인 스크립트 태그가 추가됩니다. 이 파일은 Creative Cloud 서버에서 브라우저의 캐시로 직접 글꼴을 다운로드합니다.
페이지를 표시할 때 사용자 컴퓨터에서 글꼴을 사용할 수 있어도 Creative Cloud 서버에서 글꼴을 다운로드합니다.
예를 들어 “Abel” 글꼴만 사용하는 스크립트 태그의 형식은 다음과 같습니다.
<!--다음 스크립트 태그는 웹 페이지내에서 사용할 수 있도록 Adobe Edge Web Fonts 서버에서 글꼴을 다운로드합니다. 이를 수정하지 않는 것이 좋습니다.-->
<script>var adobewebfontsappname ="dreamweaver"</script>
<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script>
Adobe Edge 글꼴 탭은 글꼴 목록에 추가할 수 있는 Adobe Edge Web Fonts를 모두 표시합니다.
이 목록에서 글꼴을 찾아 글꼴 목록에 추가하려면 다음을 수행하십시오.
- 글꼴 목록에 추가하려는 글꼴을 클릭합니다.
- 글꼴을 선택 해제하려면 글꼴을 다시 클릭합니다.
- 필터를 사용하여 선호하는 글꼴을 선별합니다. 예를 들어, Serif 유형의 글꼴을 추려내려면 을 클릭합니다.
- 여러 필터를 사용할 수도 있습니다. 예를 들어, 단락에 사용할 수 있는 Serif 유형의 필터를 추려내려면 을 클릭합니다.
- 글꼴을 이름별로 검색하려면 검색 상자에 이름을 입력합니다.
선택한 글꼴을 필터링하려면 을 클릭합니다.
[완료]를 클릭합니다.
아무 장소에서나 [글꼴] 목록을 엽니다. 예를 들어 [속성] 패널의 CSS 섹션에 있는 글꼴 목록을 사용할 수 있습니다.
글꼴 목록에서 Dreamweaver 글꼴 스택은 웹 글꼴 앞에 열거되어 있습니다. 목록을 아래로 스크롤하여 선택한 글꼴을 찾습니다.
글꼴 목록에 로컬 웹 글꼴 추가
Dreamweaver에서 컴퓨터의 웹 글꼴을 글꼴 목록에 추가할 수 있습니다. 추가한 글꼴은 Dreamweaver의 모든 글꼴 메뉴에 반영됩니다. EOT, WOFF, TTF, SVG 유형의 글꼴이 지원됩니다.
[도구] > [글꼴 관리]를 선택합니다.
글꼴 관리 대화 상자에서 [로컬 웹 글꼴]을 선택합니다.
추가하려는 글꼴 유형에 해당하는 검색 버튼을 클릭합니다. 예를 들어 글꼴이 EOT 포맷일 경우 EOT 글꼴에 해당하는 검색 버튼을 클릭합니다.
글꼴이 설치되어 있는 컴퓨터에서 해당 위치로 이동합니다. 해당 파일을 선택하여 엽니다. 이 위치에 글꼴에 대한 다른 포맷이 있는 경우 이들 포맷이 대화 상자에 자동으로 추가됩니다. 글꼴 이름도 글꼴 이름에서 자동으로 선택됩니다.
웹 사이트에서 사용할 글꼴에 대한 사용권이 있는지 확인하는 옵션을 선택합니다.
[완료]를 클릭합니다.
글꼴 목록은 [로컬 웹 글꼴의 최신 목록]에 표시됩니다.
글꼴 목록에서 웹 글꼴을 삭제하려면 [로컬 글꼴의 최신 목록]에서 글꼴을 선택한 다음 [제거]를 클릭합니다.
사용자 지정 글꼴 스택 생성
글꼴 스택은 CSS 글꼴 선언에 있는 글꼴 목록입니다.
[도구] > [글꼴 관리]를 선택한 다음 [사용자 지정 글꼴 스택]을 선택합니다.
선택한 조합에 있는 글꼴은 대화 상자의 왼쪽에 있는 [선택 글꼴] 목록에 표시됩니다. 오른쪽에는 시스템에 설치된 사용 가능한 모든 글꼴 목록이 있습니다.
글꼴 조합에 글꼴을 추가하거나 글꼴 조합에서 글꼴을 제거하려면 [선택 글꼴] 목록과 [사용 가능한 글꼴] 목록 사이에 있는 화살표(<< 또는 >>) 버튼을 클릭합니다.
글꼴 조합을 추가하거나 삭제하려면 대화 상자 상단에 있는 플러스(+) 또는 마이너스(-) 버튼을 클릭합니다.
시스템에 설치되지 않은 글꼴을 추가하려면 [사용 가능한 글꼴] 목록 아래에 있는 텍스트 필드에 글꼴 이름을 입력한 다음 [<<] 버튼을 클릭하여 해당 글꼴을 글꼴 조합에 추가합니다. 예를 들어 시스템에 설치되지 않은 글꼴을 추가하는 기능은 Macintosh에서 페이지를 개발할 때 Windows 전용 글꼴을 지정하는 경우 등에 유용합니다.
목록에서 글꼴 조합을 위나 아래로 이동하려면 대화 상자 상단에 있는 화살표 버튼을 클릭합니다.
글꼴 목록에 새 조합 추가
[도구] > [글꼴 관리]를 선택합니다.
시스템에 설치되지 않은 글꼴을 추가하려면 [사용 가능한 글꼴] 목록 아래에 있는 텍스트 필드에 글꼴 이름을 입력한 다음 [<<] 버튼을 클릭하여 해당 글꼴을 글꼴 조합에 추가합니다. 예를 들어 시스템에 설치되지 않은 글꼴을 추가하는 기능은 Macintosh에서 페이지를 개발할 때 Windows 전용 글꼴을 지정하는 경우 등에 유용합니다.
일반 글꼴군에는 cursive, fantasy, monospace, sans-serif 및 serif가 있습니다. [선택 글꼴] 목록에 사용자의 시스템에서 사용할 수 있는 글꼴이 하나도 없는 경우 텍스트는 일반 글꼴군과 관련된 기본 글꼴로 표시됩니다. 예를 들어 대부분의 시스템에서 monospace(고정 폭) 글꼴에 대한 기본값은 Courier입니다.
삽입한 글꼴 미리보기
디자인 뷰에서 Edge 및 웹 글꼴을 미리 볼 수 있습니다. [라이브 뷰]로 전환하거나 브라우저에서 페이지를 미리 봅니다.
파일 전체의 웹 글꼴 스크립트 태그 업데이트
여러 HTML 파일에 연결된 CSS 파일에서 글꼴을 업데이트할 경우 관련 HTML 파일의 스크립트 태그를 업데이트할지 묻는 메시지가 표시됩니다. [업데이트]를 클릭하면 모든 관련 HTML 파일의 스크립트 태그가 업데이트됩니다.
페이지의 웹 글꼴 스크립트 태그 업데이트
[도구] > [웹 글꼴 스크립트 태그 정리(현재 페이지)]를 선택하여 스크립트 태그가 반영되지 않은 웹 페이지의 모든 웹 글꼴을 업데이트할 수 있습니다.