Is this theme compatible with WordPress 4.0? I had changed the font but the change doesn’t seem to show up in all browsers now that I updated WordPress.
Fonts in WordPress 4.0
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Peggy
Focus unfortunately doesn’t have font options in the Customizer. Which font would you like to change?
I wanted to have Bebas Neue as the font in the headings, captions, body, IE, everywhere. My client is in love with this typeface, what can I say? Can you help? :-)
You’d need to create a web font using a service like Font Squirrel. You’d then need to upload those files to a place on your server, somewhere outside of the Vantage theme folder. Finally you’d need to call those fonts and apply them to the site. Below is an example using Proxima Nova, you’d need to swap out file urls with your own and all of the Proxima Nova declaration with your fonts. The below snippet should be placed under Appearance > Custom CSS for Vantage Premium or in your own Custom CSS module if you’re using Vantage Free.
@font-face { font-family: 'proxima_nova_altlight'; src: url('http://www.newpokerschool.it/wp-content/themes/vantage/fonts/proximanova/proximanova-webfont.eot'); src: url('http://www.newpokerschool.it/wp-content/themes/vantage/fonts/proximanova/proximanova-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.newpokerschool.it/wp-content/themes/vantage/fonts/proximanova/proximanova-webfont.woff') format('woff'), url('http://www.newpokerschool.it/wp-content/themes/vantage/fonts/proximanova/proximanova-webfont.ttf') format('truetype'), url('http://www.newpokerschool.it/wp-content/themes/vantage/fonts/proximanova/proximanova-webfont.svg#proxima_nova_altlight') format('svg'); font-weight: normal; font-style: normal; } body { font-family: 'proxima_nova_altlight' !important; }I’m using Focus Premium – does the same apply?
Yes, the same will apply. Font Squirrel’s generator will output most of this for you: http://www.fontsquirrel.com/tools/webfont-generator. Just compare it to mine and make changes where required.
Okay, thank you. I put this into custom CSS but am not seeing the correct font on my phone? Did I need to change the theme stylesheet too?
@font-face {
font-family: ‘bebas_neueregular’;
src: url(‘bebasneue-webfont.eot’);
src: url(‘bebasneue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘bebasneue-webfont.woff2’) format(‘woff2’),
url(‘bebasneue-webfont.woff’) format(‘woff’),
url(‘bebasneue-webfont.ttf’) format(‘truetype’),
url(‘bebasneue-webfont.svg#bebas_neueregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
body { font-family: ‘bebasneue’ !important; }
All of the urls like: bebasneue-webfont.eot would need to be changed to absolute urls like http://benjaminshearn.com/fonts/bebasneue-webfont.eot or wherever you put those fonts. Give that a try.