[글꼴 관리] 대화 상자를 사용하여 Dreamweaver에서 글꼴 조합을 추가하거나 수정합니다.

글꼴 조합은 브라우저에 웹 페이지의 텍스트가 표시되는 모양을 지정합니다. 브라우저는 사용자 시스템에 설치된 글꼴 조합에서 첫 번째 글꼴을 사용합니다. 글꼴 조합에 들어 있는 글꼴 중 설치되어 있는 글꼴이 하나도 없는 경우에는 사용자의 브라우저 환경 설정에 지정된 텍스트가 표시됩니다.

글꼴 목록에 Adobe Edge Web Fonts 추가

웹 페이지에서 Adobe Edge Web Fonts를 사용할 수 있습니다. 페이지에서 Edge 글꼴이 사용되는 경우 JavaScript 파일을 참조하기 위해 추가적인 스크립트 태그가 추가됩니다. 이 파일은 Creative Cloud 서버에서 브라우저의 캐시로 직접 글꼴을 다운로드합니다.

페이지를 표시할 때 사용자 컴퓨터에서 글꼴을 사용할 수 있어도 Creative Cloud 서버에서 글꼴을 다운로드합니다.

예를 들어 “Abel” 글꼴만 사용하는 스크립트 태그의 형식은 다음과 같습니다.

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. 글꼴을 수정하지 않을 것을 권장합니다.-->

<script>var adobewebfontsappname ="dreamweaver"</script>

<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script>

  1. [도구] > [글꼴 관리]를 선택합니다.

    Adobe Edge 글꼴 탭은 글꼴 목록에 추가할 수 있는 Adobe Edge Web Fonts를 모두 표시합니다.

  2. 이 목록에서 글꼴을 찾아 글꼴 목록에 추가하려면 다음을 수행하십시오.

    • 글꼴 목록에 추가하려는 글꼴을 클릭합니다.
    • 글꼴을 선택 해제하려면 글꼴을 다시 클릭합니다.
    • 필터를 사용하여 선호하는 글꼴을 선별합니다. 예를 들어 Serif 유형의 글꼴을 선별하려면 을 클릭합니다.
    • 여러 필터를 사용할 수도 있습니다. 예를 들어 문단에 사용할 수 있는 Serif 유형의 필터를 선별하려면 를 클릭합니다.
    • 글꼴을 이름별로 검색하려면 검색 상자에 이름을 입력합니다.
  3. 를 클릭하여 선택한 글꼴을 필터링합니다.

  4. [완료]를 클릭합니다.

아무 장소에서나 [글꼴] 목록을 엽니다. 예를 들어 [속성] 패널의 CSS 섹션에 있는 글꼴 목록을 사용할 수 있습니다.

글꼴 목록에서 Dreamweaver 글꼴 스택은 웹 글꼴 앞에 열거되어 있습니다. 목록을 아래로 스크롤하여 선택한 글꼴을 찾습니다.

글꼴 목록에 로컬 웹 글꼴 추가

Dreamweaver에서 컴퓨터의 웹 글꼴을 글꼴 목록에 추가할 수 있습니다. 추가한 글꼴은 Dreamweaver의 모든 글꼴 메뉴에 반영됩니다. EOT, WOFF, TTF, SVG 유형의 글꼴이 지원됩니다.

  1. [도구] > [글꼴 관리]를 선택합니다.

  2. 글꼴 관리 대화 상자에서 [로컬 웹 글꼴]을 선택합니다.

  3. 추가하려는 글꼴 유형에 해당하는 검색 버튼을 클릭합니다. 예를 들어 글꼴이 EOT 포맷일 경우 EOT 글꼴에 해당하는 검색 버튼을 클릭합니다.

  4. 글꼴이 설치되어 있는 컴퓨터에서 해당 위치로 이동합니다. 해당 파일을 선택하여 엽니다. 이 위치에 글꼴에 대한 다른 포맷이 있는 경우 이들 포맷이 대화 상자에 자동으로 추가됩니다. 글꼴 이름도 글꼴 이름에서 자동으로 선택됩니다.

  5. 웹 사이트에서 사용할 글꼴에 대한 사용권이 있는지 확인하는 옵션을 선택합니다.

  6. [완료]를 클릭합니다.

    글꼴 목록은 [로컬 웹 글꼴의 최신 목록]에 표시됩니다.

