data: 구글 블로그 글꼴 바꾸는 방법 (Google Fonts)

구글 블로그 글꼴 바꾸는 방법 (Google Fonts)

Full Screen

구글 블로그 글꼴 바꾸는 방법 (Google Fonts)



구글 폰트 (Google Fonts)




구글 폰트는 지금까지 전 세계적으로 가장 잘 알려진 무료 글꼴 서비스입니다.
다양한 언어로 1064개 이상의 무료 글꼴을 제공하며 .woff2, .svg, .eot 등으로
다양한 형식으로 사용할 수 있습니다. Google Fonts의 모든 글꼴은 Open Font
License 하에 무료로 제공, 사용 및 배포됩니다.






alt="구글 블로그 글꼴 바꾸는 방법 (Google Fonts)"
border="0"
class="lazy"
width="600"
data-original-height="485"
data-original-width="957"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgpEbJfKAIirF28HvAThNolBUkCxznMHGbLbPwdmEEUyKD13DbYdKkj-GQz89xVEuGwbzb8LbUEWMPfN4Cwk-BZaCdpq4gCtkgKzSg-USgKVPE5hszgWKq2vpQM2p1eWfQC7HFcS3pwLU/s600/google-fonts-total-views-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>



2010년에 구글에서 출시한 이후 지금까지 50조 이상의 조회 수를 달성한 구글 폰트.
이 숫자는 계속해서 증가하고 있습니다.



사용 가능한 한글 글꼴 31 가지



2022.06.30. 기준
















































































































No 글꼴 No 글꼴
1 Noto Sans Korean 17 Dongle
2 Nanum Gothic 18 Gaegu
3 Nanum Myeongjo 19 Song Myung
4 Gothic A1 20 Gamja Flower
5 Noto Serif Korean 21 Cute Font
6 Nanum Gothic Coding 22 Stylish
7 IBM Plex Sans KR 23 East Sea Dokdo
8 Nanum Pen Script 24 Yeon Sung
9 Black Han Sans 25 Gowun Batang
10 Nanum Brush Script 26 Hahmlet
11 Jua 27 Poor Story
12 Hi Melody 28 Gowun Dodum
13 Sunflower 29 Kirang Haerang
14 Do Hyeon 30 Black And White Picture
15 Gugi 31 Single Day
16 Dokdo





구글 폰트 사용 방법




구글 폰트는 <head> 태그에 필요한 라이브러리를 로드하여
글꼴을 사용할 수 있습니다. <link> 태그를 통해 라이브러리를
삽입하거나 원하는 글꼴을 선택한 후 CSS @import 구문을 사용할 수
있습니다.



1. 구글 폰트에 접속하기




class="extL"
href="https://fonts.google.com/"
target="_blank"
rel="noreferrer"
>https://fonts.google.com/ >




alt="구글 폰트에 접속하기"
border="0"
class="lazy"
width="810"
data-original-height="580"
data-original-width="1280"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvF-CTQQd6IQEc2oW9x-_P7hLEoaTPwO-PwAj8CYCpWiMc4i3wVaR20M2YJvf5ZpGz82IlmQ_itFh8Bhg51unwW58pFs_h4_USTbqBUFHid9JYOueqbvmVstgXEXjG3EJ_-awgSIlPZ88/s0/changing-font-family-in-blogger-blogspot-01-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>


2. 폰트 선택하고 스타일 추가하기




한글 웹폰트를 사용하려면 Languages를 Korean으로 설정한 후 원하는 글꼴을
선택합니다. 폰트를 정했다면, 그 폰트의 스타일(예 : 굵은 글씨 및 기울임꼴 등)을
선택합니다.




