Cách thêm phông chữ của Google trong Blog Blogger


Kiểu chữ là một phần thiết yếu của blog, nếu bài viết trên blog của bạn gọn gàng và sạch sẽ, dễ đọc và dễ hiểu thì nó sẽ thu hút sự chú ý hơn nhiều. Ngày nay mọi người đều muốn có blog đặc biệt, họ muốn tùy chỉnh blog của họ theo nhu cầu riêng của họ. Ngày nay, các mẫu blogger đã trở nên rất thân thiện với người dùng và hầu hết các mẫu blog của google đều có các tính năng nâng cao được cài đặt sẵn. Tuy nhiên, như chúng ta biết, không có giới hạn của sự sáng tạo và mỗi cá nhân khác nhau có những lựa chọn khác nhau.

Trong bài viết hôm nay, chúng ta sẽ tìm hiểu  Cách Thêm Phông chữ Web của Google trong Blog Blogger . Quá trình này rất đơn giản nhưng bạn phải làm quá nhiều thứ. Phông chữ của Google là một thư viện gồm nhiều phông chữ miễn phí, bạn có thể làm cho blog của mình trông đẹp hơn với bất kỳ phông chữ nào, bạn cũng không cần phải lo lắng về việc lưu trữ vì các tệp phông chữ được lưu trữ trên máy chủ của google.

Google Custom Fonts là gì và tại sao nên sử dụng chúng?

Có lẽ bạn phải suy nghĩ, tại sao bạn cần thêm tệp bổ sung vào blog của mình, nhưng hãy tin chúng tôi, tệp bổ sung này đáng giá hơn thế nhiều. Với sự trợ giúp của phông chữ tùy chỉnh này, bạn có thể tùy chỉnh blog của mình theo sở thích của bạn, Một blog hấp dẫn và đẹp mắt luôn được ưa chuộng hơn là các blog nhàm chán và không hấp dẫn. Bạn có thể tùy chỉnh văn bản blog, văn bản bài đăng, tiêu đề blog, tiêu đề widget, tiêu đề bài viết, tiêu đề trang, tiêu đề phụ và nhiều hơn nữa. cho dù bạn muốn văn bản dễ đọc đơn giản hoặc văn bản chữ thảo trông sành điệu, mọi thứ đều có thể được thực hiện với các phông chữ này  

Thêm tệp phông chữ từ phông chữ của Google 

Để duyệt thư viện Google Fonts, truy cập https://fonts.google.com/ . Có 949 họ phông chữ trong bộ sưu tập ngay bây giờ và họ tiếp tục thêm nhiều hơn, vì vậy bạn có thể muốn sắp xếp chúng. 

Để sắp xếp các phông chữ theo kiểu, bạn có thể sử dụng menu của trang web đó. Menu trên cùng cho phép bạn thêm và xem trước văn bản của chính mình bằng trường 'Nhập nội dung nào đó'. Từ cùng một menu, bạn có thể chọn 'Kích cỡ' và sắp xếp các phông chữ theo thứ tự chữ cái ', theo' Ngày thêm ',' Số kiểu ',' Danh mục ',' Ngôn ngữ ',' Chính xác 'và' Mức độ phổ biến ':


Khi bạn đã quyết định phông chữ nào bạn muốn sử dụng, hãy nhấp vào   nút (Nếu bạn muốn sử dụng nhiều phông chữ thì bạn có thể chọn thêm một phông chữ, nó sẽ hợp nhất chúng thành một tệp duy nhất.) Và ở cuối trang sẽ xuất hiện một hộp chỉ cần nhấp vào hộp để phóng to các tùy chọn liên quan đến phông chữ đó.



Sau khi nhấp vào một hộp sẽ xuất hiện trông giống như bên dưới, và sẽ có một số tùy chọn để thêm và xóa.


Hoặc bạn có thể sử dụng tệp phông chữ hoặc bạn có thể thêm một số kiểu vào phông chữ của mình, như trọng lượng phông chữ khác nhau và chữ nghiêng. Bạn chỉ cần nhấp vào tùy chọn ' TÙY CHỈNH ' như trong hình và bạn sẽ thấy các tùy chọn liên quan đến phông chữ, bạn có thể xem hình ảnh bên dưới để tham khảo.


Bây giờ bạn đã chọn mọi thứ, chỉ cần quay lại tùy chọn 'EMBED' và sao chép tệp liên kết html, để sao chép chỉ cần chọn nó bằng con trỏ và nhấn cntrl + C vào bàn phím của bạn. Các tập tin sẽ trông giống như mã dưới đây.
Dán code sau
 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Bây giờ bạn chỉ cần sao chép tệp này vào vùng tiêu đề mẫu của bạn và để làm như vậy. Chỉ cần làm theo các bước dưới đây. 

Điều đầu tiên bạn cần làm là đăng nhập vào tài khoản Blogger của bạn và truy cập >> Chủ đề >> Chỉnh sửa HTML và tìm kiếm mã <head> và ngay bên dưới nó dán mã tệp liên kết phông chữ. 

Nếu bạn không biết cách tìm mã cụ thể trong blogger thì hướng dẫn này sẽ giúp bạn. 
Cách tìm kiếm và tìm mã cụ thể trong Trình chỉnh sửa mẫu Blogger

Lưu ý  : - Tệp phông chữ mà google cung cấp không bao gồm thẻ đóng / Vì vậy, bạn cần thêm tệp  thủ công vào cuối và sau khi thêm tệp đó sẽ trông giống như mã bên dưới ..
Dán code sau
 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"/>
