search

cadentcom / pico-wp-block-theme

Plco Block is an open source WordPress block theme optimized for speed, SEO, and accessibility, built in accordance with FSE (Full Site Editing) standards
GNU General Public License v3.0
0 stars 0 forks source link

Web-safe fonts are specified but boring #18

Open stratofax opened 6 months ago

stratofax commented 6 months ago

The current version of the pico theme specifies one sans-serif font for the entire site. Let's use a Serif web safe font for headings, and the existing font spec for body text.

ratulkhan74 commented 6 months ago

@stratofax Which font family do you want to use for heading as Serif font?

stratofax commented 6 months ago

I like Garamond, from the Web Safe set. Let's try that.

ratulkhan74 commented 6 months ago

@stratofax This font only for heading right?

ratulkhan74 commented 6 months ago

@stratofax Font added done

stratofax commented 6 months ago

@ratulkhan74 as you can see (above) I linked this Issue to PR #24 -- please do the same for all the other related issues before we merge and close #24 .

ratulkhan74 commented 6 months ago

@stratofax okay i will, actually i just notice that you asked me to add the link link #24

stratofax commented 6 months ago

@ratulkhan74 The whole point of using Web Safe fonts was to avoid having to download and load font files. Please remove all font files from this branch, and update the font specification for headings only as follows:

Garamond, Georgia, Times New Roman, Times, serif

ratulkhan74 commented 6 months ago

@stratofax without the source file how these font will load and this is the way how we have to add our own fonts also system by default support sans-serif font not serif fonts

stratofax commented 6 months ago

@ratulkhan74 the same way the system-font specification works.

This font specification:

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif

instructs the browser to look for each font, in order of appearance, already installed on the visitor's computer. If a font isn't pre-installed (like, say, Ubuntu) the browser will try the next font, until it reaches sans-serif -- which is always available.

That's the whole idea behind "web safe" fonts: they're a set of fonts that are typically installed in most or all computers.

Interestingly, your font spec (above) doesn't include a web-safe font! Please add one from this list that isn't Helvetica or Arial (also boring!)

https://blog.hubspot.com/website/web-safe-html-css-fonts

TL;DR: Web safe font list:

Note that Garamond is not included on this list, even though it's often pre-installed on Windows and Mac computers. That's why our new heading font spec needs to include Georgia and serif as well.

Does that make sense?

ratulkhan74 commented 6 months ago

@stratofax let's give it a try it's work or not the way you want to add all the fonts in the theme.json file

ratulkhan74 commented 6 months ago

@stratofax I have added few fonts from your given list the way you wanted to add I am creating a PR

stratofax commented 6 months ago

@ratulkhan74 as noted, please link an Issue to a PR or a branch when you start your work on the code.

ratulkhan74 commented 6 months ago

@stratofax I didn't understand. How i can link an issue to a PR or a branch when i will start work on the code

stratofax commented 6 months ago

@ratulkhan74 I'll post some links here to help explain exactly what I mean.

ratulkhan74 commented 6 months ago

@stratofax It would be better and it will help me a lot