Deve.haeri

[CSS/기본] Webfont 본문

HTML-CSS

[CSS/기본] Webfont

hhaeri 2020. 11. 8. 22:56

Web font


1. <link> 태그를 이용한다. <link> 태그는 <head> 태그의 자식 태그이다.


2. @import 를 이용한다.
 1) css 파일에 @import를 작성한다. (@import는 <style> 태그 내부에 작성해도 된다.)
 2) <link> 태그로 css파일의 경로를 작성한다

 

3. <link> 태그 사용 방법 : <link> 태그 포함 후 css font-family 작업을 해야한다.

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<style>
	div{
	font-family: 'Roboto', sans-serif;
	font-weight : 500;
	}
</style>


4. @import 사용법
 1) external.css 파일에 @import url()을 작성해둔다.
 2) external.css 파일을 포함하는 <link> 태그를 작성한다.
 3) css font-family 작업을 한다.

/*CSS 파일*/
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');

h1{
	color : red;
	background : yellow;
}
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	2. @import 사용법
		1) external.css 파일에 @import url()을 작성해둔다.
		2) external.css 파일을 포함하는 <link> 태그를 작성한다.
		3) css font-family 작업을 한다.
        
<link stlye = "text/css" rel = "stylesheet" href = "../assets/style/external.css">
<style type = "text/css">
div{
	font-family : 'Roboto', sans-serif
	font-weight : 400;
}
</style>
</head>
저작자표시

'HTML-CSS' 카테고리의 다른 글

[CSS/기본] 선택자  (0) 2020.11.08
[CSS/기본] Icon 넣기  (0) 2020.11.08
[CSS/기본] Font  (0) 2020.11.08
[CSS/기본] Text  (0) 2020.11.08
[CSS/기본] Unit  (0) 2020.11.08
'HTML-CSS' Related Articles more
Comments