[Vue.js] 글씨체 적용하기. (눈누)

 

 

 

참고로 Vue.js에 대해서 잘 모릅니다.

아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다!

 

 

 

예쁜 글씨체로
바꾸고 싶다!
어떻게 바꾸면 될까?

 

 

 

 

 

1. 글씨체 찾아오기.

일단 저는 눈누에서 글씨체를 찾았습니다. 

 

눈누 사이트

눈누

 

여기에 들어가서 원하는 글씨를 찾으시면 됩니다. 주의할 점은 사용목적에 따라 저작권이 달라지기 때문에 어느 용도로 사용할건지, 그리고 그 용도로 제공하는지를 보셔야합니다. 저는 모든 폰트에 들어가서 허용 범위에 웹사이트를 체크한 후 고릅니다.

 

영어에 글씨체를 적용할거라 아래 글씨체를 가져올 것입니다.

- Cafe24 Meongi Black

눈누

 

웹폰트로 사용 옆에 복사 버튼이 있습니다. @font-face 부분을 복사합니다.

 

 

 

 

---

 

 

 

 

2.  main.css

main.css에 폰트를 적용해줍니다.

  @font-face {
    font-family: 'Cafe24Meongi-B-v1.0';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2405-3@1.1/Cafe24Meongi-B-v1.0.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

 

 

 

 

---

 

 

 

3.  코드 적용시키기.

• 전체 적용하는 법

main.css에 코드를 추가로 넣어줍니다.

 body, #app {
    font-family: 'Cafe24Meongi-B-v1.0', serif;
  }

 

이렇게 하면 전체 글씨체로 변경됩니다.

 

 

• 부분 적용하는 법

부분만 적용하려면 style에 코드를 추가합니다.

font-family: "Cafe24Meongi-B-v1.0";

.hello-vue {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: olivedrab;
  font-family: "Cafe24Meongi-B-v1.0";
}

 

 

 

 

---

 

 

 

4. 결과

 

 

 

---

 

 

 

5.  추가로 오류 수정

 

[ 전에 고쳤던 것 ]

[Vue.js] 배경에 나타나는 검은색 테두리(?) 없애기.

 

전에 고쳐둔 검은 테두리가 다시 나타났다.

아래 코드를 추가해줬다. 

 html, body, #app, .main-view {
    min-width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }