[ WordPress ] Thấy 1 web khác đẹp lụm về cài font wordpress

Khi bạn thấy 1 website khác có font rất đẹp nhưng không biết đó là font gì thì đây là cách cài font

Bạn hãy làm theo các cách bên dưới của tôi để lụm cái font đó về trên web mình

Cách cài font wordpress

Đầu tiên bạn hãy tìm 1 website có font thật đẹp ở đây tôi ví dụ là Hostinger nhìn khá đẹp

Bắt đầu

Bạn hãy mở F12 lên hoặc chuột phải chọn inspect để kiểm tra phần tử

Tiếp đến là nhấn vào tab computed như hình bên dưới

Tiếp đến hãy tìm đến font-family bạn hãy lấy cái tên lên google font

Hãy search giống như tôi làm “tên font”+ google font

ví dụ: “Mulish google font“

Nhấn vào embed

Tại đây có code bạn hãy copy dòng này và tiếp tục thực hiện các bước bên dưới

Config font lên wordpress

Giờ hãy vào wordpress

Phần Appearence -> Theme File Editor -> Header.php

		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">

Dán vào như tôi tại đây font sẽ chưa hiển thị đâu

Bạn cần phải thêm font-family vào toàn bộ trong web

Căn chỉnh lại cho phù hợp giống như code bên dưới

Full Code thêm edit lại văn bản và nội dung cho người đọc dễ nhìn dễ đọc cả web và mobile

body,html {
	font-family: "Mulish", sans-serif;
  font-style: normal;
  font-weight: 400
}



@media screen and (max-width: 768px) {
  p,span,li {
		line-height: 32px;
    margin-bottom: 1.1em;
		font-weight: 700,
		letter-spacing:0.3px;
		font-size:20px;
		text-size-adjust:120%;
  }
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
   p,span,li {
		line-height: 32px;
    margin-bottom: 1.1em;
		font-weight: 700,
		letter-spacing:0.3px;
		font-size:20px;
		text-size-adjust:200%;
  }
	
}

@media screen and (min-width: 1024px) {
   p,span,li {
		line-height: 32px;
    margin-bottom: 1.1em;
		font-weight: 700,
		letter-spacing:0.3px;
		font-size:20px;
		text-size-adjust:200%;
  }
}

Sau đó bạn cần chỉnh sửa lại cho hợp lý với website để nó hiểu thị đúng ý của bạn

#Mtips5s #Contact

Fanpage: https://www.facebook.com/mtipscoder

Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder

Website: https://mtips5s.com

Youtube: https://mtips5s.com

Twitter(X): @takagiks99

Instagram: @khuongkara

Threads: @khuongkara

Google Maps: @khuongkara

#Base Code #Souce Code

Bộ công cụ My Self: @tools.mtips5s.com

Github: @github

Npm: @npm

Docker: @docker

Chúc các bạn thành công!

Written by admin