Mục lục

Làm thế nào để thêm phông chữ vào trang web của bạn 

Thêm một phông chữ độc đáo vào trang web của bạn là một cách tuyệt vời để làm cho thiết kế của bạn nổi bật trực tuyến.

Trong bài viết này, tôi sẽ hướng dẫn bạn qua quy trình từng bước để thêm bất kỳ phông chữ nào vào trang web của bạn.

Lưu ý: bởi vì các trang web không phải được xây dựng và quản lý theo cùng một cách, tôi sẽ giới thiệu cách tiếp cận phổ biến nhất để thêm phông chữ tùy chỉnh và sau đó giải thích cách các nền tảng xây dựng trang web phổ biến nhất hỗ trợ phông chữ tùy chỉnh.

Những phông chữ nào có thể được sử dụng trên Web?

Về mặt kỹ thuật, bạn có thể thêm bất kỳ phông chữ nào vào bất kỳ trang web nào.

Tuy nhiên, khi tìm kiếm một phông chữ trực tuyến, bạn luôn muốn ghi nhớ giá cả,  thỏa thuận cấp phép và phương thức cài đặt.

Nếu không có gì khó chịu, đây là một số thư viện phông chữ phổ biến nhất để giúp bạn tìm thấy phông chữ hoàn hảo đó:

Phông chữ Google (MIỄN PHÍ)

Phông chữ Google tự hào có một thư viện ấn tượng với gần 1000 phông chữ giấy phép libre có thể được duyệt qua thư mục web tương tác của họ. Do API dành cho nhà phát triển của họ  , Google Fonts được cho là phông chữ dễ nhất để thêm vào trang web của bạn và nơi tôi khuyên bạn nên bắt đầu tìm kiếm.

Làm thế nào để thêm phông chữ vào trang web của bạn 

Phông chữ Adobe (Cao cấp)

Adobe Fonts, (trước đây là Typekit) cung cấp một bộ sưu tập +14.000 phông chữ tuyệt đẹp. Dịch vụ mới và được cải tiến hiện cung cấp cho những người đăng ký Creative Cloud dễ dàng truy cập vào toàn bộ thư viện phông chữ của họ thông qua một nút bấm. Không giống như Typekit, Adobe Fonts đã loại bỏ các giới hạn về lượt xem trang và đã làm cho tất cả các phông chữ của chúng có thể truy cập được cho cả máy tính để bàn và sử dụng web.

Làm thế nào để thêm phông chữ vào trang web của bạn 

Phông chữ tùy chỉnh (Phông chữ)

Ngoài việc cung cấp một  lựa chọn các phông chữ miễn phí  được cấp phép cho công việc thương mại, Font Squirrel nổi tiếng với Bộ  nhận dạng phông chữ  và Trình tạo  phông chữ .

Trình tạo Webfont cho phép bạn chuyển đổi bất kỳ phông chữ nào mà bạn sở hữu một cách hợp pháp các quyền (định dạng tệp .ttf hoặc .otf) và chuyển đổi nó thành Bộ công cụ WebFont có thể sử dụng bao gồm Biểu định kiểu xếp tầng dễ sử dụng (CSS).

Làm thế nào để thêm phông chữ vào trang web của bạn 

Định dạng phông chữ khác nhau và Hỗ trợ trình duyệt

Trong vài năm qua, các trình duyệt hiện đại đã cải thiện đáng kể cách chúng hỗ trợ phông chữ tùy chỉnh. Tuy nhiên, ngay cả ngày nay, không phải tất cả các định dạng đều được hỗ trợ trên mọi trình duyệt.

Dưới đây là các trình duyệt phổ biến nhất và định dạng phông chữ hiện tại chúng hỗ trợ:

