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.
Related
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
I'm new to code and sort of stumbling around at this point - Please bear with me.
I found a query in this forum for someone trying to edit font type, and tried their fix, but it didn't help with my specific issue.
I didn't know that I should only do edits at the end until recently, so I've already done quite a bit in the stylesheet(hope that's what it's called). I've already edited the font sizes for my sidebar menus and titles, but I can't seem to find a way to fix the rest. The font that needs fixing is the body of all pages, FAQS, about section, product descriptions, etc.
I'd like to keep it responsive to all devices, but really on my phone it doesn't seem near as tiny as it does on a regular computer screen. I haven't tested it on a tablet, but I'm assuming it's tiny there, too.
Should I go back and change all my previous work to continue? I hate to do things incorrectly, but I've done so much work that I'd hate to undo.
Here's my mess. Silver Frame Soap Works
I am really sorry if you think i didn't got your point but as far as i got your problem. The solution is you should give the font family in the body element in your main style sheet and make it !important if it is not applied.
As
body{
font-family: arial !important;
}
it'll overwrite the other font-family already given. And if the font you are applying is not in the list of commonly available font families then import it by pasting link from google fonts in your css file. This will help you to import the font : https://developers.google.com/fonts/docs/getting_started
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;
}
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! :-)
I installed the latest version of Wordpress and added the WP-Syntax plugin (and also the Markdown Extra plugin, but I think it's unrelated to this issue).
It works perfectly with both themes that ship with Wordpress: looking good using WordPress Default 1.6 and looking equally good with the WordPress Classic 1.5 theme.
However it doesn't work with the excellent LightWord theme, which I would like to use. The code box looks strange with the right border at the end of the actual code:
My thoughts:
I have tried investigating this with Firebug without any success. The CSS from the WP-Syntax plugin should be the same in all three theme cases. So the fact that it looks wierd with this theme has to do with some inherited CSS property from the LightWord theme.
This in turn probably means that the WP-Syntax plugin should reset something more for its CSS to work correctly.
Help!
Advanced CSS isn't something I'm good at. But I would very much like to resolve this problem as soon as possible. I'm also curious from a technical view point what could be causing this behavior? I hope someone with good CSS skills will be able to help out!
We (you if you want to, me if you don't feel like it) could then file a bug report in the appropriate place, to get these components working together.
To resolve this I understand you need more than screenshots. I have a link with the problem theme, which could be used to investigate further.
Web site where the problem may be experienced (Taken down as the problem is solved)
Edit: In response to a comment I'm also including a link to the working web site using the classic theme and the same plugin setup: Link to a working theme with these plugins (Taken down as the problem is solved)
Thank you for reading!
Summary of problems I'd like to solve:
What's the best way to get rid of the right and bottom inner border in the code box? I first noticed the right border, but the bottom border is also an eye sore.
The code box right border isn't visible. It's due to .wp_syntax {width:100%;} and if I set it to 99% it's visible again. Do you consider this to be a problem with the theme or the plugin?
Making changes in the theme (style.css) or the plugin (wp-syntax.css) would be preferred if that's possible, so one of them could be standard. But which one? And how?
The problems you are having are due to the stylesheets of WP-Syntax and LightWord interfering with each other. I don't really think that the problems are with the theme or the plugin, they are just down to how the two interact with each other.
To make all of the required changes, ideally you would edit styles in both wp-syntax.css and style.css. You can however cheat a little.
In style.css add the following:
.wp_syntax { width:auto; }
.wp_syntax table { border:0 !important; }
.wp_syntax table td { border:0 !important; }
These changes should solve all of the problems, with the benefit of keeping all of the changes localised to a single file (style.css of the LightWood theme). The other tables in the example should all remain unchanged as well.