Bây giờ bạn đã thêm mã tệp phông chữ, bạn chỉ cần tùy chỉnh mã Css của mình, Như chúng tôi đã giải thích ngay từ đầu rằng bạn có thể tùy chỉnh phông chữ của  văn bản blog, văn bản bài đăng, tiêu đề blog, tiêu đề tiện ích, tiêu đề bài viết, tiêu đề trang, phụ tiêu đề và nhiều hơn nữa. Bạn chỉ cần thêm các lớp css hoặc Id thích hợp, để bạn có thể tùy chỉnh phông chữ của các phần tương ứng, chúng tôi đã thêm một số ví dụ bên dưới, bạn có thể sử dụng các lớp này để tùy chỉnh kiểu phông chữ blog của mình. Đồng thời bạn cũng cần xác định gia đình phông chữ của mình, bạn sẽ nhận được mã gia đình trong phần Nhúng, xem hình ảnh dưới đây chẳng hạn.




Điều đầu tiên bạn cần làm là đăng nhập vào tài khoản Blogger của bạn và truy cập >> Chủ đề >> Chỉnh sửa HTML và tìm kiếm kết thúc ]]> </ b: skin> và ngay phía trên nó dán đoạn mã sau.

1. Văn bản Blog

Dán code sau
body { 
   font-family: font-family: 'Roboto', sans-serif;
}

2. Tiêu đề blog

Dán code sau
#Header1 { 
   font-family: font-family: 'Roboto', sans-serif;
}

3. Tiêu đề bài viết (Trang chủ & Đăng bài)


.post h2 { 
   font-family: font-family: 'Roboto', sans-serif;
}
.post h2 { 
   font-family: font-family: 'Roboto', sans-serif;
}

4. Tiêu đề bài (H2. H3, H4, H5, H6)


.post-body h2 { 
   font-family: font-family: 'Roboto', sans-serif;
}
.post-body h3 { 
   font-family: font-family: 'Roboto', sans-serif;
}
.post-body h4 { 
   font-family: font-family: 'Roboto', sans-serif;
}
.post-body h5 { 
   font-family: font-family: 'Roboto', sans-serif;
}
.post-body h6 { 
   font-family: font-family: 'Roboto', sans-serif;
}

5. Đăng văn bản


 .post-body { 
   font-family: font-family: 'Roboto', sans-serif;
}

6. Tiêu đề widget


.sidebar h2 { 
   font-family: font-family: 'Roboto', sans-serif;
}
Lưu ý  : - Đây là một số lớp mẫu, chúng tôi không đảm bảo với bạn rằng nó sẽ khớp với mã mẫu của bạn, vì một số mẫu có các lớp và Id khác nhau, nhưng hầu hết các mã sẽ hoạt động như thân mã và mã liên quan.

Lưu ý **  : - Chúng tôi đã tạo css theo họ phông chữ Roboto, nếu bạn đang sử dụng bất kỳ họ phông chữ nào khác, thì bạn phải thay đổi văn bản được tô sáng màu đỏ với họ phông chữ của mình.

Nếu bạn vẫn còn bối rối làm thế nào để thêm css thì đây là một hướng dẫn cho bạn. 
Cách thêm css vào blog hoặc blogspot blog 

Tùy chỉnh văn bản

Bây giờ bạn đã thêm tệp và thêm tên họ vào, văn bản blog của bạn sẽ xuất hiện trong họ phông chữ đó, bây giờ để tùy chỉnh thêm, bạn có thể thêm trọng lượng và nhiều tùy chọn khác, sẽ cung cấp cho bạn thêm tùy chọn tùy chỉnh. Bạn có thể thêm các thuộc tính dưới đây vào mã CSS.
Dán code sau

font-weight: 400;
font-size: 12px;
font-style: italic;
text-decoration: underline;
letter-spacing: 1px;
word-spacing: 1px;
text-align: left;
text-shadow: 2px 2px #e4cbcb;
  • font-weight: Tùy chọn này là để tăng độ đậm của văn bản, số càng lớn thì văn bản sẽ càng đậm.
  • font-size: Tùy chọn này là để tăng kích thước của văn bản, số càng lớn thì văn bản sẽ càng lớn. 
  • font-style: Tùy chọn này là làm cho chữ in nghiêng.
  • text-decoration:  Tùy chọn này là gạch chân văn bản.
  • letter-spacing: Tùy chọn này là để tăng không gian giữa các chữ cái riêng lẻ.
  • word-spacing:  Tùy chọn này là để tăng khoảng trắng giữa các từ riêng lẻ.
  • text-align: Tùy chọn này dành cho việc căn chỉnh văn bản.
  • text-Shadow: Tùy chọn này là thêm bóng vào văn bản.
Đây là một số ví dụ về văn bản tạo kiểu, nếu bạn muốn kiểm tra thêm tùy chọn tạo kiểu, chúng tôi khuyên bạn nên kiểm tra trang web của W3School .

Phần kết luận

Chúc mừng !! Bạn đã làm nó. bây giờ bạn đã biết rằng Làm thế nào để thêm phông chữ web của Google trong Blog Blogger . Ghé thăm blog của bạn và kiểm tra tùy chỉnh tuyệt vời trực tiếp trong hành động, hy vọng bạn thích hướng dẫn này, nếu bạn thích thì hãy chia sẻ nó với bạn bè của bạn, chúng tôi đang nỗ lực để phát triển thêm các tiện ích tuyệt vời như vậy, hãy theo dõi chúng tôi.

Đăng nhận xét

0 Nhận xét

HOT !!!COMBO 6 CÁI SONOFF WIFI SWITCH CHỈ 637,500 đMua Ngay