Google Fonts

https://fonts.google.com/ 해당 링크에서 폰트를 사용
폰트의 기본 크기는 24px 이다.

Google Material Icons

https://fonts.google.com/icons?selected=Material+Icons 해당 링크에서 아이콘을 사용

[주의사항]
폰트 같은 경우, safari와 크롬 기타 등등 폰트나 아이콘이 적용됐는지 확인을 해야한다. 다르게 적용되거나 적용이 안될 수 있기 때문이다.

폰트나 아이콘을 HTML link 삽입할 때, main.css 보다 위로 넣어야한다. 그 이유는 자바스크립트는 위에서 아래의 방향으로 실행되기 때문이다.

	<link rel="icon" href="./favicon.png" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="./css/main.css" />

출처 : 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online 패스트 캠퍼스