alt="폰트 선택하고 스타일 추가하기"
border="0"
class="lazy"
width="810"
data-original-height="573"
data-original-width="1280"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ7tiIjsIxw0RSjUVBLTlztluOSPudbNbs13seJGdKh9haZYBrh5x5grQo9KIHC03WQ1hmYyqiS1-RupQD-Ui3Nhs2zCRoCACE2Ms31UgZN2Aqb3vKZ25uQaHJJkxoGiDzZkQQ7r4sgyU/s0/changing-font-family-in-blogger-blogspot-02-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>


3. Embed 코드 복사하기



이제 Embed 코드를 복사해서 HTML 페이지에 추가하면 됩니다.




alt="구글 폰트 Embed 코드 복사하기)"
border="0"
class="lazy"
width="8100"
data-original-height="565"
data-original-width="1280"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCfBqCjLeSJ15eYk_9iayx_U0FNetE0qd4QIHULZu2OkUUWTXCy8n8cYh-N47NdOv4XhDYIr04Q-cgwEAh1PKAb0Gx_7uvPJlIUCnkKEWgGxCN4Ba9f0f0l3NTF4HcxBfWqT22vWoVjSY/s0/changing-font-family-in-blogger-blogspot-03-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>


4. 적용하기




페이지의 <head> 태그 내에 <link> 태그를
삽입합니다. 글꼴을 사용하기 위해 라이브러리를 로드한 후, 해당 CSS
font-family를 선언하기만 하면 됩니다.











<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin"/>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&amp;display=swap" rel="stylesheet"/>



font-family: 'Montserrat', sans-serif;






구글 블로그에 적용하는 방법



1. Blogger 대시보드 - 테마 - HTML 편집




alt="테마 - HTML 편집"
border="0"
class="lazy"
width="640"
data-original-height="969"
data-original-width="1005"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRzSM7ZOBl-_mnNqPBYFy_lQz73e9Rx8TfmBh6oObEXcMrZkycOLZ54wX1W9-PgNPIZr4bzFeS3YVZbxltZYfyXu0maigOtXa7fXyuSo36chpkYSjpjCVW5FmEb8B2D8fflzlKKgf-kmM/s0/changing-font-family-in-blogger-blogspot-10-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>


2. 글꼴 코드 추가




alt="글꼴 코드 추기"
border="0"
class="lazy"
width="811"
data-original-height="557"
data-original-width="811"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_4Pp3QtvLvHITOptWYm9rlUl89e-QblSdPryCc0Dl5z6MlALzgxU4y4LB5FBPsVA67qbEG-CAbNfmVFQl-UiUlQqeRPqXn3cWQ7GjiZmjpBK8nLTqfw8598uFyYUijMQM0_8wrDlvDQ4/s0/changing-font-family-in-blogger-blogspot-12-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>


3. 테마 - 맞춤 설정 - 고급 - CSS 추가




alt="테마 - 맞춤 설정 - 고급 - CSS 추가"
border="0"
class="lazy"
width="600"
data-original-height="962"
data-original-width="925"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkgnaUakgTBgc_lDlgsmpkK9bQIsffkVFZuPpH1oskB8LI-XXRU-ajbnT_BKZDOMVlsIVQ0CSR4oQb9z3VwRRqunoDqisVowNJfDUK_MF1Icb4vg3Q6J4o3TxSrum7L26NNo303zG1FyU/s0/changing-font-family-in-blogger-blogspot-11-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>


4. CSS font-family 추가하기




alt="CSS font-family 추가하기"
border="0"
class="lazy"
width="630"
data-original-height="734"
data-original-width="925"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoVW59PmWIMOxoRf2o2z4MeWWccB0hUEG7lXqu5P9KxfRuA3xWQMLThDfC-Rq0v68JBgpgvJ40IqyGJ2X-kd4JK_Q32WnH5djOzQXLpk3RylZm1v-6eTrXRGDksNL110hryK4ltLvd9FM/s0/changing-font-family-in-blogger-blogspot-13-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>


5. HTML 보기 - 코드 작성 방법




