Custom font displaying differently in two different themes - css

So this one has had my scratching my head for over an hour now. I am designing a Wordpress theme for a client of mine. I originally decided to customize the Toolbox theme, which I did for a week or so. I spent so much time rewriting their theme, I figured it would be better if I just wrote it from scratch. So I did that. I copied over all of the font files that I had and started to work on my header. Now for some reason the spacing is messed up. Originally it looks like:
Which I think is pretty readable. I have the font-size set at 70px on that image. So I copied the SAME exact css properties over to my new file on my new theme. Then I copied the same exact code within my header. When I saved and refreshed my browser, the font was there, but the spaces between the words were really small, and the font was much larger.
Here is was it looked like when I was done:
Looking at it, I think the words are way too close together. It worked fine before and I can't find what would have caused the change. They both have the bootstrap css file attached and the same custom CSS file. I tried adding the original toolbox CSS file to see if it was something in there that caused the change but nothing.
I would really appreciate the help. I've never had this problem before. I'm using Chrome, but the same thing happens in Safari as well. The font I'm using is Bebas Neue from font squirrel
Thank you! If I left any information out, just ask :)

Related

New to HTML having issues altering font size with Big Cartel's Sidecar Theme

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

Firefox is not rendering CSS background (Firefox error/bug?)

After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.

Is css preventing list rendering?

Good evening. I'm trying to make a site with Django. Not being expert in CSS I took a template (minimaxing, from html5up.net). Everything works fine, as you can see (http://secret-reaches-8428.herokuapp.com/lesson/lezioneA00/) except that ordered and unordered list are not rendered as such. I can guess is something in the css, but I can't see where the problem is. There are the three .css files loaded in the header:
http://secret-reaches-8428.herokuapp.com/static/css/style.css
//same_domain/style-desktop.css
//same_domain/style.css
Question is: can anybody point out what part of the css is to be modified or, can anybody point out what the problem is?
Ok, I solved looking for standard css attributes and setting up properties as I wanted. Now I'm just curious to understand why the normal html behavior was overwritten, since there is no reference to in the css files.
You have to update your img sources. You have a problem with your img sources, not with your ul or ol rendering.
You try to reach an image here, but it does not exist. Try to fix the URL reference.

Why does #font-face only work in localhost?

I used #font-face on my new site, it works fine in localhost in both FF and Chrome. However, when I upload it to my server, I can't see the fonts in FF or Chrome. What could be some possible causes?
My website is http://leojiang.me
While debugging your site you may want to have an easier to read css script to help find some of the problems. Compression should only be done when everything works the way you intend it to.
for now you can copy/paste it on this site to see it more clearly:
http://www.digitalcoding.com/tools/css-beautifier.html
I was a bit suspicious of the #media print and the later one for #page. I am not sure if those are set up properly. I would suggest concentrating on the website first by commenting out the print specifics to help you troubleshoot the web rendering problem. You may want to set up a test html page with all the various elements you wish to use and make sure they are working properly before incorporating the 3d shapes. Just make an html file and remove those classes so you can see how everything renders as a basic web page.
As Ettiene said, there are several spots where the code is setting the font for different elements to Lucida Grande and Courier. These locations are where you should be referencing your desired font name, ColThin. How you name them is important as well, check the file that was downloaded from font squirrel (if you got the font there). The html demo file that is included has some css which shows how to use the #font-face fonts:
p.style1 {font: 18px/27px 'ColaborateThinRegular', Arial, sans-serif;}
You are missing the quotation marks, so the css may not be registering the new font name. As well, setting it on html and having those other font names in the code afterwards replaces the html setting. The only name that is important is how you designate the #font-face name. You could designate it 'smashed-font' and if you reference it as 'smashed-font' it will reference the files you have designated as 'smashed-font'. 'ColThin' should be fine.
From what I can see, you have copied the font files into their correct place, but how you want to use them is not quite right.
Good use of Paul Hayes 3d experiment, BTW. http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/
Bear in mind it may not work properly on several kinds of browsers, so have a fallback of some kind for people who are not fortunate enough to have webkit browsers, or include the alternatives such as -moz and -o and a version of the css which does not include -webkit, just in case these transformations make it into the css3 specifications.
If this is intimidating, consider it a learning experience. Polishing these mistakes through your own work will make your services that much more valuable to your potential clients.
Your font familly name may be wrong..
try this one
font-family: 'ColaborateThinRegular';
http://www.fontsquirrel.com/fontfacedemo/Colaborate
Look at the source code of the page.
Shad found the problem: "you have a rule body, button, input, select, textarea that is further down setting the font to sans serif".
Thanks!

Fix a CSS problem with a Wordpress theme and a syntax highlighting plugin

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.

Resources