font-family style not working in wordpress menu - css

I beg you,some one please look at this , i am helpless to get it out.
I am doing a site for my client and created a responsive menu.
The font style for the menu is not working even though I marked it as important.
My site url is.
http://sparrowhair.softcorp.ca/
The style i am trying to use is.. Cocktail Shaker
Please help me.. Client is very hurry..
I have only half an hour.. and trying it from morning.
Thanks in advance

You're trying to fetch the font from Google Fonts, but it is no longer there. http://fonts.googleapis.com/css?family=Cocktail+Shaker is not a valid URL.
Try downloading the font and store it on your server. That should do the trick :)

You declared the #font-face in css as 'sagar_menu' instead of 'Cocktail Shaker'. Edit your css to use that family like so:
.navbar {
font-family: sagar_menu;
}

Related

Can't change the appeareance of a certain link

on a certain website I would like to change the appearance of a certain link. The operator of said website did something to it so that it does not work the way it used to anymore.
(I'm moderately new to CSS, this much in advance.)
The link goes [website]/internal/main.php?action=menu&id=[some number]. So far I've been changing it with
a[href*="main.php?action=menu&id"] { font-size: 30px;}
but that does not work anymore. So basically 'select any link that cointains that string and change the fontsize to 30px'.
However it would be really helpful/convenient to be able to edit it. Any other links on the page can still be edited via the above CSS. After reading a little I thought adding "!important" would solve the problem, but it did not.
I was under the impression that no matter what the website 'does' that the user has full control over what the browser displays, as it should fetch the 'intended' thing from the server and THEN add custom CSS to it, effectively changing it.
To that end I've been using the Firefox AddOn "Stylus" to edit/change the appearance. Other similar programs also did not manage to change said links. (Stylish, StyleBot for Chrome). It is the same issue on both Chrome and Firefox. I have not tried any other browsers but i imagine it is the same there.
I'd be very thankful for any pointers in the right direction, explanations of where my understanding of the matter is wrong and/or solutions to this problem.
Thank you in advance
Most likely the original CSS definition for links on tha site is done for the different states a:link, a:hover, a:active and a:visited
So you should change your rule to
a:link[href*="main.php?action=menu&id"],
a:visited[href*="main.php?action=menu&id"] { font-size: 30px;}
And similar for the two other states

Missing random icons in Wordpress

I was working on my page, when random icons on my page went missing, while others are displaying fine.
The icons that are missing are both some of Wordpress standard, some of Font Awesome and some from different plugins. Same services got some showing as well, even on same pages as showing here:
Screenshot that shows some missing and some showing icons.
The link for my website
The issue came after i saved a edit on the index page, but the mistake are going on all pages from here.
What have i done wrong and what can i do for avoid the issue?
Thanks
Add this style in your active theme style.css
.fa {
font-family: 'FontAwesome' !important;
}
font-family is overwrite in your theme.
Try adding Font Awesome on you header this may solve that
I check the tag and it should an if statement for IE9

Google Fonts look like crap in Google Chrome

bit.ly/ZwCln9
I have like 3-4 Google Web Fonts going on here and it looks mint in IE/FF, but the fonts are choppy and gross in Chrome. I read you can download svg files or something onto the server? I'm using Wordpress and need step-by-step help with this because I suck.
Where do I get the files and where do I upload them to via ftp? Whats the code I use in CSS?
Thanks for all of your help :)
You don't need to use SVG if you don't want to. The fonts will never look the same across all browsers because each uses a different engine. However, you can always reset to make it look as close as possible. Here is a quick reset that you can add at the top of your css file that will solve this issue.
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal
}
Or you could just get a full CSS Reset, like the YUI reset, or Normalize.

How to choose which font is used when filling out a submit form?

Site:
oldfashionedgoods.com
I'm using SquareSpace to build a splash page for my site, and while I've been able to figure everything out, this last thing plaques me.
I'm trying to have it so when you type your email in to the submit field, it uses the font Cutive Mono, just like I'm using for the text above the box.
So far I have this:
input[type=text] {
color: #cc5723;
font-family: cutive mono;}
While I do not want it to be that amber color, I was messing with the color to make sure I was working with the correct item. The text changes color as I type, but the font will not change. What am I missing here?
I'm a complete newb so sorry if this is a dumb question! I already looked everywhere online, but nothing seems to work. Thanks!
I suspect it is being overridden by another CSS style. Try using:
input[type=text] {
color: #cc5723;
font-family: cutive mono !important;}
If that works then it is being overridden somewhere in your CSS.
NOTE:!important should only be used to test. It is not a solution.
I have tried a basic example here: http://jsfiddle.net/n4S3s/ which seems to work fine.
Your other styles have priority over this. Use
font-family: cutive mono !important;
to test.
Yep. important! works. I just wasn't sure of it, but here is the
DEMO
The other answers are correct; other styles in your CSS are overriding this one. I'm not sure I like using !important to force the style; I think of that as a last resort. But it's good for testing.
But more importantly, would you like to know how you could figure this out for yourself? Use the Developer Tools in Chrome (or any browser). Simply right-click the input element and select "Inspect Element". Then look at the Styles panel in the bottom right and you can see what styles are in effect for this element, and which CSS rules they came from. You can also temporarily toggle off any styles, edit the styles, etc.
Stack Overflow is a fast way to get questions answered, but the Developer Tools are much faster! :-)

How to change font in Wordpress header with zee style theme

I am stuck, i have created a website with WordPress with zee style theme. I also applied a plugin named "FONT" to edit style sheet and apply custom font. All worked fine, my font was uploaded to the http://fontsforweb.com service from where i used to change the header.
After update of WordPress and the zee style theme all my work just gone and I am not able to use that font any more. The http://fontsforweb.com tried to help me, they made couple of updates with no positive result. So i remove that plugin and I tried to do it my self by converting my font to woff format and used the code below but still not working. I am afraid I will have to redo whole website. Please help me to avoid that.
Update: I played with other themes and the problem is exactly the same. In my opinion it's the WordPress it self making this problem.
#logo h1 {
font-size: 2.5em;
color: #fff;
font-family: "jadem___";
src: url('jadem___.woff');
}
I think the proper way to do this would be to create a child theme and edit your stylesheet from there. This article explains it better than I can Tutorial
This will sort of future-proof your theme and prevent it from changing if you update.
Also changing fonts is something you can do quite easily without a plugin. Again someone else can explain this better than I can
THis may see like a dodgy answer, but I think if you check those links it will make sense. This is the correct way to handle this long term and it's easier than it looks. Hope this helps.
"Font" plugin is now using WOFF file formats so try again.

Resources