alt="HTML 보기 - 코드 작성"
border="0"
class="lazy"
width="810"
data-original-height="514"
data-original-width="925"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIquxRE4EQ97F20MS7tnM-8kmKcGd2Ao3RoMnkwUs76v9MIjk0CDaJnifr9cmsz_Z-vknAsk8rpgc6jXJcOGY6ydqIL-tH_lnsbgjS1X5bmEdciBW1Uu4vC-PNP6z2sIJNeDQfVh6BaHs/s0/changing-font-family-in-blogger-blogspot-14-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>


6. 결과




alt="결과"
border="0"
class="lazy"
width="810"
data-original-height="505"
data-original-width="912"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAFrwQmeuBRxYBx2ahkXnJbqPEG5UCUC9HqU8fIlfMbclov4hphdnNaIDr8dgfDgwOlke4oNSqBnxJNHos4V1iEsxllIe511xD82uRalcBBKpY9pRj316_bN1CXrzL5Tf3mcfyPSEAdxU/s0/changing-font-family-in-blogger-blogspot-15-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>


자주 묻는 질문 QnA





@import 방식이 적용이 안돼요?


  • Link 태그로 적용하십시오.


  • <link> 방식은 html 문서 내에 Link 태그를 사용하는
    CSS 연결 방식이고,


  • @import 방식은 CSS 문서 내에서 사용하는 연결방식입니다.




alt="임베드 코드"
border="0"
class="lazy"
data-original-height="450"
data-original-width="800"
width="810"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTTt-5uwFZiIM2od-4AzY047G0E-4BtAD9HMtZU__RzHhnugYbSjLBJIU1v4mnxHNHM7H5gPlcvh3W0KEPhqPwww-xrCed1X_NipUhDmptr_x8jUuwzzn-2FZmgAyj2lv7AIhP6gIK2nW1/s0-rw/css-google-webfont-06.jpg"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>





폰트가 적용되지 않는 부분이 있어요?


아래와 같이 적용이 안되는 요소 속성 끝에
!important; >를 덧붙입니다.




<p style="font-family:'Montserrat',sans-serif!important;">content_here</p>






Blogger 편집기에서 오류가 발생해요?



  • crossorigin>을
    crossorigin="">으로 변경합니다.



alt="구글 블로그 글꼴 바꾸는 방법 (Google Fonts)"
border="0"
class="lazy"
width="600"
data-original-height="100"
data-original-width="673"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtdBaD1nXxkUVEyunaPvl23MJW56U7gTzOsKScBJzqFQrXbsh8nPlmWAP-TxY7mfr2nlTYRC8CKUKDCwHCHljdI2Vme_gt3p_u5B4_7WWvJ5dhgcQNrxBxgOMCI2E5qfVKVebC6c5Op7k/s600/changing-font-family-in-blogger-blogspot-04-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>




  • <link>을 <link/>으로 변경합니다.




alt="구글 블로그 글꼴 바꾸는 방법 (Google Fonts)"
border="0"
class="lazy"
width="600"
data-original-height="100"
data-original-width="673"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmNzGEBzXulAybOmQR3OFLYSFVWdy9mT9n_Rm78MN2d-z2EwGYRrFDplF9eNg_e5Exup9T_R-SYCg3HnpDoUsq6FM1JrBf7hWbfugKCnyirLaTGNB6hviYxrdbRxOGspFNFfPAHWWrV-0/s600/changing-font-family-in-blogger-blogspot-06-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>




  • &를
    &amp;으로 변경합니다.




alt="구글 블로그 글꼴 바꾸는 방법 (Google Fonts)"
border="0"
class="lazy"
width="600"
data-original-height="100"
data-original-width="673"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsW94b57x_Bhk_v9uGh3kQ4DOksGdrikZ_Auum2TEYmkPcYMghiKRK-8LeNKL1E9oKT7ypnoeAC5pTqOatN-YkoE2kCvz_uwD64a33JzGsy3vWQVozh-fZT8Lt16NuZfhIQFWalokFZKM/s600/changing-font-family-in-blogger-blogspot-08-by-liveblogger.webp"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>






