Lập trình web

Hướng dẫn tạo font tiếng Việt cho website

Chia sẻ nhanh

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ó 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('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?iefix') format('eot'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('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ẻ đó

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?