폰트 - 매뉴얼 /manual 다른 케이테마 쇼핑몰 사이트 사이트 Thu, 28 Nov 2024 02:35:44 +0000 ko-KR hourly 1 https://wordpress.org/?v=6.6.2 사용자폰트 설정 /manual/docs/%ed%85%8c%eb%a7%88%ec%98%b5%ec%85%98/%ed%85%8c%eb%a7%88%ec%8a%a4%ed%83%80%ec%9d%bc/%ec%82%ac%ec%9a%a9%ec%9e%90%ed%8f%b0%ed%8a%b8-%ec%84%a4%ec%a0%95/ /manual/docs/%ed%85%8c%eb%a7%88%ec%98%b5%ec%85%98/%ed%85%8c%eb%a7%88%ec%8a%a4%ed%83%80%ec%9d%bc/%ec%82%ac%ec%9a%a9%ec%9e%90%ed%8f%b0%ed%8a%b8-%ec%84%a4%ec%a0%95/#respond Mon, 25 Nov 2024 07:52:03 +0000 /manual/docs/%ed%85%8c%eb%a7%88%ec%98%b5%ec%85%98/%ed%85%8c%eb%a7%88%ec%8a%a4%ed%83%80%ec%9d%bc/%ec%82%ac%ec%9a%a9%ec%9e%90%ed%8f%b0%ed%8a%b8-%ec%84%a4%ec%a0%95/ 케이테마는 구글폰트의 api이용하여 구글의 모든 폰트를 지원하고 있습니다. 하지만 구글폰트에 등록되지 못한 한글폰트를 사용하기 쉽지가 않았습니다. 이번 업데이트를 통해 외부 폰트를 사용하기 쉽게 업데이트 하였으니 아래 단계를 따라 확인해보시기 바랍니다. 

한글폰트를 지원하는 다양한 사이트가 있지만 눈누폰트를 기준으로 적용하는 방법을 설명드리겠습니다. 

The post 사용자폰트 설정 first appeared on 매뉴얼.

]]> 케이테마는 구글폰트의 api이용하여 구글의 모든 폰트를 지원하고 있습니다. 하지만 구글폰트에 등록되지 못한 한글폰트를 사용하기 쉽지가 않았습니다. 이번 업데이트를 통해 외부 폰트를 사용하기 쉽게 업데이트 하였으니 아래 단계를 따라 확인해보시기 바랍니다. 

한글폰트를 지원하는 다양한 사이트가 있지만 눈누폰트를 기준으로 적용하는 방법을 설명드리겠습니다. 

눈누폰트

눈누폰트는 다양한 국내폰트의 정보를 제공하고 있습니다. 폰트의 미리보기는 물론이고 CDN형태로 제공하고 있어 파일을 서버에 올리지 않고 코드 만으로 적용이 가능합니다. 아래의 링크로 접속하여 원하는 폰트를 확인하시기 바랍니다. 

https://noonnu.cc/

 

눈누폰트 접속 및 폰트 확인

 

미리보기 및 폰트선택

폰트를 확인하고 미리보기를 할 수 있습니다. 회원가입을 하면 폰트 즐겨찾기 등 더 다양한 기능을 제공하고 있습니다. 원하는 폰트를 확인하고 폰트 이름을 눌러 상세페이지로 이동하시기 바랍니다. 

 

폰트테스트 및 코드복사

폰트 미리보기를 통해 제공되는 폰트의 스타일을 확인할 수 있습니다. 굵기와 내가 원하는 텍스트를 입력했을 때 미리보기 까지 가능합니다. 굵기, 글자 미리보기, 사이즈 까지 가능하니 미리보기를 통해 충분히 테스트 해보시기 바랍니다. 

적용하기 원하는 폰트가 있다면 “웹폰트로 사용” 섹션의 복사 버튼을 클릭합니다.  해당 코드는 css코드로 테마에 적용하게 될 내용입니다. 일반적으로 아래와 같은 형태로 제공됩니다. 

@font-face {
font-family: 'SBAggroB';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
font-weight: normal;
font-style: normal;
}

위 내용을 복사하고 아래 단계에 따라 적용을 합니다. 

 

테마사이트 적용

위 복사된 코드를 테마사이트에 적용해야 합니다. 관리자로 로그인을 하여 아래와 같은 단계로 적용하시기 바랍니다. 

 

테마의 사용자정의 ( Customize ) 

관리자로 로그인하여 페이지로 이동하면 상단에 “사용자정의”이라는 메뉴를 확인할 수 있습니다. 위 메뉴를 클릭하고 다음으로 이동하시기 바랍니다. 

 

추가 CSS 적용

사용자정의 메뉴 중 추가 CSS 로 이동하여 위에서 복사한 코드를 붙여넣기 합니다. 추가 이후 아래의 코드로 함께 붙여넣기 해줍니다. 
주의할 점은 font-family 속성이 잘 맞아야 합니다. Roboto 다음에 오는 Noto Sans KR을 삭제하고 위 눈누폰트에서 복사한 코드 중 font-family 에 해당 하는 영문자를 넣습니다. 본 매뉴얼에서는 “SBAggroB”로 되어 있기 때문에 해당 글자가 들어가 있습니다. 

.depicter-revert h1, .depicter-revert h2, .depicter-revert h3, .depicter-revert h4, .depicter-revert p, .depicter-revert figure, .depicter-revert blockquote, .depicter-revert dl, .depicter-revert dd,.depicter-revert .depicter-element,
body {
font-family: Roboto, 'Noto Sans KR', Dotum, '돋움', Helvetica, sans-serif !important;
}

수정 후 