Làm thế nào để thêm phông chữ vào trang web của bạn 
(nguồn:  https://www.w3schools.com/Css/css3_fonts.asp )

Tôi luôn khuyên bạn nên sử dụng TTF / OTF và WOFF để đảm bảo rằng phông chữ của bạn được hỗ trợ trên tất cả các trình duyệt.

Để biết thêm chi tiết về các định dạng phông chữ được hỗ trợ, hãy thử  Tôi có thể sử dụng  – Một công cụ tuyệt vời để nghiên cứu tính tương thích tính năng trên các phiên bản trình duyệt khác nhau (MIỄN PHÍ).

Cách thêm phông chữ tùy chỉnh vào trang web của bạn bằng cách sử dụng @ font-face 

Quy tắc CSS @ font-face được giải thích bên dưới là cách tiếp cận phổ biến nhất để thêm phông chữ tùy chỉnh vào trang web.

Bước 1: Tải xuống phông chữ

Tìm phông chữ tùy chỉnh bạn muốn sử dụng trên trang web của mình, sau đó tải xuống định dạng tệp Phông chữ TrueType (.ttf). Bạn cũng có thể tải xuống định dạng Phông chữ OpenType (.otf)

Bước 2: Tạo Bộ WebFont để duyệt chéo

Tải tệp .ttf hoặc .otf của bạn lên  Trình tạo Webfont  và sau đó tải xuống Bộ Phông chữ Web của bạn.

Bước 3: Tải các tệp phông lên trang web của bạn

Sử dụng FTP hoặc trình quản lý tệp của bạn, tải lên tất cả các tệp phông chữ được tìm thấy trong Bộ Phông chữ Web của bạn lên trang web của bạn. * Thông thường, bộ này sẽ bao gồm nhiều phần mở rộng tệp như (.eot), (.woff), (.woff2), (. ttf) và (.svg).

Bộ của bạn cũng sẽ bao gồm Bảng kiểu xếp tầng (.css) mà bạn sẽ cần cập nhật và tải lên trong bước 4.

* Bước này sẽ thay đổi rất nhiều dựa trên cách trang web của bạn được xây dựng và lưu trữ.

Bước 4: Cập nhật và tải lên tệp CSS của bạn

Mở tệp CSS trong trình soạn thảo văn bản như Textedit, NotePad hoặc  Sublime .

Thay thế URL nguồn hiện tại bằng URL mới mà bạn đã tạo bằng cách tải lên từng tệp.

Theo mặc định, vị trí URL nguồn được đặt trong Bộ Phông chữ Web đã tải xuống. Nó cần phải được thay thế bởi vị trí trên máy chủ của bạn.

Đây là một ví dụ nhanh:

Trước khi cập nhật:

@ font-face { 
font-family: “CustomFont”; 
src: url (“CustomFont.eot”); 
định dạng src: url (“CustomFont.woff”) (“woff”), 
url (“CustomFont.otf”) (“opentype”), 
url (“CustomFont.svg # filename”) định dạng (“svg”); 
}

Sau khi cập nhật:

@ font-face { 
font-family: “CustomFont”; 
src: url (“https://yoursite.com/css/fonts/CustomFont.eot”); src: url (“https://yoursite.com/css/fonts/CustomFont.woff”) định dạng (“woff”), url (“https://yoursite.com/css/fonts/CustomFont.otf”) định dạng (“opentype”), url (“https://yoursite.com/css/fonts/CustomFont.svg#filename”) định dạng (“svg”); }https : // trang web của bạn com css phông chữ CustomFont eot “);https : // yoursite . com / css / font / CustomFont . woff “) định dạng (“woff”),https : // yoursite . com / css / phông chữ / CustomFont . định dạng otf “) (” opentype “), https : // yoursite . com / css /

phông chữ CustomFont định dạng svg # tên tệp “) (” svg “);

Khi bạn đã cập nhật tệp CSS, bạn cần tải nó lên trang web (máy chủ) của mình.

Bước 5: Sử dụng phông chữ tùy chỉnh trong khai báo CSS của bạn

Giờ đây, các tệp phông chữ và phông chữ Cascading của bạn được tải lên máy chủ của bạn, bạn có thể bắt đầu sử dụng phông chữ tùy chỉnh trong các khai báo CSS để giúp cải thiện giao diện của HTML.

Điều này có thể được thực hiện theo nhiều cách, bao gồm thêm các khai báo trên toàn trang vào tệp CSS chính của bạn.

Đây là một ví dụ nhanh:

h1 { 
font-family: ‘CustomFont’, Arial, sans-serif; 
font-weight: bình thường; 
kiểu chữ: bình thường; 
}

Cách thêm phông chữ trong các công cụ xây dựng trang web phổ biến

Hệ thống quản lý nội dung (WordPress, Drupal, Joomla, v.v.)

Có một số cách khác nhau để bạn có thể thêm phông chữ tùy chỉnh vào Hệ thống quản lý nội dung (CMS) như  WordPress (WP ):

Thêm phông chữ tùy chỉnh bằng phông chữ CSSAdd mặt phông chữ bằng cách sử dụng  plugin WordPress Thêm phông chữ thủ công từ  Phông chữ của Google

Nói chung, quy trình 5 bước được hiển thị ở trên sẽ là cách tiếp cận mặc định khi thêm phông chữ tùy chỉnh vào CMS. Mặc dù quá trình này có vẻ khá đơn giản đối với những người có kinh nghiệm với việc thao túng mã, người dùng mới làm quen thường sẽ tìm kiếm một giải pháp thay thế.

Nếu bạn đang sử dụng WP và không có bất kỳ kinh nghiệm nào trong việc chỉnh sửa mã nguồn (tệp chủ đề), rất có thể bạn sẽ muốn dựa vào một  plugin kiểu chữ . Plugin giúp dễ dàng thêm phông chữ tùy chỉnh mà không phải tự viết bất kỳ mã nào.

Điều duy nhất tôi thận trọng khi sử dụng plugin WP là chúng có thể gây ra nhiều vấn đề khác nhau   trên trang web của bạn. Điều quan trọng là luôn luôn nghiên cứu các plugin trước khi sử dụng chúng trên trang web của bạn.

Cuối cùng, vì Google Fonts cung cấp API dành cho nhà phát triển, bạn cũng có thể chọn để thủ công thêm các phông chữ đó vào chủ đề của mình bằng cách sử dụng tệp tin.php.

Trình tạo trang web (PageCloud, Squarespace, Wix, Weebly)

Có rất nhiều tùy chọn xây dựng trang web trực tuyến quản lý phông chữ tùy chỉnh theo nhiều cách khác nhau. 

Phông chữ Google

Đối với hầu hết các phần, các nhà xây dựng trang web hàng đầu giúp dễ dàng thêm phông chữ từ các trang web phổ biến như Google Fonts.

Ví dụ: với PageCloud, việc thêm phông chữ từ Google không thể dễ dàng hơn. Tất cả những gì bạn cần làm là sao chép và dán phông chữ và voila, phông chữ của bạn được thêm vào trang của bạn và sẵn sàng để được tạo kiểu theo bất kỳ cách nào!

Làm thế nào để thêm phông chữ vào trang web của bạn 

Tuy nhiên, không phải tất cả các nhà xây dựng trang web đều dễ dàng thêm Google Font.

Ví dụ: thêm Phông chữ Google trong Weebly sẽ yêu cầu bạn chỉnh sửa mã nguồn (CSS) của trang web của bạn. Họ giải thích  quá trình 8 bước  trong cơ sở kiến ​​thức của họ.

Làm thế nào để thêm phông chữ vào trang web của bạn 

Dưới đây là danh sách ngắn các nhà xây dựng trang web hàng đầu và cách họ quản lý Phông chữ của Google:

  • PageCloud
  • SquareSpace
  • Wix
  • Weebly
  • Shopify
  • Webflow

Như bạn có thể thấy, mỗi người xây dựng trang web sử dụng một cách tiếp cận khác nhau để thêm các phông chữ có thể từ rất dễ đến hơi phức tạp.

Phông chữ tùy chỉnh

Trong hầu hết các trường hợp, khi tìm cách thêm một phông chữ tùy chỉnh không tồn tại trong Google Fonts, bạn sẽ cần chỉnh sửa CSS trên trang web của mình. Quá trình này có thể khác biệt đáng kể dựa trên trình xây dựng trang web mà bạn quyết định sử dụng.

Tôi khuyên bạn nên tìm kiếm thông qua các cơ sở kiến ​​thức tương ứng và diễn đàn cộng đồng của họ để biết thêm thông tin.

Ví dụ:  quy trình thêm phông chữ tùy chỉnh với PageCloud  rất giống với hướng dẫn từng bước được cung cấp ở trên.

Tóm lược

Bất kể kinh nghiệm của bạn với CSS là gì, làm theo các hướng dẫn trong bài viết này sẽ cung cấp cho bạn khả năng thêm bất kỳ phông chữ nào vào bất kỳ nền tảng xây dựng trang web nào.

Tuy nhiên, khi bạn đã thêm thành công phông chữ bạn muốn vào trang web của mình, các câu hỏi bạn cần đặt ra là:

Bạn có khả năng tùy chỉnh giao diện của phông chữ? (trọng lượng phông chữ, màu sắc, chiều cao dòng, khoảng cách chữ, độ mờ, v.v.) Bạn có thể tùy chỉnh bố cục trang web của mình để làm cho phông chữ nổi bật (vị trí của văn bản, hình ảnh, video, v.v.)

Nếu bạn không có nhiều kinh nghiệm với CSS, các tùy chỉnh này có thể rất khó khăn khi sử dụng CMS hoặc trình tạo trang web dựa trên mẫu cứng nhắc như SquareSpace.

Đây là lý do tại sao tôi khuyên bạn nên sử dụng trình tạo trang web linh hoạt như  PageCloud  , mang lại cho bạn sự linh hoạt vô song khi muốn tạo bố cục độc đáo với các tùy chọn phông chữ và kiểu gần như không giới hạn.

Đánh giá bài viết post

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

LIÊN HỆ TƯ VẤN

Thiết Kế Web
BLOG
Đăng ký tư vấn
Thiết kế website
Đồng hành cùng ATP WEB

Đăng ký tư vấn Thiết kế website