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.
Related
For the past two hours I've been trying to figure out a strange behavior when trying to override bootstrap in Django.
At the beginning, without any custom css file, the result was this:
Then I created a custom css file: my_site/css/master.css
.index-jumbotron {
background-color: #006DB0;
}
#main-title {
text-align: center;
color: white;
}
It resulted in this:
So far, so good.
But now, if I change anything on that same file (even when putting !important and taking good care of the specificity system), the result is always the same as the image immediately above.
However, when I indicate my template to point to another file my_site/css/master2.css or css/master.css, indeed the result is as I would have expected:
I can't get my head around this. Do you have any idea? Do you know if the package django-bootstrap3 could have anything to do with that? I installed it in between my two different version of the custom css file.
Looks like a browser caching issue - did you say 'disable cache' in the developer toolbar (network tab) of your browser? This is usually the easiest solution.
Another option is to open the styles file in your browser and hit 'ctrl+r' to force reload of the css file.
A project that I'm working on is making use of icon fonts. Is there some way of seeing what icons are included in the file? I can see what the icons are labeled in the generated css file (i.e. .icon-mail-alt:before { content: '\e808'; } ), but I would like to see the what the "images: look like. Is this possible?
If you are using a mac you can open it in fontbook and see all of the characters/symbols available.
On PC you can use charmap.exe, though it hasn't changed significantly in decades and is no longer really great. A quick search turned up BabelMap as an alternative which looks much more usable.
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;
}
I know the question itself is illegal - asking to steal someone's home. :)
Anyways, it's a situation when a developer's logic is not working actually. With Browser's Developer Tool, I got the site's CSS. I located the #font-face code inside the main.css.
Here's what I got:
main.css:
path: http://www.example.com/assets/css/main.css
code:
#font-face {
font-family: 'the_font';
src: url("../fonts/fontname/fontname.eot");
bla bla
font-style: normal;
font-weight: normal;
}
So, according to the code the font file is in a folder named "fontname" under the "fonts" folder. And from the path's direction we can guess that the font's location is:
http://www.example.com/assets/fonts/fontname/fontname.eot
But it's generating a 404 page.
Why NOT the path's logic is working?
Supposing the CSS file isn't bad (i.e. the font really is loaded). You may use the developper tools of your browser.
For example in Chrome : hit F12 to open the developer tools and then select the Network or Resources tab and reload the page. You'll see the font file listed.
I use multiple tools for extracting Css, depending on the website.
Specifically for fonts, this tool works amazing: FontfaceNinja - comes with 3 browser extensions to pick from.
But sometimes is not enough:
CssViewer is another option, nice design, easy to use, it extracts only the Css for the element hovered - almost the same as Chrome Developer Tools, But much more readable in my opinion. It's a Chrome extension only. Install it from here: CssViewer
The tool i use the most for this job is CSSSteal, it gives the same level of details as chrome developer tools, cascading of styles from parent to it's child - all that, but because you can easy copy and paste the Css, is much easier to use for this purpose then the default Developer Tools. Good tool for complex Css migrations.. when the fonts and other css properties override each other like crazy.. get it form here: CssSteal
Note: After installation of CssSteal, restart the browser - then make sure you open the Tab that contains the Styles (on the right) - not the Elements one - as you can see above.
Hope that helps :)
The best way so far
You can actaully do rightclick: inspect > Application (on the top tabs) > Frames (scroll on the left tabs) Then you can find a Font section where all loaded fonts are listed. It lists all that are loaded in any possible secure way.
Further more, It also previews them on the right, to make it even easier
Then you can right-click on the one you chose and click open in a new tab, and it downloads it. Then you can add a .woff at the end of the filename and use it anywhere. (you can check its extension on the bottom of the preview too)
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!