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.
Related
I am using Google Font Poppins on my page.
I tried to format numbers using
font-variant-numeric: tabular-nums;
But it does not affect numbers appearance at all. Does any Google Font support font-variant-numeric?
I had to fallback to some web safe font for numbers, but it does not look good.
TL;DR: not all fonts support tabular-nums.
This page here does a good job explaining that only 'Open Type' fonts can interact with the font-variant-* properties. https://practice.typekit.com/lesson/caring-about-opentype-features/
This article indicates that Google Fonts does not support this yet, but is looking at supporting open font properties: https://css-tricks.com/almanac/properties/f/font-variant-numeric/ (last updated May 9th, but the article is from 2017)
It seems that the core of the problem is that the font designers have not yet accounted for this use, so browsers can't leverage it.
According to this GitHub issue, Google Fonts only provides a subset of OpenType features to improve latency. The only solution for now is self hosting or using another font CDN.
I am getting a
CSS3120: No fonts available for #font-face rule
for the new Microsoft Edge browser on windows 10.
The fonts I am using are from fonts.com and have the normal declarations that I would expect (e.g. woff, ttf, svg etc).
{
font-family:"myfont";
src:url("/dv2/2/asdf.eot?asdf#iefix");
src:url("/dv2/2/asdf.eot?asdf#iefix") format("eot"),url("/dv2/14/asdf.woff2?asdf") format("woff2"),url("/dv2/3/asdf.woff?asdf") format("woff"),url("/dv2/1/asdf.ttf?asdf") format("truetype"),url("/dv2/11/asdf.svg?asdf") format("svg");
}
The sites still work normally on chrome, firefox, and IE for windows 10. my fonts that I used from Icomoon that are on my domain and fonts from google fonts seem to work fine on the edge browser. Anybody else having this problem with fonts.com?
I was using a local version of Google Fonts like one of the commenters, #benoror. My issue ended up being that I used references to woff2 fonts. Edge doesn't support the woff2 format yet.
My solution was to switch back to loading the fonts from Google Fonts since they have logic based on the user-agent that determines which font files get referenced in the #font-face declarations.
Another option would have been to use regular woff instead of woff2: http://caniuse.com/#search=woff
I contacted fonts.com and the solution they gave - which did seem to work for me - was to republish the project. If you go into manage webfonts and to the project, there is a republish button. It will probably take a couple minutes and then it should work.
I had the same issue,
After reading MSDN documentation and adding local parameter error disappeared.
src:url(sURL) format(fontFormat) local(fontName)
I have been searching for hours, asked friends and it didn't work out. So I hope you guys can help me. My website uses a custom font, but IE(10) doesn't support that on the way I do it. I have no idea it supports other methods. Here is mine:
#font-face { font-family: shardee; src:url('fonts/Shardee.ttf'); }
It is not necessary to have a custom font in Internet Explorer, but it would be nice.
When Internet Explorer doesn't know the font, it used its default font. But the problem is, that the font-size of the custom font is perfect, but of the Internet Explorer default font it is way too big. I tried to fix it with a IE specific css code, but it just doesn't work at all. I am using the following css code for Interner Explorer:
<!--[if IE]>
<style>
#menu ul li{ font-size:15px; }
</style>
<![endif]-->
I have also tried it by a external stylesheet, which looked like this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ?>/style/ie.css" />
<![endif]-->
The function I use in the php is a wordpress function that takes you to the path of your website. If you are not using wordpress, you can forget that code and leave it blank.
The problem is not the path, the path is correct. I have looked into the source code in the browser, and it showed me the code I have in ie.css. The code in ie.css is exactly the same as above, but without the tags ect.
I hope you guys can help me with this problem. 2 solutions are possible as far as I know. Let the ie specific css work, or show me a way to create custom fonts in IE. I am using Internet Explorer version 10.
You can see the site here, but once it is fixed it will disappear because I don't need to put it on a subdomain once it is fixed.
Kind regards,
Bart Roelofs
Multiple font formats
To support a wide range of browsers, use a .ttf, .woff and .eot version of the font.
#font-face {
font-family: 'shardee';
src: url('fonts/Shardee.eot');
src: url('fonts/Shardee.eot?#iefix')
format('embedded-opentype'),
url('fonts/Shardee.woff') format('woff'),
url('fonts/Shardee.ttf') format('truetype');
}
You can use a Font conversion website like Font Squirrel, to convert the .ttf font into .woff and .eot.
DRM false positive
As #Jukka pointed out, there's a legal issue with the TTF file that's preventing it from being usable in Windows. In the IE developer console, the following error message is displayed :
CSS3114: #font-face failed OpenType embedding permission check.
Permission must be Installable.
Shardee appears to be an abandoned font with an unknown license type. Although it may be legal to use this font, Windows seems to require that every TTF file has DRM info that explicitly says it's legal to embed it in web pages. The error in IE is most likely a false positive.
To test this, I took a TTF font that's known to be legally licensed for use on websites. The TTF version didn't work in IE because of the DRM error. This example is definitely a false positive. This is one of the reasons why it's necessary to use multiple font formats, and why a single format like TTF will not work on all browsers.
Although Windows doesn't allow IE to use the TTF file, IE can still use the WOFF or EOT version. When I tested the above #font-face rule on a local webserver, using all three font formats, the Shardee font rendered correctly in all versions of IE (though with an error message in the IE developer console).
Steps to try:
Convert the .ttf file to .woff and .eot
Upload the .woff and .eot files to the same directory as the existing .ttf file.
Replace the #font-face rule with the one above. I fixed a couple typos in the initial version of it.
If you still have a problem, there may be an issue with the web server settings. Related question: IE9 blocks download of cross-origin web font
IE11:
If you are receiving the CSS3114 error code in dev tools, you need to modify the first bits of the font file. This will allow IE to install the font.
Npm Module:
You can use ttembed-js npm module, which will make the modifications for you.
https://www.npmjs.com/package/ttembed-js
Usage: ttembed-js path/to/Shardee.ttf
By searching the web, I found this online tool that performs a fix on the TTF font, making it displayable by Explorer:
https://www.andrebacklund.com/fontfixer.html
So the problem is apparently that on IE 10, the menu, inside the element with id=menu, does not appear in the declared font “shardee” but in the browser default font. This actually makes the menu readable. But technically, the explanation can be seen in Developer Tools (press F12 to enter them), in the Console pane. The error message, with code CSS3114, tells that #font-face did not pass the checks for usage rights for embedding.
Check out the usage rights of the font, and contact the copyright holder (which is to be presumed to be Bright Ideas) for obtaining the rights if possible.
FontPrep is an excellent Web Font Generator for the Mac OS X. it will even create a fonts.css
I ran into this same issue and ran F12. It seems compatibility view was enabled in IE10 for the site I was on. Once I disabled compatibility view the custom font displayed. Hope this helps someone...
I have generated a font named ( Futura Std Light ) in this website (www.font2web.com) but the font doesn't work in ie.
I was generating my fonts in (www.fontsquirrel.com) and they work better in ie but the problem here is that this font is in the blacklist.
Any ideas, please ?
It is not meant to work in browsers; it has been blacklisted for a reason: using the font as a web font is a copyright infringement.
Consider using a suitable free font instead, or some other font that you may legally use.
Our web designer suggested using Cambria as a font. In looking at various font references online, we couldn't find authoritative sources that listed recent (post 2010) browser support for various fonts.
Which sources do you use to determine how supported a particular font is? I'm guessing there are reports for fonts like there are for browsers, but we haven't found anything reliable yet.
I think you don't need to worry too much about native browser support for fonts. Instead you should consider two things:
Using #font-face
Using a good font stack
Combine the two and you should be safe, no matter what.
For #font-face, you can generate the font and make it cross-browser compatible.
Start by licensing the font from here ( http://new.myfonts.com/search/cambria/ ) or somewhere else.
Then generate the #font-face code with Font Squirrel ( http://www.fontsquirrel.com/fontface/generator ) or another service. The result will be cross browser compatible in nearly all cases.
Finally, add the font to a font stack so that there is a fall back in case something happens with your custom Cambria font. Something like this for whichever rule you are working with: font-family: Cambria, Georgia, Palatino, Times New Roman, serif;
Of course, you could also choose a similar free font through Font Squirrel or use Google's Web Fonts.
More good info here: http://sixrevisions.com/css/font-face-guide/
You won't find Cambria and the other fonts in its family natively installed on computers running anything but Windows Vista and newer, and you'll only have luck on other systems if they have Office 2007/2008 and newer installed.
As long as the font is present on a user's computer, any browser should be able to handle it, even without the need for #font-face embedding. The idea of font embedding is to get a browser to recognize and use a font that isn't installed on a user's system, rather than getting the browser to understand and render the font.
You're not going to find something that works on everything. Try Cambria, Georgia, serif; Georgia's a reasonably close substitute that's very widespread, and the serif default will work anywhere.
Discussion here: http://en.wikipedia.org/wiki/Cambria_%28typeface%29
The browser doesn't have much to say as to the fonts it supports; they are dictated by the fonts present in the underlying OS.
It's hard to find support references for particular fonts. However, #font-face is widely supported and regardless, a good font stack with fail-safe fonts is a must-have.