Change font-family of open website - css

Is it possible to change the current font-family of a web site to a different one programmatically?
For example, the Google's search box (HTML input element where you type your search query)..
I want to change it's default font-family, which i believed is Arial or Sans Serif, to Windings. (or any font that is not readable by a human's eye)
Guys, any ideas here? btw, the prefered browser is internet explorer.

I believe you want to do it in your own website not someone else's (like google).
In you CSS you can do it like
*{
font-family: Calibri;
}
The * will set font for all your website.
If you want to do it in someone else's website I don't think its possible.

Related

How to change font with CSS

Im working on my website and am trying to replicate a font I was using in Photoshop. The Font name is Trebuchet MS. Im using Dreamweaver CS5.5. I dont think there is a way to use HTML for this, but im pretty sure there is in CSS.
Thanks!
You can use
font-family: Trebuchet MS, ...;
in CSS. This will work only for users who have Trebuchet MS installed, which means pretty much all users with Windows and mostly not others. Others will see the text in some of the fonts you put in place of “...”, or in the browser’s default font.
If you want a cross-browser solution, you need to find a free font (or a font that is licensable for use as a web font) that suits your needs and use it as a web font via #font-face (there are loads of tutorials on this, some of them good).

Squished Text On Website

I am using a google web font on a site and am getting some users reporting very squished unreadable text throughout the entire site. I am unable to see this any browser or computer I use, so I am not sure what could be causing this.
Here is a screenshot of the issue:
Any suggestions to fix this would be great. Thanks!
Here is the url to site: http://odditymall.com
i would guess your website is not responsive and u have done some html/css changes to your website so its causing it like that. y dont u try accessing the source through chrome element inspector and then play with the code maybe u'll find ur answer there. else send the site link so we could check it up, if thats possible though..
If anyone is having the same issue... From google fonts, I was getting the 'Droid Serif' font, but in my css I was using:
font-family: 'Droid', arial, verdana;
So, since droid did not exist anywhere, the text on the site would look like the screenshot above for a very small amount of people (for whatever reason). To fix it for those people, I just had to change it to:
font-family: 'Droid Serif', arial, verdana;

font-family (CSS)

I'm working on a website for a client, and I would like to customize the font a little.
On this website:
http://unos.com/
There are several topics in the navigation menu, like: menu, locations, nutrition, email club, etc.
That is the font I want.
All I could find when inspecting page source was:
font-family: Verdana, Arial, Helvetica, sans-serif;
But this does not give the desired effect.
How can I get the font as is on the website above?
Also: I did try font-family:cursive, but this does not give me the desired result either.
I'm also trying to avoid using CSS3 in case of older browsers. If it is the only way, though, then I can use the font-face easily enough.
What you see in that navigation menu is not a font, but an image. If you don't want to use straight-up images, Google "font replacement" and you will find material that discusses how to replace "plain" text in your webpage with something more elaborate (for example, see this).

how can i overcome css font cont-family tag,

i am converting psd to html and font used in psd is moolboran, my tag font-family: MoolBoran;, which is not supported by browsers, how can i overcome this problem? is there any possible solution to as alternative?
Your options are to either save an image with your non-standard font, or use the CSS property font-face, and allow the site visitors to download the font file. For more details of this approach, see CSS 3: Custom Fonts Using #font-face.
Web safe fonts have been a bane to designers for a while, but you can check out Google Web Fonts to see if there's a font that's close (it doesn't look like they support MoolBoran unfortunately)
The only solutions are to
A) use an image rather than live text (which is generally a poor method)
B) See if a web font version of "MoolBoran" is available somewhere. And use the #font-family selector. I looked but can't find anything for it.
C) Change your design.
There is nothing wrong with that tag, it's certainly supported by all browsers.
The font does of course have to be installed on the visitors computer, which is probably where you have your problem.
If you want that exact font, you can make an image out of the text. That is the only sure way to get exactly the look that you want across all browsers.
You should supply fallback fonts in your tag, for example:
font-family: MoolBoran, Geneva, Arial, sans-serif;

CSS font linking

I was wandering how can I link font-family in css to a font in your folder. Like PHP you can use your font in your folder.
Example Code:
CSS:
font-family: verdana;
This is what I mean:
font-family: foldername/font
Is there a code for that? or I have to use PHP to browse my own font?
#font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
Just found this one on "A List Apart", haven't checked myself but this webbie is one of the most respectful resources for designers online so i guess your best shot is to give it a try.
It is not possible do like:
font-family: foldername/font
Fonts are read by the browser from the client machine from a specific location, you can not change it that way.
Jordan,
This should help you:
Using #font-face
You are misunderstanding this. PHP can use server-side fonts to generate an image. The font itself is never shown to the client, just the rendered results.
To be able to use a non-standard font in the user's browser, you will have to package the font along with the site.
There are various techniques to do this, all with various degrees of browser support. Here's a good article on the various available techniques, their upsides and downsides. Also check out the duplicate link.
Note that only because you paid for a font, this does not mean necessarily that you are allowed to re-distribute it embedded in a web site! Always check your font license.

Resources