So this is a few questions in one:
I’m not new to WordPress but I haven’t attempted to make customizations before, aside from choosing a theme or moving widgets around, etc.
I installed a new theme and the default fonts aren’t the best, they’re too small and a non-regular font type. I want to change them but don’t have any experience with that on a site-wide level, and I only have the free version of the theme so it’s not included in their provided options.
1) I figure I can either go into the overall CSS and I think there is only one place (?) that sets the ‘body text’ for all posts, that I can just write in whatever regular font + backup fonts I want to have. I think one way to do this is to create a child CSS or whatever it is called but I’m not sure I have permissions to do that currently or simply (I don’t do the full back end of my site, the web host does some of that) but I did get a backup utility installed so if I mess something up in the overall CSS there’s a version of my site from within the past week I can revert back to.
2) Or I can do the ‘customize CSS’ in the theme (under Appearance) but it just gives me a blank box to write in some CSS? And I’m not sure if that is how to do it, or how much code I need to put in there for it to work, if so.
3) Or it seems I can get a plugin that makes it easy to do for the overall site. The most recommended ones seemed to be ‘Google Fonts’ something or other (for example, ‘Easy Google Fonts’) but when I went to look more I found a ‘Remove Google Fonts’ plug-in and it seems like there are reasons to not use Google Fonts. And I did their little tool to see about how my website currently is – I assume is because of the theme I’m using – and I have a number of Google Fonts I’m already using.
Any advice or suggestions? I do know basic html, like how to do the content of a page, and the structure, but not specifically CSS or anything more advanced.
Thanks
​
\*PS: One other question, is based on paragraph/option 1. The question is if the CSS includes the current theme, and will change if/when I change the theme or when the theme updates, or if the CSS remains standard while the theme is kind of layered on top of it.
\*PPS: I’ve read some of the posts in this sub about (getting rid of) Google Fonts, including storing them locally, but at this point I’m not sure my technical capabilities will allow me to do the best solution.
[ad_2]
Yes, you can [set custom fonts in the site CSS]). For best performance I prefer to locally host a .woff2 font file rather than use Google. I separately disable Google fonts on my site altogether.
You can use a reduced character set in the font (if practical) to trim down the file size. Locally hosting also eliminates a request to another external server which improves performance.
I’d suggest doing a child theme, then build a assets folder and include the necessary fonts + CSS in the child theme. That way it won’t be lost to theme updates, nor will a random plugin / DB update have the potential to fuck it up.
In regards to using Google Fonts, you can do it, but you absolutely should be the one to host it. Ie. don’t link the font directly from Google, as they’ll be able to track your users this way (see this for more: [https://insights.project-a.com/the-court-says-dont-use-google-fonts/]).
This isn’t an issue if you host the font yourself.
Let’s start with the basics. Fonts like images, stylesheets and others are a great way to improve user experience. And they also have the ability to impact performance.
Adding custom fonts can increase the overall weight of the website since devices may not have them installed and they have to be downloaded to the user’s device to display. Tip: If you don’t need them, it’s always best to use system fonts – [https://systemfontstack.com/]) since they already come packaged.
Back to your question(s).
* If you want the fonts to persist between themes, you should consider using plugins for ease and simplicity especially if you are just starting out. Check out [https://wordpress.org/plugins/styleguide/])
* If you’d like to customize the look and feel on your own, adding them to either the ‘Customizer’ or child theme is the way to go. You can either call a bunch of external libraries or host them locally. Let’s imagine you’d like to use the Roboto font locally. To add the fonts, you would include a bunch of font selectors like so from helpers such as [https://gwfh.mranftl.com/fonts/roboto?subsets=latin]). Be picky about the variety of fonts you’d like to support. While it’s always merrier with more, it has a way of impacting performance. You’ll also need to upload the various fonts to the ‘fonts’ directory on your webhost.
`/* roboto-regular – latin */`
`u/font-face {`
`font-display: swap; /* Check for other options. */`
`font-family: ‘Roboto’;`
`font-style: normal;`
`font-weight: 400;`
`src: url(‘../fonts/roboto-v30-latin-regular.eot’); /* IE9 Compat Modes */`
`src: url(‘../fonts/roboto-v30-latin-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */`
`url(‘../fonts/roboto-v30-latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */`
`url(‘../fonts/roboto-v30-latin-regular.woff’) format(‘woff’), /* Modern Browsers */`
`url(‘../fonts/roboto-v30-latin-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */`
`url(‘../fonts/roboto-v30-latin-regular.svg#Roboto’) format(‘svg’); /* Legacy iOS */`
`}`
Next, you can choose the elements you want to target e.g. body. If yes, the additional CSS would go like:
`body {`
`font-family: ‘Roboto’, sans-serif;`
`font-size: 48px;`
`}`
Now, on the topic of privacy. It’s your responsibility to let users know if you are using third-party services.