글꼴 목록에서 웹 글꼴을 삭제하려면 [로컬 글꼴의 최신 목록]에서 글꼴을 선택한 다음 [제거]를 클릭합니다.

사용자 지정 글꼴 스택 생성

글꼴 스택은 CSS 글꼴 선언에 있는 글꼴 목록입니다.

  1. [도구] > [글꼴 관리]를 선택한 다음 [사용자 지정 글꼴 스택]을 선택합니다.

    글꼴 조합 수정
    글꼴 조합 수정

  2. 대화 상자의 상단에 있는 목록에서 글꼴 조합을 선택합니다.

    선택한 조합에 있는 글꼴은 대화 상자의 왼쪽에 있는 [선택 글꼴] 목록에 표시됩니다. 오른쪽에는 시스템에 설치된 사용 가능한 모든 글꼴 목록이 있습니다.

  3. 다음 중 하나를 수행합니다.
    • 글꼴 조합에 글꼴을 추가하거나 글꼴 조합에서 글꼴을 제거하려면 [선택 글꼴] 목록과 [사용 가능한 글꼴] 목록 사이에 있는 화살표(<< 또는 >>) 버튼을 클릭합니다.

    • 글꼴 조합을 추가하거나 삭제하려면 대화 상자 맨 위에 있는 플러스(+) 또는 마이너스(-) 버튼을 클릭합니다.

    • 시스템에 설치되지 않은 글꼴을 추가하려면 [사용 가능한 글꼴] 목록 아래에 있는 텍스트 필드에 글꼴 이름을 입력한 다음 << 버튼을 클릭하여 해당 글꼴을 글꼴 조합에 추가합니다. 시스템에 설치되지 않은 글꼴을 추가하는 기능은 예를 들어 Macintosh에서 페이지를 개발하면서 Windows 전용 글꼴을 지정하는 경우 등에 유용합니다.

    • 목록에서 글꼴 조합을 위나 아래로 이동하려면 대화 상자 맨 위에 있는 화살표 버튼을 클릭합니다.

글꼴 목록에 새 조합 추가

  1. [도구] > [글꼴 관리]를 선택합니다.

  2. [사용 가능한 글꼴] 목록에서 글꼴을 선택한 다음 << 버튼을 클릭하여 해당 글꼴을 [선택 글꼴] 목록으로 이동합니다.
  3. 조합에 포함될 각 글꼴마다 2단계를 반복합니다.

    시스템에 설치되지 않은 글꼴을 추가하려면 [사용 가능한 글꼴] 목록 아래에 있는 텍스트 필드에 글꼴 이름을 입력한 다음 << 버튼을 클릭하여 해당 글꼴을 글꼴 조합에 추가합니다. 시스템에 설치되지 않은 글꼴을 추가하는 기능은 예를 들어 Macintosh에서 페이지를 개발하면서 Windows 전용 글꼴을 지정하는 경우 등에 유용합니다.

  4. 특정 글꼴을 선택했으면 [사용 가능한 글꼴] 메뉴에서 일반 글꼴군을 선택하고 << 버튼을 클릭하여 일반 글꼴군을 [선택 글꼴] 목록으로 이동합니다.

    일반 글꼴군에는 cursive, fantasy, monospace, sans-serif 및 serif가 있습니다. [선택 글꼴] 목록에 사용자의 시스템에서 사용할 수 있는 글꼴이 하나도 없으면 텍스트는 일반 글꼴군과 관련된 기본 글꼴로 표시됩니다. 예를 들어 대부분의 시스템에서 monospace(고정 폭) 글꼴에 대한 기본값은 Courier입니다.

삽입한 글꼴 미리보기

디자인 뷰에서 Edge 및 웹 글꼴을 미리 볼 수 있습니다. [라이브 뷰]로 전환하거나 브라우저에서 페이지를 미리 봅니다.

파일 전체의 웹 글꼴 스크립트 태그 업데이트

여러 HTML 파일에 연결된 CSS 파일에서 글꼴을 업데이트할 경우 관련 HTML 파일의 스크립트 태그를 업데이트할지 묻는 메시지가 표시됩니다. [업데이트]를 클릭하면 모든 관련 HTML 파일의 스크립트 태그가 업데이트됩니다.

페이지의 웹 글꼴 스크립트 태그 업데이트

[도구] > [웹 글꼴 스크립트 태그 정리(현재 페이지)]를 선택하여 스크립트 태그가 반영되지 않은 웹 페이지의 모든 웹 글꼴을 업데이트할 수 있습니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책