.depicter-revert h1, .depicter-revert h2, .depicter-revert h3, .depicter-revert h4, .depicter-revert p, .depicter-revert figure, .depicter-revert blockquote, .depicter-revert dl, .depicter-revert dd,.depicter-revert .depicter-element,
body {
font-family: Roboto, 'SBAggroB', Dotum, '돋움', Helvetica, sans-serif !important;
}

이후 수정된 코드를 복사하여 붙여넣습니다. 

 

폰트적용 확인

CSS를 적용한 최종 모습은 위와같습니다. 눈누폰트에서 복사한 코드를 넣고 제공되는 css를 입력하면 우측에 미리보기를 통해 적용된 디자인을 확인할 수 있습니다. 

저장하고 화면으로 이동하시면 모든 설정이 완료됩니다. 

 

The post 사용자폰트 설정 first appeared on 매뉴얼.

]]> /manual/docs/%ed%85%8c%eb%a7%88%ec%98%b5%ec%85%98/%ed%85%8c%eb%a7%88%ec%8a%a4%ed%83%80%ec%9d%bc/%ec%82%ac%ec%9a%a9%ec%9e%90%ed%8f%b0%ed%8a%b8-%ec%84%a4%ec%a0%95/feed/ 0 테마폰트 /manual/docs/%ed%85%8c%eb%a7%88%ec%98%b5%ec%85%98/%ed%85%8c%eb%a7%88%ec%8a%a4%ed%83%80%ec%9d%bc/%ed%85%8c%eb%a7%88%ed%8f%b0%ed%8a%b8/ /manual/docs/%ed%85%8c%eb%a7%88%ec%98%b5%ec%85%98/%ed%85%8c%eb%a7%88%ec%8a%a4%ed%83%80%ec%9d%bc/%ed%85%8c%eb%a7%88%ed%8f%b0%ed%8a%b8/#respond Tue, 07 Mar 2023 06:26:09 +0000 /manual/docs/%ed%85%8c%eb%a7%88%ec%98%b5%ec%85%98/%ed%85%8c%eb%a7%88%ec%8a%a4%ed%83%80%ec%9d%bc/%ed%85%8c%eb%a7%88%ed%8f%b0%ed%8a%b8/ 케이테마 사용자정의 중에서 테마의 폰트에 대한 설정입니다. 케이테마의 기본 국·영문 폰트는 Noto sans kr과 – Roboto 폰트를 사용하고 있습니다. 보다 상세한 내용은 아래 목록을 참조해주시기 바랍니다. 폰트 이름 : Noto sans kr / Roboto 폰트 경로 : themes/ktheme_starter/assets//font/ 영문폰트 경로 : 구글폰트 사용자정의 > 테마스타일 > 폰트스타일 폰트 스타일지정 : themes/ktheme_starter/style.css 폰트 기본크기 : 16px […]

The post 테마폰트 first appeared on 매뉴얼.

]]>
  • 폰트 이름 : Noto sans kr / Roboto
  • 폰트 경로 : themes/ktheme_starter/assets//font/
  • 영문폰트 경로 : 구글폰트 사용자정의 > 테마스타일 > 폰트스타일
  • 폰트 스타일지정 : themes/ktheme_starter/style.css
  • 폰트 기본크기 : 16px / 1rem
    •   케이테마는 구글폰트를 사용할 수 있게 지원하고 있습니다. 구글폰트사이트에서 원하는 폰트를 지정하여 style과 css 를 지정해주시면 됩니다. 구글폰트에서 원하는 폰트를 찾으면 다음의 순서를 따라주시기 바랍니다.
    1. 구글폰트에서 원하는 폰트를 찾는다
    2. 폰트페이지에서 원하는 굵기를 클릭하여 포함시킨다
    3. 포함된 폰트스타일을 확인한다
    4. @import 방식으로 이용할 수 있게 선택한다.
    5. 항목을 복사하여 아래 이미지의 2번항목에 붙여넣는다
    6. 항목을 복사하여 아래 이미지의 3번항목에 붙여넣는다
      사용자정의 > 테마스타일 > 테마폰트 구글폰트는 구글사이트에서 제공하는 폰트를 style 형식으로 불러와 테마에서 사용할 수 있도록 해줍니다. 다양한 폰트를 홈페이지 제작에 적용해보시기 바랍니다. 구글폰트적용과 함께 폰트의 기본사이트와 각 제목의 크기를 정해줄 수 있습니다. 기본 크기와 사용되는 클래스는 다음의 페이지를 확인해보시기 바랍니다. 케이테마 문자스타일   폰트의 기본사이즈는 전체 홈페이지의 크기에 영향을 주게 됩니다. 케이테마는 폰트사이즈의 기본단위를 rem으로 사용하고 있습니다. body에서 지정한 폰트크기에 따라 상대적으로 폰트크기가 결정되기 때문에 폰트 기본사이즈는 중요합니다. 일반적으로 16px을 많이 이용하고 있으며 경우에 따라서 14px 혹은 18px사이즈를 사용하기도 합니다. 홈페이지의 성격에 맞게 적용해주시기 바랍니다. 제목보다 더 큰사이즈를 원하신다면 디스플래이 클래스를 이용해보시기 바랍니다.  .display-1 ~ .display-6 까지 종류를 제공하고 있습니다.  

    The post 테마폰트 first appeared on 매뉴얼.

    ]]>     /manual/docs/%ed%85%8c%eb%a7%88%ec%98%b5%ec%85%98/%ed%85%8c%eb%a7%88%ec%8a%a4%ed%83%80%ec%9d%bc/%ed%85%8c%eb%a7%88%ed%8f%b0%ed%8a%b8/feed/ 0