Shopify cung cấp hàng trăm phông chữ miễn phí để sử dụng cho cửa hàng của bạn. Tuy nhiên, bạn cần sử dụng phông chữ tùy chỉnh để phù hợp với nguyên tắc thương hiệu của mình nhưng phông chữ này không được Shopify hỗ trợ, bạn vẫn có thể thêm phông chữ đó vào chủ đề của mình. Dưới đây là hướng dẫn về cách thực hiện:
Trước tiên, bạn cần phải có sẵn phông chữ của mình. Một số phông chữ có giấy phép, vì vậy hãy đảm bảo bạn mua chúng đúng cách để sử dụng. Nhóm hỗ trợ của chúng tôi sẽ không chịu trách nhiệm nhận các phông chữ bạn yêu cầu.
Tiếp theo, chuẩn bị hai tệp có định dạng .woff và .woff2 cho mỗi kiểu phông chữ cần thêm. Điều này nhằm đảm bảo rằng phông chữ bạn thêm vào có thể đọc được trên tất cả các loại trình duyệt.
Sau khi có đủ file các bạn upload vào thư mục File trong Theme settings .
Tất cả các tệp phông chữ đã tải lên của bạn đều có nút chuỗi ở bên phải để cung cấp liên kết tệp cho hành động sao chép của bạn.
Tiếp theo, quay lại bảng điều khiển quản trị viên của bạn, nhấp vào Cửa hàng trực tuyến > Chủ đề và chọn chủ đề Be Yours để chỉnh sửa thêm. Bấm vào Hành động > Chỉnh sửa mã .
Trong cửa sổ chỉnh sửa mã đang mở, bạn điều hướng đến thư mục Snippets ở cột bên trái. Trong thư mục này, nhấp vào tệp “css-variables.liquid” để thêm một số mã tùy chỉnh cho phông chữ mới.
Trong file mở file “css-variables.liquid”, bạn thêm mã bổ sung theo kiểu tab. Nó có thể được tìm thấy dưới dòng chữ {%- style -%} . Các mã được thêm vào như sau:
@mặt chữ {
họ phông chữ: " MyFontHeading ";
src: url(' thêm liên kết tập tin phông chữ của bạn ') format("woff2"),
url(' thêm liên kết tập tin phông chữ của bạn ') format("woff"); }@mặt chữ {
họ phông chữ: " MyFontBody ";
src: url(' thêm liên kết tập tin phông chữ của bạn ') format("woff2"),
url(' thêm liên kết tập tin phông chữ của bạn ') format("woff"); }Lưu ý : Các phần chữ in nghiêng do bạn tùy chỉnh. Số lượng mã @font-face{ } được thêm vào tùy thuộc vào số lượng kiểu phông chữ mà bạn có.
- Sau đó, bạn tìm kiếm văn bản “font-body-family” để điều hướng đến dòng mã có liên quan và thay thế tất cả các phần của {{...}} bằng văn bản đã thêm của bạn cho font-family trong mã của bước 6 (trong phần của chúng tôi ví dụ: đó là 'MyFontHeading'). Tương tự, tìm kiếm văn bản “font-heading-family” và thay thế tất cả các phần của {{...}} bằng văn bản đã thêm của bạn cho dòng font-family ('MyFontBody' trong ví dụ của chúng tôi).
- Sau khi thay thế sẽ như hình bên dưới:
- Cuối cùng, nhấp vào Lưu .
Ghi chú :
- Các cài đặt trong Cài đặt chủ đề > Kiểu chữ không còn hiệu lực cho dù bạn định cấu hình ở đây như thế nào sau khi bạn thêm các mã này vào tệp “css-variables.liquid”.
- Tất cả các hướng dẫn trên đều có thể áp dụng khi bạn áp dụng cùng một phông chữ tùy chỉnh cho tất cả các phần và khối. Trong trường hợp bạn cần áp dụng nhiều phông chữ khác nhau cho các phần hoặc khối khác nhau, quá trình chỉnh sửa sẽ phức tạp hơn nhiều và vui lòng liên hệ với nhóm hỗ trợ của chúng tôi để được trợ giúp thêm.
Chúng tôi hy vọng bạn thấy bài viết này hữu ích! Nếu bạn có bất kỳ thắc mắc nào về tính năng này, vui lòng liên hệ với nhóm của chúng tôi để được hỗ trợ thêm.
