1. & 2. To find out these sort of things, have a play around with Firebug (or equivalent developer tools). See this 6 minute video: https://www.themesandco.com/snippet/firebug-best-spent-6-minutes/
Firebug shows you that Customizr uses font-family: "Helvetica Neue", Helvetica, Arial, sans-serif.
The browser will try to load each of those fonts in order and loads the first one that it finds on your system.
A Mac should load Helvetica Neue, because it’s there by default. I’m not sure if Windows has Helvetica; if not, it will load Arial.
3. If you wanted to add the OpenSans font, for example, the code would look something like this:
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#OpenSans') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-LightItalic-webfont.eot');
src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-LightItalic-webfont.svg#OpenSans') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Semibold-webfont.eot');
src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Semibold-webfont.svg#OpenSans') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSans') format('svg');
font-weight: bold;
font-style: italic;
}
that is, assuming that you had put those font files in a \fonts folder in your child theme. These four statements give you normal, italic, bold and bold+italic for that font. The format of the statements is as close to voodoo as you can get, but it makes them work on all browsers. You then need to add the fonts to the individual elements—body, headings, paragraphs etc.—in your stylesheet with something like this:
body {
font-family: "OpenSans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
4. You really need a child theme to do this. You need to get hold of the fonts that you want to use—open source or paid. Font Squirrel is a popular resource for fonts.
5. Yes.
Google supplies a large number of fonts, most of which are unbearable (to my eyes, anyway). If you want to pay, there are services like Typekit, which will rent fonts to you for a fee.
The questions you are asking lead me to believe that you might be better off with a plugin. Understanding fonts is a long job and sourcing working copies sometimes difficult too. It’s also a copyright minefield as the digital age has seen companies scramble to make money out of something that was once uncopyrightable.
There are plugins to load Google free font service here on www.remarpro.com, or nikeo has written the (paid) WordPress Font customizr. A discerning eye can pick out the good’uns from Google fonts—they have most of the open source fonts that there are to be had (but not all).
Having said all that, you can also get a lot of mileage through careful letter spacing and weighting of the font you already have. Helvetica is still beautiful if you treat it right—add the following to your Custom CSS to see the effect on your headings:
h1,
h2,
h3,
h4,
h5,
h6,
.marketing h2,
footer#footer h3 {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 200;
font-style: normal;
letter-spacing: 2px;
}
They immediately become more elegant. You can play around with the paragraph text’s weight in the same way (weights go from 100-700, a hundred at a time).
Clever use of CSS can immediately set your site apart from the rest.
