코딩 연습을 하다가 알게 되어 끄적이는 메모 하나

리액트 코딩 연습을 하다가 다음과 같은 css 파일을 작성했는데 글꼴 적용이 안되고 고딕으로만 표시된다.

div {

background-color: rgb(162,127,243);

color: rgb(255,255,255);

padding: 40px;

font-family: ‘배달의민족 연성’;

text-align: center;

}

h1 {

color: white;

background-color: #2EFE2E;

padding: 10px;

font-family: ‘나눔손글씨 붓’;

}

도서 예제에는 ‘나눔고딕’, ‘궁서’라는 글꼴로 되어 있었는데 맥북에서 작동이 안된다 싶어서

맥북의 서체관리자에 등록된 글꼴을 참조하여 ‘배달의 민족 연성’, ‘나눔손글씨 붓’ 이라는 글꼴로 슬쩍 바꿔봄

하지만, 여전히 기본글꼴인 고딕으로 표시되기에 여기저기 알아보고 다음과 같이 결론

css 에 글꼴 지정은 영문으로 하는 것이 확실하다.

% system_profiler SPFontsDataType | grep -A 5 “나눔손글씨”

          Full Name: 나눔손글씨 펜

          Family: 나눔손글씨 펜

          Style: Regular

          Version: 13.0d1e3

          Vendor: NHN Corporation

          Unique Name: Nanum Pen Script; 13.0d1e3; 2017-06-14

          Designer: 곽두열; 최형환; 노영권;

—

          Full Name: 나눔손글씨 붓

          Family: 나눔손글씨 붓

          Style: Regular

          Version: 13.0d1e3

          Vendor: NHN Corporation

          Unique Name: Nanum Brush Script; 13.0d1e3; 2017-06-14

          Designer: 곽두열; 노영권;

같은 방식으로
system_profiler SPFontsDataType | grep -A 5 “배달의민족” 명령으로 나머지 글꼴도 알아내어 다음과 같이 수정하니 글꼴이 예쁘게(?) 바뀜

div {

  background-color: rgb(162,127,243);

  color: rgb(255,255,255);

  padding: 40px;

  font-family: ‘BM YEONSUNG OTF‘;

  text-align: center;

}

h1 {

  color: white;

  background-color: #2EFE2E;

  padding: 10px;

  font-family: ‘Nanum Brush Script‘;

}

어차피 서버에 올리면 로컬의 글꼴 따위 아무 상관없지만, 혹시나 싶어서 메모해 봄. 끝.