Có website rồi, nhưng nhìn cái giao diện đẹp mà có cái font cùi cùi đi kèm theme hịn thấy nó sao sao ý, nên muốn đổi sang font khác cho website nó sang chảnh tý thì đọc bài viết này. Nói chung bài này sẽ hướng dẫn bạn cách sử dụng font-face sử dụng cho website dùng wordpress hoặc mọi mã nguồn khác, mà không cần plugin nào cả, dêz lắm. Mà muốn tìm font đẹp thì tham khảo bài này nhé 24 font design cực cool ngầu luôn.
B1. Chọn font thích hợp:
tìm mấy cái font đẹp đẹp tý mà hỗ trợ tiếng đông lào ý, vì web tiếng đông lào mà không có dấu má gì thì vứt, bài này ad lấy cái font open-sans làm ví dụ đi ha. tải về lưu ở đâu mà tìm thấy được.
B2. Convert font
vì font bạn tải về là font dùng cho windows nên không sài trực tiếp cho website được mà cần phải chuyển đổi. Bạn upload font đã chọn lên mấy trang sau:
Sau đó thiết lập các thông số cho bộ font của mình. Cái này ko biết dí bừa cũng dc chả sao cả. Cái ấn convert chờ xíu tải 1 cục về.
B3. Upload font-face vừa tạo lên hosting
Cái cục mà bạn vừa tải về ở bước trên ý, trong đó có 1 tấn file. Giải nén ra rồi upload lên 1 folder trên hosting của bạn, up cả cục nhé
B4. edit css
Mở cái file css trong cái đống vừa giải nén ra, trong có cái đoạn kiểu như là :”
|
1
2
3
4
5
6
7
8
9
10
|
@font-face {
font-family: ‘open-sans’;
src: url(‘open-sans.eot’);
src: url(‘open-sans.eot?#iefix’) format(’embedded-opentype’),
url(‘open-sans.woff’) format(‘woff’),
url(‘open-sans.ttf’) format(‘truetype’),
url(‘open-sans.svg#Sri-TSCRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
|
” biết thế, để tạm đó đã. rồi giờ vào phần chỉnh sửa css của theme của bạn (theme nào cũng có hết nhé, ai ko tìm thấy thì pm ad chỉ riêng cho) ném cái đoạn trên vào, xong rồi chỉnh lại cái đường dẫn cho đúng với website của mình (mấy cái file upload lên bước 3 ý).
VÀ NẾU DÙNG FLATSOME THEME THÌ CHO CÁI CÁC ĐOẠN NÀY VÀO PHÍA DƯỚI:
Base font:
|
1
|
body{font–family: “open-sans”, sans–serif}
|
Navigation font:
|
1
|
.nav > li > a {font–family: “open-sans”, sans–serif;}
|
Heading font:
|
1
|
h1,h2,h3,h4,h5,h6, .heading–font{font–family: “open-sans”, sans–serif;}
|
Alt font:
|
1
|
.alt–font{font–family: “open-sans”, sans–serif;}
|
save lại, xóa cache rồi tải lại trang. Well done! thế xong rồi đấy
Để lại email để nhận thông báo mỗi khi bên mình có bài viết mới nhé!
