[React Exam 25] google font 사용하기

Browse Fonts - Google Fonts

Browse Fonts - Google Fonts

 

좌측의 language 에서 "korean"을 선택후 원하는 폰트를 클릭한다.

원하는 폰트를 클릭한다.

 

"Get Font" 버튼을 클릭한다.

 

"<> Get embed code"버튼을 클릭한다.

 

"@import" 라디오버튼을 클릭한다.

 

css파일을 만든다. 보이는 코드를 복사해서 붙여 넣는다.

@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
.nanum-pen {
    font-family: "Nanum Pen Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 18pt;
}
 

 

css 파일을 다음과 같이 사용한다.

import WelcomePropsClass from "./WelcomePropsClass";
import WelcomePropsFunction from "./WelcomePropsFunction";
import './font.css'
 
function App(){
    let users = [
        {id:1, name:"한사람",age:18},
        {id:2, name:"두사람",age:22},
    ]
    return (
        <div className="nanum-pen">
            <WelcomePropsClass user={users[0]}/>
            <WelcomePropsFunction user={users[1]}/>
        </div>
    );
}
export default App;

 

결과 화면입니다.