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.
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.
Bài liên quan
- Tạo Sticky Side Button với Flatsome
- Hướng dẫn tạo sticky menu tuyệt đẹp chân trang cho flatsome
- [Code hay flatsome]Hướng dẫn Infinite Scroll, kéo sản phẩm vô cực trong Woocommerce
- [Code hay flatsome] Thay đổi biểu tượng share flatsome whatsapp, facebook
- Hướng dẫn tạo khung khuyến mãi đẹp trong flatsome
- Thêm icon trang trí vào add to cart trong woocommerce
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ì
xin chào. Viết hoa thì bạn vào typo của flatsome chỉnh sửa nhé. Bỏ uppercase đi
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!| а
Tks, welcome you
tùy biến cho chữ continue reading về tiếng việt tn bạn có thể hỗ trợ mk k nhỉ
cái này chỉnh được mà
có thể chỉnh sửa chữ tiếng anh thành tiếng việt k ad
chỉnh được nha bạn, đơn giản thôi, bạn vào phần customize(tùy biến)/Blog/blog global/Blog Excerpt Suffix. Đổi tên cái […] thành [Xem tiếp là được]
MÌNH VIET BÀI ĐĂNG RA CHỮ HOA K CÓ CHỮ THƯỜNG
xin lỗi đã rep muộn nha, đợt này mình bận quá. Bạn kiểm tra bàn phím có caplock không. Hoặc kiểm tra xem cái title của nó để ABC hay Abc ý. Nếu biết code 1 xíu thì là thuộc tính uppercase ý.
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.
đã rep nha :))
Pingback: Google
Anh cho em hỏi, em vào phần sửa giao diện => style css để thêm đoạn trên những vẫn không hiển font arial anh ạ.
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.
mình muốn đổi font trên 1 trang hay 1 đoạn thì làm như thế nào ạ?
dùng css đổi theo kiểu inline thôi