Dreamweaver에서 웹에 적합한 무료 Edge Web Fonts를 사용하는 방법에 대해 알아보십시오. Edge Web Fonts는 Adobe의 Typekit 및 Google Fonts에서 가져온 글꼴의 컬렉션입니다.

Dreamweaver의 글꼴 목록에 Adobe Edge Web Fonts를 추가할 수 있습니다. 글꼴 목록에서 Dreamweaver 지원 글꼴 스택은 Web Fonts 및 Edge Web Fonts 앞에 나열됩니다.

글꼴 목록에 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. We recommend that you do not modify it.-->

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

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

  1. 수정 > 글꼴 관리를 선택합니다.

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

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

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

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

  6. 어느 위치에서나 글꼴 목록을 열 수 있습니다. 예를 들어 [속성] 패널의 CSS 섹션에 있는 [글꼴] 목록을 사용할 수 있습니다.

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

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

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

  1. 수정 > 글꼴 관리를 선택합니다.

  2. 표시되는 대화상자에서 [로컬 웹 글꼴] 탭을 클릭합니다.

  3. 추가하려는 글꼴 유형에 해당하는 [검색] 버튼을 클릭합니다. 예를 들어 글꼴이 EOT 형식일 경우, EOT 글꼴에 해당하는 [찾아보기] 버튼을 클릭합니다.

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

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

  6. 완료를 클릭합니다. 글꼴 목록이 [로컬 글꼴의 최신 목록]에 표시됩니다.

    참고:

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

사용자 지정 글꼴 스택 생성

글꼴 스택은 CSS 글꼴 선언에 있는 글꼴 목록입니다. 글꼴 관리 대화상자의 사용자 지정 글꼴 스택 탭을 사용하여 다음을 수행할 수 있습니다.

  • "+" 버튼을 사용하여 새로운 글꼴 스택을 추가합니다.
  • 기존의 글꼴 스택을 편집하려면 글꼴 목록에서 글꼴 스택을 선택합니다. “>>” 및 "<<" 버튼을 사용하여 선택한 글꼴 목록을 업데이트합니다.
  • "-" 버튼을 사용하여 기존의 글꼴 스택을 삭제합니다.
  • 화살표 버튼을 사용하여 스택을 재정렬합니다.

삽입한 글꼴 미리보기

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

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

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

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

명령 > 웹 글꼴 스크립트 태그 정리(현재 페이지)를 선택하여 스크립트 태그에 반영되지 않은 웹 페이지의 모든 웹 글꼴을 업데이트합니다.

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

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