Cách thêm font chữ vào website

Chúng ta đều biết rằng trang web đẹp sẽ thu hút người xem hơn. Font chữ là một trong những yếu tố quan trọng để tạo nên sự hấp dẫn cho trang web của bạn. Trong bài viết này, chúng ta sẽ tìm hiểu cách thêm font chữ vào trang web một cách đơn giản và hiệu quả.

Quy tắc CSS @font-face

Phông chữ web cho phép các nhà thiết kế sử dụng các phông chữ không được cài đặt trên máy tính của người dùng. Điều này mang đến sự đa dạng và sáng tạo cho trang web của bạn.

Bạn đang xem: Cách thêm font chữ vào website

Đầu tiên, bạn cần tìm và mua font chữ mà bạn muốn sử dụng. Sau đó, chỉ cần đưa tệp font chữ đó vào máy chủ web của bạn. Khi người dùng truy cập trang web của bạn, font chữ sẽ được tải xuống và hiển thị một cách tự động.

Bạn có thể xác định font chữ “riêng của bạn” trong quy tắc CSS @font-face.

Các định dạng phông chữ khác nhau

Có nhiều định dạng phông chữ khác nhau mà bạn có thể sử dụng trên trang web của mình. Dưới đây là một số định dạng phổ biến:

Phông chữ TrueType (TTF)

Xem thêm : Tạo website cá nhân miễn phí đơn giản, chuyên nghiệp với 4 công cụ hữu ích

Phông chữ TrueType là một tiêu chuẩn phông chữ được phát triển bởi Apple và Microsoft vào cuối những năm 1980. Đây là định dạng phông chữ phổ biến nhất cho cả hệ điều hành Mac OS và Microsoft Windows.

Phông chữ OpenType (OTF)

Phông chữ OpenType là một định dạng cho các phông chữ máy tính có thể mở rộng. Nó được xây dựng trên TrueType và là thương hiệu đã đăng ký của Microsoft. Phông chữ OpenType được sử dụng phổ biến ngày nay trên các nền tảng máy tính lớn.

Định dạng Phông chữ Mở trên Web (WOFF)

WOFF là một định dạng phông chữ dành riêng cho việc sử dụng trên các trang web. Nó được phát triển vào năm 2009 và hiện là một Khuyến nghị của W3C. WOFF là sự kết hợp giữa định dạng phông chữ TrueType hoặc OpenType và tính năng nén và siêu dữ liệu bổ sung. Mục tiêu của WOFF là hỗ trợ phân phối phông chữ từ máy chủ đến máy khách thông qua mạng có băng thông hạn chế.

Định dạng Phông chữ Mở trên Web (WOFF 2.0)

WOFF 2.0 là phiên bản nâng cấp của WOFF 1.0. Nó cung cấp khả năng nén tốt hơn cho phông chữ TrueType và OpenType.

Phông chữ / Hình dạng SVG

Phông chữ SVG cho phép sử dụng SVG làm glyph khi hiển thị văn bản trên trang web. Bạn cũng có thể áp dụng CSS cho tài liệu SVG và sử dụng quy tắc @font-face cho văn bản trong tài liệu SVG.

Phông chữ OpenType được nhúng (EOT)

Phông chữ EOT là một dạng phông chữ OpenType nhỏ gọn được Microsoft thiết kế để sử dụng trên các trang web.

Xem thêm : 10 Web dịch tiếng Anh sang tiếng Việt chuẩn nhất hiện nay

Để sử dụng một font chữ cho một phần tử HTML, bạn chỉ cần tham khảo tên của font chữ đó (ví dụ: myFirstFont) thông qua thuộc tính font-family.

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

Sử dụng văn bản in đậm

Nếu bạn muốn sử dụng văn bản in đậm, bạn cần thêm một quy tắc @font-face khác chứa bộ mô tả cho phông chữ in đậm.

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

Chèn thư mục theme WordPress

Nếu bạn sử dụng WordPress, bạn có thể thêm phông chữ tùy chỉnh vào trang web của mình bằng cách chèn thư mục theme.

@font-face {
  font-family: HelveBold;
  src: url(./fonts/UTMHelveBold.ttf);
}

Sau đó, bạn có thể sử dụng font chữ này cho các phần tử trên trang web của bạn.

.title_main span, .title_main h2 {
  font-family: HelveBold;
}

Thêm font chữ từ Google

Google cung cấp rất nhiều font chữ tiếng Việt cho bạn lựa chọn. Bạn chỉ cần truy cập vào trang web chọn font mà bạn muốn sử dụng, sau đó thêm nó vào trong thẻ </head> của trang web là xong.

Kết luận

Với cách thêm font chữ vào trang web như trên, bạn có thể tạo ra hiệu ứng độc đáo và thu hút người xem hơn cho trang web của mình. Hãy thử và trải nghiệm để tạo nên một trang web thú vị và chuyên nghiệp hơn!

Nguồn: https://diendanseotop.edu.vn
Danh mục: Website