Blocksy Theme's Font Management and "Back to Top" Feature: Optimizing Website Design and User Experience

In modern website design, customization of fonts and navigation features is essential to enhance user experience and website usability.Blocksy The theme not only provides flexible font management options, but also enhances the interactivity and convenience of the site through the "Back to Top" feature. In this article, we'll take a closer look at the Blocksy theme's font management features, including how toCustom FontsAnd how to enable and customize the "Back to Top" button to help you create more attractive and useful web pages.

图片[1]-Blocksy 主题字体管理与“回到顶部”功能:提升网站设计与用户体验

Font Management: Precise Control of Website Text Styles

Fonts are a crucial part of website design, not only affecting the visual appeal of the site, but also conveying the personality of the brand.Blocksy The theme provides a powerful font management tool, which allows users to customize their fonts via the customizer in theTypographySetting up easy control of various parts of the sitecalligraphic styleStyle.

Font setting options

Blocksy offers several font customization options that allow you to set it for different page elements, ensuring that the text is stylistically uniform and consistent with your branding. Specific settings include:

  • basic font: Adjust the basic fonts throughout the site to ensure a consistent text style across the site.
  • Heading fonts (Heading 1 - 6): Customize fonts for different levels of headings to help clarify page structure and enhance hierarchy.
  • Button Fonts: Change the font of the button text to harmonize the button with the overall design and enhance the visual effect.
  • Blockquote: Set unique fonts for quoted content so that it stands out from the body of the text.
  • Preformatted text fonts (Preformatted): Set the display font of the code block to make the code content easier to read.
  • Backup font family: Setting a default font as an alternative when the selected font cannot be displayed ensures website compatibility.
图片[2]-Blocksy 主题字体管理与“回到顶部”功能:提升网站设计与用户体验

Extended font setting options

Blocksy Each of the theme's font options supports further customization settings, including:

  • font size: Resize text in px, em, rem, pt and vw units.
  • your height (honorific): Set the text line spacing, support unitless, px, em, pt and %.
  • word spacing: To adjust the spacing between letters, use the em unit.
  • text conversion: Sets text to upper case or initial capitalization.
  • Text Decoration: Add strikethrough or underline to text.
  • font family: Choose from system fonts or Google Fonts, or upload a custom font.
  • thickness of font: Adjust the thickness of the font to suit different design needs.

Google Fonts Privacy Update

Starting in October 2022, as required by privacy regulations, Google calligraphic styleWarning messages may be displayed when loading. blocksy provides a native Google Fonts extension to bypass these privacy regulations and allow users to use Google Fonts in compliance with privacy requirements.

图片[3]-Blocksy 主题字体管理与“回到顶部”功能:提升网站设计与用户体验

Font Classification and Sources

in using Blocksy You will see some new icons to help you understand where each font comes from when setting up the fonts:

图片[4]-Blocksy 主题字体管理与“回到顶部”功能:提升网站设计与用户体验

S: Indicates a system font, loaded directly from the user's device, which is the most privacy-compliant option.

G: Indicates a remote Google font, loaded directly from Google servers.

A: Indicates a remote Adobe font, loaded directly from the Adobe server.

L: Indicates locally hosted Google fonts, loaded from your server.

C: Indicates fonts uploaded via custom font extensions.

These logos allow users to clearly understand how fonts are loaded and choose the font solution that best suits their needs.

Advanced Functions: Upload your personal font library

For Blocksy Pro users.Blocksy Allows uploading of personal font libraries or use of Adobe Typekit font libraries. Users can upload fonts of their choice to the server, further enhancing the personalization and design freedom of the website.

图片[5]-Blocksy 主题字体管理与“回到顶部”功能:提升网站设计与用户体验

"Back to top" functionality: improving website usability

The "Back to Top" button is a simple but effective feature that allows users to easily return to the top on long pages, improving the usability of your website, and the Blocksy theme offers a variety of customization options for this purpose, ensuring that the button's appearance matches the design of your website.

图片[6]-Blocksy 主题字体管理与“回到顶部”功能:提升网站设计与用户体验

Customization Options

Blocksy provides 6 different styles of "Back to Top" button icons, and users can also upload custom icons (only). Blocksy Pro (User). In addition, the user can select the shape of the button (square or round) and customize the spacing of the button from the edge of the viewport.

Device Adaptation

Blocksy also allows users to choose whether or not to display the "back to top" button independently of the device type (desktop, tablet, mobile). This flexibility ensures a smoother browsing experience across devices.

concluding remarks

Blocksy The theme's font management and "back to top" features provide powerful customization options that help webmasters enhance the user experience while improving visual appeal. Whether it's through fine-tuning font styles or customizing navigation buttons, Blocksy makes website design more efficient and convenient. If you want to create a beautiful and easy-to-use website, Blocksy is an ideal choice.

Recent Updates


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
客服微信
Customer Service
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: [email protected]
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
本文作者:托尼屎大颗
THE END
If you like it, support it.
kudos1244 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments