Tùy chỉnh font chữ flatsome – 1 phát được luôn

Tùy chỉnh font chữ flatsome – 1 phát được luôn

Mình chia sẻ cách đổi font trong theme flatsome đơn giản. Đặc biệt tốt với các bác không biết code nhưng vẫn muốn chỉnh sửa kích thước font flatsome. Ở mục này, Đoạn code được chia sẻ chỉ tùy chỉnh được các thẻ h1 đến h6 và body font. Với các thông tin cơ bản như chỉnh font thẻ body (font trong nội dung bài viết).

Các mục này đặc biệt tốt với các bác làm SEO, các anh em mới tập tành làm web blog cho bản thân hoặc cho lớp. Mấy cái này quất được hết.

1 phát ăn ngay, không cần phải nhớ hoặc tùy biến Css khác cho lằng nhằng.

Nếu anh em nào muốn tìm hiểu kỹ hơn thì có thể đọc thêm bài viết tùy chỉnh font Flatsome đầy đủ nhất. Cái này giúp anh em có cái nhìn toàn diện hơn về chỉnh font trong Flatsome.

Hình ảnh thuộc sở hữu của trang web qnet88.com

Chú ý

Tắt google font, dùng css load Arial thì càng nhẹ hơn.

Sau đó chỉ cần: “Thêm CSS tùy chỉnh này vào mục Customize/Tùy chỉnh CSS(ở phần dưới cùng). Lưu lại”

body{font-family: Arial,Helvetica,sans-serif; }
h1,h2,h3,h4,h5,h6{font-family: Arial,Helvetica,sans-serif;color:#000;font-weight:700}h1{font-size:2em}h2{font-size:1.8em}h3{font-size:1.5em}h4{font-size:1.2em}h5,h6{font-size:1em}

Chúc các bạn thành công.

Có khó khăn gì cứ comment xuống phía dưới. Mình sẽ hỗ trợ trả lời các anh em tất cả những gì mình biết.

4/5 - (3 bình chọn)
[related_posts_by_tax posts_per_page="6" title="Bài liên quan" taxonomies="category,post_tag"]

20 bình luận về “Tùy chỉnh font chữ flatsome – 1 phát được luôn

  1. Avatar of Cao Hiền Lương
    Cao Hiền Lương cho biết:

    Mình đã tùy chỉnh bằng Typogarphy trong style và thêm css như bạn hướng dẫn nhưng chữ trong tiêu đề và post vẫn bị viết hoa tất cả, không hiểu bị lỗi gì

  2. Avatar of бухгалтерская справка документ
    бухгалтерская справка документ cho biết:

    Pretty nice post. I just stumbled upon your weblog and wished to say that I have really enjoyed browsing your blog posts. After all I’ll be subscribing to your feed and I hope you write again very soon!| а

  3. Avatar of Tuấn hưng
    Tuấn hưng cho biết:

    Chào bạn, 
    tôi đang dùng Theme flatsome, muốn hỏi bạn chỉ giúp 

    Tôi muốn hỏi bạn về cách chỉnh sửa.
    – thay đổi màu cho giá sản phẩm mặc định (ví dụ đỏ )
    – cách chỉnh sửa to nhỏ phông chữ mặc đinh phần tiêu đề tên sản phẩm 

    Xin vui lòng chỉ giúp 

    Cảm ơn bạn.

  4. Pingback: Google

    • Avatar of Bố cu Hoàng
      Bố cu Hoàng cho biết:

      Bạn tải font lên trực tiếp web và làm theo hướng dẫn sau nhé.
      Mặc định các theme wordpress thường sử dụng font từ Google Font, nhưng điều này làm cho website của chúng ta trong khi load sẽ phải kết nối đến Google Font và load font về website. Như vậy sẽ làm chậm tốc độ tải website của chúng ta.

      Vì vậy, để có thể khắc phục việc này, chúng ta cần phải đưa Font chữ từ Google Font lên website và kết nối cục bộ.

      Các bạn truy cập: fonts.google.com, sau đó chọn font chữ mình thích hoặc website của các bạn đang sử dụng font gì thì chọn font đó trên Google Font và tải về.

      Khi tải về, định dạng font sẽ là *.ttf và việc của chúng ta cần làm là convert định dạng *.ttf sang *.woff2. Các bạn có thể truy cập trang font-converter.net để thực hiện việc chuyển đổi định dạng.

      OK, sau khi chuyển đổi định dạng xong, chúng ta tải font *.woff2 lên hosting bằng cách sử dụng Winscp, Filezila hoặc truy cập trực tiếp vào hosting ở mục File Manager > Publish_html tạo một folder mới đặt tên là fonts.

      Tiếp theo, chúng ta vào tệp styles.css hoặc bất cứ nơi đâu bạn có thể chèn code CSS và dán đoạn mã dưới đây vào

      @font-face {
      font-family: “roboto”;
      src: url(“./fonts/roboto.woff2”) format(“woff2”); /* Modern Browsers */
      font-weight: normal;
      font-style: normal;
      font-display: swap;
      }
      h1,h2,h3,h4,h5,h6 {font-family: “roboto”;}
      p, span {font-family: “roboto”;}
      nav>li {font-family: “roboto”;}
      roboto: là tên font của bạn, đặt tên tùy ý. Sau đó bạn muốn gắn vào thẻ nào thì liệt kê thẻ đó ngay bên dưới. Ở đây tôi gắn các thẻ h, p, span và li trên menu sẽ dùng font roboto.

      font-display: swap cần được thêm vào để giúp font được tải tối ưu hơn.

      Và bạn có thể làm tương tự với các font khác để khắc phục lỗi Đảm bảo văn bản vẫn hiển thị khi tải Font chữ web.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Hotline: 0974.0707.83(Zalo/Viber)