Here’s a clean and safe way of changing fonts throughout the site:
1. Upload your font files at Squirell Webfont Generator
2. Upload the result in your [child-theme-folder]/fonts
3. Add
@import url("fonts/stylesheet.css");
to your style.css, at the start, after the theme definition comment.
Depending on how many fonts you import, the path above might differ: “fonts/regular/stylesheet.css”, “fonts/condensed/stylesheet.css”
At this point, you have successfully installed your font and is ready to be applied to any elements. In my case, the font I embedded was Expressway. So all I needed to do was apply it to all the elements I wanted:
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
font-family: 'Expressway';
}
h1, h2, h3, h4, h5, h6, div.ws-title div{
font-family: 'Expressway Condensed';
}
There are other ways of creating and embedding fonts in a website and I’m not endorsing this one. It’s just something I tried and worked.