System Font Stack

Is there a way to use a System Font Stack with the Woodmart template? I added the CSS in the Custom CSS. When I inspect the page the code is showing but it is overrode. I tried to add “!important” to the code but it does not make a change.

body {font-family: -apple-system, system-ui, BlinkMacSystemFont, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;}

Hello,

You can upload custom fonts and then set them in the Theme Settings. Please find here the detailed instruction on how to do that: https://xtemos.com/docs/woodmart/faq-guides/upload-custom-fonts/

Best Regards

Using System fonts would use the Windows and Apple fonts that a system already uses instead of loading fonts from a website. This would speed up a site. Here is some more information on it:

https://woorkup.com/system-font/

wpmediamastery.com/why-and-how-to-use-a-system-font-stack/

https://wordpress.org/support/topic/how-to-use-system-fonts/

You already allow the custom CSS. This would be something great to implement.

Hello,

Custom fonts allow uploading the font to the site to speed up the site. https://xtemos.com/docs/woodmart/faq-guides/upload-custom-fonts/

Best Regards

Actually i was expecting to find answer for this.
Is there any way to use system fonts without upload anything.

https://woorkup.com/system-font/

System fonts: Free, look pretty darn good as they match the OS, and no download time required! They are used by GitHub, Bootstrap, Medium, Ghost, Booking.com (read their system font story), and even your WordPress dashboard. In my personal opinion system fonts look slightly better on macOS versus Windows.

Hello,

You can set Google fonts in the Theme Settings > Typography.

Best Regards

Xtemos…Please read about system fonts. It should not require uploading anything. https://woorkup.com/system-font/

We know you allow upload of fonts and google fonts. I don’t think this is the same thing.

Hello,

Do you mean these ones: https://prnt.sc/udfqsr ?

Our theme has the option to set Default fonts, Google fonts, and custom uploaded fonts. You can find all the options in the Theme Settings > Typography.

Best Regards

Ok, do you mean that “standard fonts” in that TYPOGRAPHY section is exactly same with “system fonts”.
means user don’t need to download any font from our website?

Hello,

I mean WoodMart theme has the predefined set of fonts that are available in the Theme Settings > Typography.

I do not understand what you mean saying “system fonts”.

Best Regards

I see, do you mind to read the links we have provided before?

Hello,

Way # 1
Navigate to the Theme Settings > Typography > Custom fonts and write the fonts you want to apply as shown: https://prnt.sc/udiymp Do not upload any files, just write the font.

Then set this font in the Theme Settings > Typography or in Custom CSS https://prnt.sc/udizim chose the font only from “Custom tab”

In this way you can set one font only.

Way # 2

Navigate to the Theme Settings > Typography > clean all the select so that no font was chosen Save.

https://gyazo.com/c572d54dee3e1bad6e642baeb33f40ce

Then add your custom https://prnt.sc/udjogc to the Theme Settings > Custom CSS;

If the user has this font installed, it will be applied.

Best Regards

I have tried way #2 in my staging website.

Google page insights still shows this font.
…fonts/woodmart-font.woff

Avoid chaining critical requests 4 chains found
The Critical Request Chains below show you what resources are loaded with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load. Learn more.

…fonts/woodmart-font.woff(staging.g) – 20 ms, 13.11 KiB

Is it normal?

I maybe wrong but System Fonts (SYSTEM FONT STACK) tells the website to revert back to the Operating System fonts the device is using that accesses the website.

For example if my website used a System Font Stack and I use an iPhone to view a website with System Fonts then the iPhone displays text on my website in its native font (-apple-system (San Francisco)). If I use Google Chrome on Android to view the website it would display text using the native font (Roboto) of Google Chrome on Android. Each system uses its own fonts. This means there are no fonts to download increasing speed of the website.

System fonts: Free, look pretty darn good as they match the OS, and no download time required! They are used by GitHub, Bootstrap, Medium, Ghost, Booking.com (read their system font story), and even your WordPress dashboard. In my personal opinion system fonts look slightly better on macOS versus Windows.

They feel just like your OS because they are using native fonts. Many of the modern operating systems choose fonts very wisely and all have a very sleek look and feel to them. It’s not like defaulting back to a web-safe font of Arial or Times New Roman. Trust me, nobody wants to see Times New Roman on a website.

This is how a web font may be used by CSS
font-family: "Open Sans","Helvetica Neue",sans-serif;

This is how a System font may used by CSS
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Wordpress Dashboard uses the following System font.
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

We believe this would make WoodMart Theme even faster!

Here is an example of implementation using @font-face

@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

/* Now, let's apply it on an element */
body {
  font-family: "system";
}

Here is the website on using @font-face:

https://css-tricks.com/snippets/css/system-font-stack/

Hello Saka,

Woodmart-font is the WoodMart icon font and 20 ms, 13KiB – are common values for this type of file.

Hello brgreene,

Thank you for sharing the information.

Best Regards

I wish you can spend some time for “System Font Stack”.
Thank you.

Hello,

We shall take into consideration your request. If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts