Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi, I have uploaded a custom font to my server and entered the codes in the theme style.css and in the custom css. The font “mohave-bold” shows up in my website seen via iMac but it does not change in my iPad and iPhone. Please help.
Thanks.
Hi Chandran
All WordPress themes completely overwrite their own folder when updating. Changes to style.css aren’t update safe and will be lost if we push a Vantage update and you run it.
Your “customfonts” folder should be moved out of the Vantage folder and into the root.
The following needs to be moved from style.css to Appearance > Custom CSS:
@font-face { font-family: "buildingcondensed_medium" src: url(http://www.atcas.org.sg/wp-content/themes/vantage/customfonts/building_typeface-webfont.eot); src: url(http://www.atcas.org.sg/wp-content/themes/vantage/customfonts/building_typeface-webfont.eot?#iefix) format('embedded-opentype'), url(http://www.atcas.org.sg/wp-content/themes/vantage/customfonts/building_typeface-webfont.ttf) format('truetype'), url(http://www.atcas.org.sg/wp-content/themes/vantage/customfonts/building_typeface-webfont.svg#buildingcondensed_medium) format('svg'), url(http://www.atcas.org.sg/wp-content/themes/vantage/customfonts/building_typeface-webfont.woff) format('woff'); font-weight: normal; font-style: normal; }The URLS will need to be updated to reflect the new storage location of the customfonts folder.
Adding the font is only one half the process. You still need to add that font value to the required selectors. Try:
/* Body */ body,button,input,select,textarea { font-family: "buildingcondensed_medium"; }(If you’d like to display your logo at the size upload check the setting at Appearance > Theme Settings > Logo > Constrain Logo Height.)
Many thanks, Andrew. Appreciate your time very much. Will change as advised.
Super, let us know how you come along.
Hi Andrew. I am afraid it is still not working. Please help. Thanks. I just want to change the h3 font.
Just at a glance it looks like your font URLS are going to 404. You can check the URLS in Custom CSS by inserting them int your address bar, they must resolve.
Please also check your entry-content h3 selector. The single inverted commas around Arial-Narrow are not plain text. Delete the inverted commas and re-add them in Custom CSS and they’ll be plain text.
I am trying to figure it out. Thanks Andrew.
Getting the URL correct for the location of the fonts is first step.
I have been trying all sorts of variations. No luck. Would you be able to help, please?
If your “fonts” folder is on the same level as “wp-content” then the URL should be:
http://www.atcas.org.sg/fonts/……….
Made some progress. Many thanks. But I get ‘Ariel Narrow’ instead of ‘buildingcondensed_medium’.
I’m still showing 404 for this URL:
http://www.atcas.org.sg/fonts/building_typeface-webfont.eot
Is the font definitely there?
Yes
The URL you use in Custom CSS has to resolve, before we do anything else we need to get that sorted.
I think we give it a rest for now, Andrew. I am running out of ideas and you must have better things to do. Talk to you tomorrow. Cheers !
We can use a child theme and put the fonts folder in there. If you’re prepared to redo your Appearance > Customize > Theme Design settings I’ll send a child theme.
Ok. Thanks, Andrew. I will give it a try if you would guide me along.
All good, I’m online and working support so I’m here to help :)
Here is a child theme:
https://siteorigin.com/wp-content/uploads/2015/03/vantage-child-starter.zip
Download, unzip, insert your fonts folder into it and upload the entire child theme to /wp-content/themes/. Then go to Appearance > Themes, locate the child theme and activate it.
Then the new fonts URL to be used in Custom CSS should be:
http://www.atcas.org.sg/wp-content/themes/vantage-child/fonts/
Ok Andrew, appreciate the kindness. Will keep you posted. Thanks again.
For sure, let me know how it goes. Technically this is the correct way to do things. You can store things in the WordPress root folder but it’s a bit more professional to have this folder in a child theme.
Hi Andrew,
I did not work on the child theme as I wasn’t sure of the tech issues. I did however, manage to get the correct URL to my “Fonts” folder after several hours. I hope I have done it right. The “antonio-regular” font renders fine on safari and chrome but not on firefox. It works on ios but not on android.
Any idea why? Thanks.
Correction to my last post…it does not work on ios either. Thanks.
Hi Andrew, I think I got it fixed. It was the font name. I am not sure if I have placed the fonts in the right directory but it seems to be showing up on my ios devices.
I can’t seem to get the .myclass h3 text on my Home page to change font weight. I would like to either change the font to “antoniobold” or “oswalddemibold”. Both the fonts are uploaded. Please help.
Thanks.
Thanks for the wait.
On your home page the widget title h3 tags are being set from:
.page-id-10 .entry-content h3 { font-family: 'antonioregular', 'Futura-CondensedMedium', sans-serif !important; font-size: 29; font-weight: 500; text-align: center; }Changing the font family above should resolve the widget title font family question.
Please note that font-size: 29; is not valid. You can have unitless line-height but font-size needs a unit like px for pixels.
Thanks, Andrew for pointing that out. Careless mistake. Sorry to trouble you but how do I target just the 3 h3 entries “WHAT WE DO” and the next 2 in the colored boxes?
I figured it out, Andrew. Thanks. If you have the time please go through to see if I have done it correctly please. Thanks.
Looking good on my side. I don’t see any problems with the method used. Nicely done.
Thanks, Andrew. Cheers !
For sure :)