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].
I applied the google fonts using a Custom CSS file as follows:
@import url(https://fonts.googleapis.com/css?family=Yantramanav:400,100,300,500,700,900);
leading to a CSS file that looks like:
html,
body,
div,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
td,
input,
textarea {
font-family: 'Yantramanav', sans-serif !important;
font-weight: 300 !important;
font-size: 18px;
}The website’s text renders this font appropriately, however, some icons like the “Search Icon” in the main menu does not load and looks like this:
The “scroll-to-top” icon suffers from the same issue and looks like this:
And lastly, the social networks as well:
How can I apply Google Font for the text that renders the “woff2” file properly, and the text that does not basically ignore this new font and load the default font which in this case for Vantage Premium 2.2.3 should be “‘Helvetica Neue’, Helvetica, Arial, ‘Lucida Grande’, sans-serif”. Any other solution to this problem?
I look forward to your response.
Best Regards!!
Hi Ava,
This is a tricky issue. The only real way to make it ignore your font would be to either force them to or to not tell them to use it in the first place. Do you have a public URL? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Ideally, if you could tell me more about where you want the font to be used I can provide more specific CSS for that.
By the way; as you’re a Vantage Premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on this page. Please reference this thread.
Hi Alex S,
Thank your your quick response. I dont mind if this question appears public, it may help other users. For this case scenario, I would like to apply the new font merely to Text, its to say, everything apart from icons such as the “Search Icon” in the main menu.
Basically, in the first comment I wrote above, I gave some examples of where I want the new font to be ignored, however, these are not all of them. To put it in a simple way:
– Everything thats has characters (alphabetical characters, numbers and symbols) => New Font
– Everything that has icons (search icon, facebook, twitter, etc) => Default Font (or ignore New Font)
These may be icons such as FontAwesome or icons from other plugins or even from the same Theme like the “scroll-to-top” icon that appears on the right.
I hope you can help me with this.
Many thanks!!
Hi Ava,
That’s really tricky. Personally, I think you should avoid doing this if you can help however if you still want to do it – which is fine, avoid targeting the span and the i elements. The i element is typically seen as the “icon” element these days and the span is also used.
There’s honestly no possible way to account for every plugin or theme in the world but if you don’t target the above two elements you’ll avoid 99.99% of all problems.
Hi Alex S,
Sorry for responding so late, I have been making changes to the website. First of all, thank you so much I removed the span elements from my CSS and this made most if not all icons appear once again. Only one icon remains, which is the magnifying glass icon for the search option in the main menu.
I found one “work around” which implies removing the div elements from my CSS, and although the magnifying glass icon appears, sadly some of the text gets rendered properly so this is not really a solution to be honest. Instead of removing the div elements, would there be a possible way to merely ignore this search-icon by using this CSS:
Is there perhaps a more efficient or logical approach to this?
Thanks again!
Hi Ava,
You can use not but please be sure to pay attention to this page as not every browser supports that pseudo-class. You could make use of jQuery for backwards compatibility if need be. I’m going to submit a suggestion to the development theme to switch to solely using the i element for icons to make it easier for people to do what you’ve done here.
Hi Alex S,
The pseudo-class was just a suggestion. I tried using all selectors I could imagine but I had no exit. Could you provide CSS of how to apply this pseudo-class with the according selector?
What do you mean with backwards compatibility? This is new to me, and in case the pseudo-class does not work could you provide the javascript code?
Regards!!
Hi Ava_barbilla,
I would recommend giving this article a read for more information on the not pseudo class.
In the word of browsers, things range from no support to poor support to fully supported. Typically as things get introduced they have spotty support for a while. You basically can’t use newly introduced aspects of CSS until they’ve been implemented in browsers and have been around for about a year. It used to be way worse in the days of non-automated updating browsers but it’s getting to the point where you don’t really have to worry about them.
Point in case. The Vantage theme comes with the selectivizr JavaScript utility preinstalled so you shouldn’t have to worry about dealing with any nasty JavaScript hacks to get it working. It’s just something to consider if you’re not using Vantage in the future.
Hi Alex S,
I know what it is and how to apply it, however, I am asking you to provide me the code given that what I have tried did not work. I tried:
and
Which did work, but other divs where influenced by this as well. I only want to select the search-icon and nothing more. How?
Hi Ava,
I’ve been reminded of how the icon font is set on the vantage theme. (I honestly forgot). As such the use of not isn’t required. Would instead recommend the following CSS.
If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
[class^="vantage-icon-"], [class*=" vantage-icon-"] { font-family: 'vantage-icons' !important;}You might also need to install the SiteOrigin CSS Editor.
Hi Alex S,
Works like a charm. Thank you very much!!
Great support.
Best Regardds
Hi Ava,
Awesome. Is there anything else I can help you with today?
Hi Alex S,
I dont need anything else. Thanks again!