Cách đổi Font chữ cho Template Median UI

Hướng dẫn này chỉ áp dụng cho việc thêm Fonts chữ từ Google Fonts, ngoài việc dễ dàng hơn và miễn phí, Fonts chữ được cung cấp cũng rất đa dạng. Để biết thông tin, chủ đề này cũng sử dụng Fonts chữ của Google.

Cách đổi Font chữ cho Template Median UI

Cài đặt Fonts chữ trên Blog

Mã nhúng được đề cập là mã CSS @ font-face , chúng tôi cho rằng bạn hiểu cách chọn Font trong Google Fonts. Trong hướng dẫn này, chúng tôi sử dụng Font bên dưới để thêm văn bản Arabic làm ví dụ:

<link href='https://fonts.googleapis.com/css2?family=Aref+Ruqaa&display=swap' rel='stylesheet'>

Mở url được đánh dấu ở trên qua trình duyệt, sau đó bạn sẽ tìm thấy mã CSS @font-face như bên dưới:

/* arabic */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIIoVeo5.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin-ext */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIkoVeo5.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIcoVQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Sao chép tất cả mã ở trên và dán vào bộ mã CSS trên blog của bạn, dán mã ngay trước ]]></b:skin> hoặc trước /*]]>*/</style> cho người dùng AMP (Accelerated Mobile Pages).

Cách dễ nhất để thêm CSS là thông qua trình thiết kế chủ đề Blogger:

• Vào Blogger, Nhấp vào Chủ đề > Tùy chỉnh
• Cuộn xuống tìm tab Nâng cao ,,
• Nhấp vào trình đơn thả xuống ' Theme Color '
• Chọn ' Thêm CSS '
  
• điền mã CSS vào cột được cung cấp, sau đó nhấp vào Lưu lại

Kích hoạt Fonts chữ Mới

Sau khi thêm mã CSS ở trên, Font đã được cài đặt trên blog của bạn, để kích hoạt hoặc sử dụng Font, bạn phải thêm quy tắc mới để gọi Font được cài đặt trên blog của bạn.

Vì Font được sử dụng trong ví dụ hướng dẫn này là Aref Ruqaa , nên mã để kích hoạt nó như sau:

font-family: 'Aref Ruqaa', serif;

Ví dụ về việc sử dụng nó trực tiếp trong các bài viết của bạn như sau:

<p style="font-family: 'Aref Ruqaa', serif;">السلام عليكم ورحمة الله وبركاته</p>

Kết quả hiển thị của đoạn mã trên sẽ xuất hiện như sau:

Hướng dẫn trên là cách chuẩn để sử dụng Font đã cài đặt trực tiếp, mặc dù phương pháp này có vẻ bất tiện vì bạn phải viết tên Font nhiều lần mỗi khi bạn muốn sử dụng nó.

Một cách dễ dàng hơn

Bạn có thể tận dụng CSS để viết mã thiết thực hơn bằng cách thêm tên lớp mới vào mã CSS của mình, chẳng hạn:

.arabF{font-family: 'Aref Ruqaa', serif;}

Dựa trên đoạn mã trên, bạn chỉ cần thêm class='arabF' để sử dụng Font chữ mới trong bài đăng của mình, ví dụ::

<p class='arabF'>السلام عليكم ورحمة الله وبركات</p>

Nó không phải lúc nào cũng phải là thẻ <p> bạn cũng có thể sử dụng <div>, <span> hoặc khác các thẻ..

Thay đổi Font chữ mặc định trong mẫu

Để thay đổi Font mặc định trong mẫu, bạn chỉ cần thay thế mã CSS bên dưới bằng tên của Font bạn vừa cài đặt:

--fontH: 'Noto Sans', sans-serif ;
--fontB: 'Noto Sans', sans-serif ;
--fontBa: 'Merriweather', serif ;
--fontC: 'Fira Mono', monospace ;

Một số mẫu có thể có tên Font khác nhau.

• --fontH — Font được sử dụng cho tiêu đề bài viết hoặc tiêu đề bài viết.
• --fontB — Font được sử dụng cho nội dung bài viết.
• --fontBa — Font thay thế được sử dụng cho các tiêu đề nhất định.
• --fontC — Font dùng để viết mã cú pháp.

Nếu bạn áp dụng đúng phương pháp, kết quả sẽ như thế này:

Truy cập Bypass Google Account APK để tải file APK nhé