Tạo web font tiếng Việt cho website

Posted on 21. Jan, 2013 by in Hướng dẫn

Có thể các bạn sẽ thắc mắc sao cần phải tạo web font tiếng Việt trong khi website đã có sẵn font hoặc có thể dùng Google font, cufont để tạo font ấn tượng. Tuy nhiên, nhiều website mới, đặc biệt là w0rdpress, có những phông chữ đẹp, ấn tượng nhưng không hỗ trợ tiếng Việt. Vì thế, bài viết này sẽ hướng dẫn tạo webfont ấn tượng và hỗ trợ tiếng Việt cho website của bạn.

Bước 1: Chọn font unicode mà bạn thích, vào đây để chọn: font unicode rồi tải font bạn thích về máy tính

Bước 2: Vào web tạo font, click add font, chọn font bạn mới tải ở bước 1, rồi chọn Expert

Font format: chọn True type, woff, svg, eot

Character Type: các bạn chọn Lowercase, upercase, number…

Unicode table: Chọn Basic latin

Single Characters: thêm cái đoạn sau vào:

àáạảãâầấậẩẫăằắặẳẵèéẹẻẽêềếệểễìíịỉĩòóọỏõôồốộổỗơờớợởỡùúụủũưừứựửữỳýỵỷỹđÀÁẠẢÃÂẦẤẬ
ẨẪĂẰẮẶẲẴÈÉẸẺẼÊỀẾỆỂỄÌÍỊỈĨÒÓỌỎÕÔỒỐỘỔỖƠỜỚỢỞỠÙÚỤỦŨƯỪỨỰỬỮỲÝỴỶỸĐ

Click vào Agreement rồi chọn download về máy

Bước 3: Copy font vào thư mục “font” trên host của bạn

Bước 4: vào file css (Style.css), thêm đoạn code sau(thay BebasNeueRegular bằng tên font của bạn):

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('https://fontchu.com/files/blog/2013/01/fonts/bebasneue-webfont.eot');
    src: url('https://fontchu.com/files/blog/2013/01/fonts/bebasneue-webfont.eot?iefix') format('eot'),
         url('https://fontchu.com/files/blog/2013/01/fonts/bebasneue-webfont.woff') format('woff'),
         url('https://fontchu.com/files/blog/2013/01/fonts/bebasneue-webfont.ttf') format('truetype'),
         url('https://fontchu.com/files/blog/2013/01/fonts/bebasneue-webfont.svg#webfont4Bjy2lJe') format('svg');
    font-weight: normal;}

Bước 5: Bạn muốn font này hiện ở đâu thì thêm thuộc tính font-family=”tên font bạn chọn” vào css của thẻ đó

Từ khóa tìm kiếm:

tạo phông chữ đẹp, tạo font chữ đẹp, TAI FONT VNI-CORPORATE, font vni corporate, tai phan mem tao phon chu viet chu dep

Tags: ,

Leave a Reply