
> 기본적으로 CSS에서 제공하는 폰트가 마음에 들지 않거나 내 프로젝트에 어울리지 않는 경우 간단하게 다운로드한 폰트를 프로젝트에 적용해볼 수 있다.

## 1. 폰트 다운로드

우선 마음에 드는 폰트를 다운받는다.

카페24무료폰트: https://fonts.cafe24.com/

무료 폰트 사이트는 찾아보면 사용할 수 있는게 많다.

## 2. 프로젝트에 파일 복사

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbHA9Qr%2Fbtr60vtCf7O%2FMaaAsK1Lg4t5QDXd3bC1Uk%2Fimg.png)

위와 같이 다운로드한 폰트를 작업중인 프로젝트에 넣어준다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA7Inw%2Fbtr61haATVa%2F9mFQHIOUCbjYI7SnPm8wI0%2Fimg.png)

필자는 styles/fonts/\*\*.ttf 와 같이 저장해줬다.

## 3. CSS 설정

@font -face{}를 이용해 불러올 폰트를 설정해준다.

```css
/* global.css */

@font-face {
  font-family: maplestory;
  src: url("./fonts/Maplestory\ Light.ttf");
}
@font-face {
  font-family: maplestoryBold;
  src: url("./fonts/Maplestory\ Bold.ttf");
}
```

## 4. CSS 사용

평소에 폰트를 적용하는 것처럼 CSS를 적용해주면 된다.

```css
body {
  font-family: maplestory;
}
```


CSS - 배포 사이트에 다운로드 폰트 적용하기

css use download font


# a태그 기본 스타일 제거와 스타일 적용

```css
/* 기본 밑줄 제거 */
a {
  text-decoration: none;
}

/* 아직 방문하지 않은 링크의 글자색 정의 */
a:link {
  color: pink;
}

/* 사용자가 방문한 적이 있는(클릭한 이후) 링크의 글자색 
정의 */
a:visited {
  color: black;
}

/* 마우스를 링크에 올려두었을 때, 글자색을 정의 */
a:hover {
  color: red;
}

/* 마우스로 링크를 클릭하고 뗄 때까지의 글자색을 정의 */
a:active {
  color: green;
}
```


a 태그(Link 태그) 기본 스타일 제거하기

CSS로 글자 더블클릭 시 선택자(파란색 마스킹) 없애기