Convert web font với Transfonter

Rate this post

Website hay ứng dụng nền tảng web, muốn có sự đặc sắc, thường được sử dụng với font kiểu riêng. Tuy nhiên, không hẳn font trên máy tính sẽ chạy tốt trên web. Đó là khi bạn cần 1 công cụ web font generator như của Transfonter.

Tại sao cần convert web font?

Cách thức hoạt động của Transfonter không có gì khác biệt, về cơ bản để font chạy trên trình duyệt và tương thích các thiết bị, bạn cần tối thiểu 4 định dạng font:

  • .eot
  • .svg
  • .ttf
  • .woff

Như vậy, thông thường trên máy tính của bạn sẽ chỉ có type .TTF hoặc .WOFF. Các type font kia sẽ cần tạo ra.

Hướng dẫn cách convert sang Web Font

Bước 1: Add font từ máy tính

Bạn vào website của Transfonter tại đây, click vào nút Add Font để chọn font từ máy tính của mình nhé.

Thêm font từ máy tính của bạn

Bước 2: Lựa chọn type của font sẽ convert

Sau khi upload font thành công, bạn cần chọn type của font như mình đã giải thích ở phần trên.

Lựa chọn font type trước khi Convert sang web font
Lựa chọn font type trước khi Convert sang web font

Bước 3: Convert sang web font

Đơn giản thôi, click button Convert. Sau khi hoàn tất, bạn sẽ thấy phần Download hoặc Preview.

Bước 4: Nhúng font vào web

Bạn sửa trong stylesheet như thế này nhé:

   @font-face {
    font-family: 'Sri-TSCRegular';
    src: url('sri-tsc-webfont.eot');
    src: url('sri-tsc-webfont.eot?#iefix') format('embedded-opentype'),
         url('sri-tsc-webfont.woff') format('woff'),
         url('sri-tsc-webfont.ttf') format('truetype'),
         url('sri-tsc-webfont.svg#Sri-TSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
   }
   body { font-family: "Sri-TSCRegular", serif }

Tất nhiên, bạn nhớ thay url tới font và tên font cho chính xác nhé.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...