10 font chữ kiểu viết tay từ Google Web Fonts

02/08/2017

Việc chọn lựa những font chữ thích hợp cho web hoặc blog thì thật không dễ dàng chút nào. Điều đau đầu nhất là chúng ta phải đảm bảo nội dung được hiển thị tốt trên máy người dùng. Trong bài viết này, mình sẽ chia sẻ cho các bạn 10 font chữ với kiểu viết tay cực đẹp và hoàn toàn miễn phí từ Google. Việc cài đặt sử dụng nó cũng hoàn toàn đơn giản, các bạn chỉ cần thao tác copy và paste mà không cần phải download bất kì font nào về máy.

Great Vibes

Nếu các bạn đang tìm những font chữ thanh mảnh và uốn lượn, thì font này hoàn toàn thích hợp cho các bạn. Mình đảm bảo là nó sẽ gây ấn tượng cho người dùng ngay từ cái nhìn đầu tiên.

10 font chữ kiểu viết tay từ Google Web Fonts

HTML

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>

CSS 

h2 {
  font: 400 130px/0.8 'Great Vibes', Helvetica, sans-serif;
  color: #fff;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
}

Oleo Script

Trái ngược với Great Vibes, font này lại có kiểu chữ đậm, rất thích hợp sử dụng cho những dòng headlines.

10 font chữ kiểu viết tay từ Google Web Fonts

HTML

<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>

CSS 

h2 {
  font: 400 100px/1.3 'Oleo Script', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

Lobster Two

Có lẽ mình sẽ không cần phải giới thiệu quá nhiều về font chữ này bởi sự thông dụng của nó. Với phiên bản 2, font này cho chúng ta 2 sự lựa chọn với kiểu đậm và mỏng.

10 font chữ kiểu viết tay từ Google Web Fonts

HTML

<link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>

CSS 

h2 {
  font: 400 100px/1.3 'Lobster Two', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
}

Berkshire Swash

Nếu các bạn muốn người dùng trải nghiệm những phong cách cổ điển với kiểu chữ lớn, đậm và uốn cong, thì kiểu font này là quá thích hợp.

10 font chữ kiểu viết tay từ Google Web Fonts

HTML

<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>

CSS 

h2 {
  font: 400 100px/1.3 'Berkshire Swash', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
}

Merienda One

Với sự mềm mại và uyển chuyển mà font này mang lại, những dòng chữ sẽ trở nên sinh động và có sức truyền tải cực lớn đến người dùng.

10 font chữ kiểu viết tay từ Google Web Fonts

HTML

<link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>

CSS 

h2 {
  font: 400 100px/1.2 'Merienda One', Helvetica, sans-serif;
  color: rgba(0,0,0,0.7);
  text-shadow: 3px 3px 3px #fff;
}

Pacifico

Với kiểu chữ đậm và từng đường nét được bo góc một cách kĩ càng, thì font này có thể sẽ mang lại những ấn tượng nhất định cho người dùng.

10 font chữ kiểu viết tay từ Google Web Fonts

HTML

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

CSS 

h2 {
  font: 400 100px/1.5 'Pacifico', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
}

Just Another Hand

Đây có lẽ là font chữ có kiểu viết tay gần giống nhất , và nếu kết hợp với thuộc tính text-shadow, thì các bạn sẽ có ngay một hiệu ứng 3D cực đẹp.

10 font chữ kiểu viết tay từ Google Web Fonts

HTML

<link href='http://fonts.googleapis.com/css?family=Just+Another+Hand' rel='stylesheet' type='text/css'>

CSS 

h2 {
  font: 400 100px/1.0 'Just Another Hand', Helvetica, sans-serif;
  color: #969595;
  text-shadow: 0px 3px 0px #5e5e5e, 0px 5px 0px #4d4d4d, 0px 7px 0px #3c3c3c, 0px 9px 0px #2b2b2b, 3px 8px 15px rgba(0,0,0,0.1), 3px 8px 5px rgba(0,0,0,0.3);
}

Arizonia

Đây là một kiểu chữ rất thích hợp cho thiết kế logo, và mình cũng không thể ngờ là google lại hào phóng tặng cho ngừoi dùng kiểu font đẹp như thế này mà lại hoàn toàn miễn phí.

10 font chữ kiểu viết tay từ Google Web Fonts

HTML

<link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>

CSS 

h2 {
  font: 400 100px/1.3 'Arizonia', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 4px 4px 0px rgba(0,0,0,0.1); 
}

Cookie

Không chỉ ngọt ngào như một chiếc bánh, font này còn mang lại sự ấm áp và quen thuộc cho người dùng từ cái nhìn đầu tiên.

10 font chữ kiểu viết tay từ Google Web Fonts

HTML

<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>

CSS 

h2 {
  font: 400 130px/0.8 'Cookie', Helvetica, sans-serif;
  color: #fff;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
}

Leckerli One

Đây là một font chữ có chất “ đàn ông ” khá cao với kiểu chữ to, đậm và đường nét đầy dứt khoát như một quí ông hoàn hảo.

10 font chữ kiểu viết tay từ Google Web Fonts

HTML

<link href='http://fonts.googleapis.com/css?family=Leckerli+One' rel='stylesheet' type='text/css'>

CSS 

h2 {
  font: 400 100px/1.2 'Leckerli One', Helvetica, sans-serif;
  color: #000;
  text-shadow: 2px 2px 0px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.2); 
}

Việc cài đặt những font này hoàn toàn đơn giản, chỉ việc đặt những dòng khai báo ở mục html vào bên trong cặp thẻ <head></head> và sử dụng giống như đoạn css bên dưới. Mình hy vọng là các bạn sẽ chọn được font chữ thích hợp cho website của mình, nhớ chia sẻ bài viết và nếu bạn nào biết font nào đẹp hơn, thì giới thiệu cho mình và mọi người ở mục comments nhé.

Cách tích hợp Google fonts vào Website

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !