HI everyone i am new to this css i am developing a website for that site i am using kannada fonts but i wnat to embed the fonts in css how to embed that can any one please give sugessions and solutions .. thanks in advance
This is a great guide to cross-browser #font-face
I don't think you can embed them, but you should be able to use the #font-face to pull down your fonts. But it does not work in all browsers so beware.
Related
I have a blog. Now I want to use a font icon for Menu bar for good quality.
But I can't upload it to blogger as there's no option. So is there any way to use it without uploading it to blogger?
you can use a CDN and link it in your project like this
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
As answered you can use fontawesome cdn or if you want to further optimize, you can choose specific icons and load a css file.
you can use http://fontello.com/ or https://icomoon.io which are awesome tools for this.
hope this helps :)
I am using font-face, and the fonts AntennaCond and Roboto. these two fonts are working in Safari and chrome, but they are crashing in Firefox.
Here is my website: http://www.ux-pm.com
Any idea why this is happening?
You need to check path of fonts in css file also you need different types (.ttf, .woff, .eot, .svg) of fonts to render across browsers.
1) websites like http://www.font2web.com/ or http://www.fontsquirrel.com/tools/webfont-generator where you can upload font and it will give you ready made folder structure with css and custom fonts applied.
2) Reference similar question.
Hope this helps.
I have added a custom font to my wordpress based website.
the theme has the font files within it.
so far in testing the new font works in chrome, IE and safari but not in firefox.
Ive tried playing about with my css files but no luck
any ideas why?
i think the problem is that Internet Explorer accepts only EOT fonts, while Firefox supports only OTF and TTF fonts, and so on.
plz try to insert all this king of font extentions
i hope this help you.
Here it is a useful tool for having every extension for your fonts: font2web.com
i want to add pretty fonts to my Bootstrap site. i'm a programmer, not a designer.
I googled around and ended up at Google Webfonts website. Google's own font browser does not work (all the fonts default to a serif or something) for any of my browsers (OSX Chrome, OSX Safari, Win7 Chrome, Win7 IE9), all the fonts show up the same.
why doesn't google's webfont broswer work for me? http://www.google.com/webfonts
how can i trust them to work for everyone else
what is the bulletproof way to use custom
fonts?
to i have to buy them and host them myself? is this a bad idea?
Web fonts are fonts that have been licensed specifically for web-use. Besides Google Webfonts, there are other font sites that offer free (and legal) fonts for use on the web like Font Squirrel (free), and Typekit (mostly a paid service). Font Squirrel has a lot of fonts with #face kits that can help end the "browser blues", and make it easy to host the fonts on your own server (my preference).
There's a good article on A List Apart that will help you a bunch - have a read
BTW - it's a violation of your font license to take a font from your computer and run it through a true-type converter (for use on the web)...unless you've purchased/established licensing for web-use via the font provider/manufacturer/creator, etc.
But i used them a couple of times so thought of sharing with you guys. I am just answering for How to use them?
For ex:
When you use a particular web font Archivo then you need to include its style sheet as follows
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
In other way you need to install the fonts API so that you dont need to make a online request every single time.
They should be supported by most of the modern browsers.
Can't guess the reason for the first question.
Google web-fonts will work with every browser and I'm sure it is working. There are some issues.
** Fonts will be not smooth or fonts will be jugged in some browsers such as IE. Also fonts are not clear some times (Some fonts). You have to use CSS shadows ..etc to fix this.
You can use your own web-fonts. Download font and convert it to .ttf, .svg, .eot and .woff and call them in CSS with #font-face
You don't have to buy them if you are using like above example. But you will have to buy the font if it is commercial.
** You can use cufon.js too.
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;