Cách sử dụng fonts google

Cách sử dụng font chữ riêng của google
Cách sử dụng icon của google
Video hướng dẫn sử dụng font google

1. Cách sử dụng font chữ riêng của google

- Bước 1: vào web https://fonts.google.com

cách sử dụng font google vào web
- Bước 2: nhập vào ô Preview
Nhập dòng chữ để test font, ví dụ: nhập Xin chào tôi là iif học lập trình

- Bước 3: bên tay phải xuất hiện các loại font

- Bước 4: kéo xuống và chọn 1 font của google yêu thích

- Bước 5: chọn vào [Get Font] -> [Get embed code]

- Bước 6: Có 2 tùy chọn [Link] và [Import], hãy chọn [Link] cho đơn giản nhé

- Bước 7: Copy phần Embed code in the <head> of your html

Vào trong head của file html

Copy CSS class for a variable style vào thẻ <style>...</style>

Đổi tên uniquifier thành class mong muốn



<!DOCTYPE html>

<html>

<head>

<title>Page_Title</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2

?family=Kablammo&family=Open+Sans:ital,wght@0,300..800;1,300..800

&family= Playwrite+GB+S:ital,wght@0,100..400;1,100..400&display=swap" rel="stylesheet">

<style>

.open-sans-f01 {

  font-family: "Open Sans", sans-serif;

  font-optical-sizing: auto;

  font-weight: <weight>;

  font-style: normal;

  font-variation-settings:

    "wdth" 100;

}

</style>

</head>

<h1 class="open-sans-f01">Xin chào đến với học HTML của iif.vn</h1>

<body>

</body>

</html>

Qua đoạn code trên chú ý giúp cho mình:

family=Kablammo

là tên font cần sử dụng

2. Cách sử dụng icon của google

Bước 1: vào web https://fonts.google.com/icons

Bước 2: chọn vào font cần sử dụng

Bước 3: Bên tay phải có có mục Setting -> chọn tab WEB (android, IOS)

Bước 4: Tìm đến dòng Static icon font

Bước 5: Copy vào như bên code html dưới



<!DOCTYPE html>

<html>

<head>

<title>Page_Title</title>

<link rel="stylesheet" href="https://fonts.googleapis.com/css2

?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0

&icon_names=settings" />

</head>

<span class="material-symbols-outlined">

settings

</span>

<body>

</body>

</html>

Thiết kế web nên học cách sử dụng fonts google để web đẹp hơn.

1. Cách sử dụng font chữ riêng của google

2. Cách sử dụng icon của google

3. Video cách sử dụng font / icon của google