<style>...</style>와 style="..."의 차이점이 뭔가요?



<style>...</style> 안에 코드를 작성하는 방법은
href="/2021/01/add-css.html#내부_스타일_시트%28Internal_Style_Sheet%29"
>내부 스타일 시트 >고, HTML 태그의 style 속성 안에 작성하는 방법은
href="/2021/01/add-css.html#인라인_스타일_시트%28Inline_Style_Sheet%29"
>인라인 스타일 시트 >입니다.
href="/2021/01/add-css.html#외부_스타일_시트%28Linking_Style_Sheet%29"
>외부 스타일 시트 >는 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다.




// 외부 스타일 시트
<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link crossorigin='crossorigin' href='https://fonts.gstatic.com' rel='preconnect'/>
<link href='https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nanum+Myeongjo&family=Black+Han+Sans&family=Single+Day&display=swap' rel='stylesheet'/>

// 내부 스타일 시트
<style>
.ng {font-family: 'Nanum Gothic', sans-serif;}
.nm {font-family: 'Nanum Myeongjo', serif;}
.bhs {font-family: 'Black Han Sans', sans-serif;}
.sd {font-family: 'Single Day', cursive;}
</style>
<p class="ng">나눔고딕 (Nanum Gothic)</p>
<p class="nm">나눔명조 (Nanum Myeongjo)</p>
<p class="bhs">블랙한산스 (Black Han Sans)</p>
<p class="sd">싱글데이 (Single Day)</p>

// 인라인 스타일 시트
<p style="font-family: 'Nanum Gothic', sans-serif;">나눔고딕 (Nanum Gothic)</p>
<p style="font-family: 'Nanum Myeongjo', serif;">나눔명조 (Nanum Myeongjo)</p>
<p style="font-family: 'Black Han Sans', sans-serif;">블랙한산스 (Black Han Sans)</p>
<p style="font-family: 'Single Day', cursive;">싱글데이 (Single Day)</p>








나눔 고딕(Nanum Gothic) 사용하기




다음은
href="https://fonts.google.com/specimen/Nanum+Gothic"
target="_blank"
rel="noreferrer"
>나눔 고딕 >을 사용한 간단한 예제입니다.











<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">

<p class="a">400 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
<p class="b">700 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
<p class="c">800 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>



@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

.web-font { 
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 23px;}
.a {
  font-weight: 400;
}
.b {
  font-weight: 700;
}
.c {
  font-weight: 800;
}




class="codepen"
data-preview="true"
data-editable="true"
data-default-tab="result"
data-height="530"
data-pen-title="CSS 글자꾸미기 구글 웹폰트 나눔 고딕 사용 예제"
data-slug-hash="KKzYqWQ"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 530px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.






 



나눔 명조(Nanum Myeongjo) 사용하기




다음은
href="https://fonts.google.com/specimen/Nanum+Myeongjo"
target="_blank"
rel="noreferrer"
>나눔 명조 >을 사용한 간단한 예제입니다.











<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap" rel="stylesheet">

<p class="a">400 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
<p class="b">700 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
<p class="c">800 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>



@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');

.web-font { 
  font-family: 'Nanum Myeongjo', sans-serif;
  font-size: 23px;}
.a {
  font-weight: 400;
}
.b {
  font-weight: 700;
}
.c {
  font-weight: 800;
}




class="codepen"
data-preview="true"
data-editable="true"
data-height="530"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="QWKPyrB"
style="height: 530px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS 글자꾸미기 구글 웹폰트 나눔 명조 사용 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.





기타 CSS 참조






>글자 꾸미기로 돌아가기 >
Please write your comments

Đăng ký: Đăng Nhận xét ( Atom )