이 시간에 살펴볼 내용은 웹 글꼴을 위한 원격 호스팅 솔루션입니다.
Adobe Edge Web Fonts를 사용하여 작업해볼 텐데요.
Dreamweaver CC와 긴밀하게 통합되어 있습니다.
이 프로세스는 매우 간단한데요.
먼저 선택기를 강조 표시해야 합니다.
미디어 섹션을 축소하고 .textSizePx를 선택한 다음 속성 범주에서 텍스트 섹션으로 이동합니다.
여기를 보면 "Gill Sans"가 적용되어 있는데 이것을 클릭하고 아래로 내려가 글꼴 관리를 선택합니다.
그러면 글꼴 관리 대화 상자가 열리고 Edge Web Fonts에 포함된 모든 글꼴이 표시됩니다.
이러한 글꼴은 무료로 사용 가능합니다.
Google, Adobe, 여러 디자이너가 수집한 글꼴들이죠.
앞서 말했듯이 이는 무료 서비스로 여기에서 원하는 글꼴을 사용할 수 있습니다.
특정 글꼴을 찾기 위해 이름별로 이 목록을 필터링할 수 있습니다.
또한 머리글에 추천하는 글꼴을 나열하거나 기본적으로 본문에 추천하는 글꼴을 나열할 수 있고 두 가지 필터를 선택 해제할 수도 있습니다.
스타일별로 필터링할 수도 있는데요.
예를 들어 Sans 글꼴 또는 Sans Serif 글꼴이 있습니다.
Slab 글꼴도 있고 목록 아래로 내려가 보면 장식용 글꼴이 있는데 원하는 경우 이 옵션을 선택하면 해당 목록이 필터링됩니다.
이제 사용할 글꼴을 찾으면 되는데요.
이 경우 여기에서 어떤 것을 선택해야 할지 잘 모르겠는데 장식용 글꼴로 이것을 선택해보죠.
그러면 작은 체크 표시가 나타나고 하단에 짤막한 설명이 표시되는데요.
완료를 클릭하면 Edge Web Fonts 서비스에 동의하는 것으로 간주한다는 내용입니다.
이에 대한 자세한 내용을 살펴보려면 Terms of Use를 클릭합니다.
그런데 완료를 클릭하면 아무런 변화가 없는데요.
이때 글꼴 모음 속성에서 아래로 내려가 보면 Edge Web Fonts 글꼴이 있습니다.
자체 아이콘과 함께 목록에서 고유한 섹션에 표시되므로 자체 호스팅되는 웹 글꼴을 간편하게 구별할 수 있습니다.
이 경우 Adobe Edge Web Fonts를 통한 원격 호스팅 웹 글꼴과 상단에 있는 데스크탑 글꼴을 구분할 수 있습니다.
이제 이 글꼴을 선택해보죠.
그러면 이전에 글꼴 두께, 글꼴 크기 속성이 이 문자에 적용된 경우 이러한 속성이 변경될 것이라는 메시지가 표시됩니다.
또한 렌더링된 모양을 보려면 라이브 뷰로 이동해야 합니다.
라이브 뷰로 이동하면 문자가 적용되어 있습니다.
작업 중인 이 @font-face 선언과 다른 백그라운드에서 무슨 일이 일어나고 있는 걸까요?
소스 코드를 보면 JavaScript인데요.
이 JavaScript는 Adobe 서버에 있는 JavaScript 파일을 가리킵니다.
보시다시피 이러한 원격 호스팅 웹 글꼴을 구현하는 것은 매우 간단합니다.
원하는 경우 글꼴 스택을 만들어 어떤 이유로든 제대로 로드되지 않은 경우 백업해 놓을 수 있는데 대부분 경우 그렇게 하는 것이 좋습니다.
이처럼 Dreamweaver CC에서 Edge Web Fonts를 사용하여 작업하는 것은 매우 간단한데요.
앞서 말했듯이 웹 디자인 환경에서 매우 흥미로운 개발 단계라 할 수 있습니다.
사용자 정의 문자를 사용하는 기능은 불과 몇 년 전만 해도 불가능했습니다.
사용할 맞춤 서체의 이미지를 만들어야 했는데 이제 더 이상 그럴 필요가 없습니다.
검색 엔진 측면에서는 웹 페이지의 중요성이 줄어들지 않는데요.
텍스트가 아니라 이미지를 사용하기 때문입니다.
지금까지 Dreamweaver CC에서 글꼴 사용을 위한 옵션을 살펴봤습니다.
