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.
Related
I know this is an extremely basic and stupid question, but I seem to be having a genuinely curious problem.
When using what are supposed to be web-safe fonts like Didot, and using
header h1{
font-family: Didot, serif;
font-size: 36px;
}
my browser just displays the standard serif font.
In fact I can't seem to get it to display any web safe font, it will only display either the standard serif or sans-serif font. I know my selector is correct because I CAN change between serif and sans-serif, but I know its not displaying other web-safe fonts because I tried both Arial and Helvetica (which are both definitely web safe) and when I refreshed from one to another there was absolutely no difference in the font displayed.
I'm a complete beginner and I'm using the simplest possible beginner environment, just an html page linking to a css file which I'm opening with my browser (the url shows up as file:///C:/Users/Agent%201/Desktop/Web%20Projects/ResumeSite/index.html if that is at all relevant). I've tried opening it with both chrome and edge, same results on both
Is there something wrong with my css? Or are there limitations when just opening a local html file with my browser?
Sorry if I'm this is a really dumb question, but I really can't find an answer as to why my fonts aren't working, I've tried !important and some other weird solution I found which involves changing the selector to "header h1, header h1 *" and that did nothing.
Thank-you for any help you can provide me!
When using what are supposed to be web-safe fonts like Didot, and using...
Didot is not a "web-safe" font.
Didot is included with macOS, which may lead some web-designers to assume that it's also available on other platforms (like Windows, Linux and Android) or that those platforms have automatically-mapped equivalents (like how many browsers will map Helvetica to Arial), however that is not guaranteed.
Also, just because a typeface is included with an OS does not mean it is licensed to you to use commercially or in a website - you can be sued for publishing an OS-licensed font onto the public web without having your own font-license.
A "web-safe" font is a typeface that is broadly installed and supported by most contemporary browsers without the need for additional downloads or font installations.
Many typefaces are broadly installed, such as Microsoft's Core fonts for the web which are preinstalled on all Windows computers - and many other operating systems such as macOS either come with the same fonts or have very similar equivalents (e.g. Helvetica instead of Arial) which are automatically mapped by the browser.
The only way to determine if a font is "web-safe" is by doing your own leg-work and manually checking to see if all-or-most of your target users' devices have that typeface available. You can check font availability on Wikipedia and other sites:
macOS: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
Windows: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
iOS: http://iosfonts.com/
Android: Consult Android's fonts.xml for the minimum set of stock fonts and default fallback mappings (e.g. "Helvetica" goes to "sans-serif").
You might notice that Android's font list is very... short. That's because the base Android OS isn't what ships on most peoples' phones: Google's layer on top of Android, and OEMs (like Samsung, etc) will add their own fonts on top, but I don't know where to get that list from at-present, sorry.
A "web-safe font stack" means that at least one of the fonts listed in a font-family property value can be safely assumed to be available for use, not that all of them are - nor that the first-preferred-font will be available.
And any font-family list can be made "safe" by adding a CSS fallback generic-family name to the end (i.e. specifying the least-preferred font). Those names are specified in the CSS Fonts Module and are:
serif
sans-serif
cursive
fantasy
monospace
In your case, the property font: Didot, serif is "web-safe" because it has the serif generic-family name at the end. Your visitors will only see the Didot font being used if they already have it installed on their computer, phone, tablet, etc.
If you do want to use Didot, then you need to publish it as a WOFF file and add it to your stylesheet with a #font-face rule: https://css-tricks.com/snippets/css/using-font-face/
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 want to have a consistent fonts display when user browse my web pages, I'm trying to use font squirrel to convert my fonts into multiple formats but it gives me error somehow...Stated that it is a licensed font.
But I've purchased the font previously, so how do I provide the license for my font in order to let me do the conversion?
depending on where you bought the font you might not have a license to use it on the web.
font web embedding usually requires a special license. (here's an example with different licensing options for Helvetica Neue).
If you want to use custom font on your page I would suggest having a font file with you page (in the same folder/directory). For example:
/folder
page.html
font.ttf
Then using css #font-face feature:
#font-face
{
font-family: font;
src: url(font.ttf);
}
and afterward apply it to any html element
body {
font-family: font;
}
Just trying to extend on Liviu's answer. Helvatica is not a web font. It comes with Mac OS X. So, unless the user has it installed, it won't show. If you are asking if you can embed it or not, the answer is yes, you can embed it. But that is NOT allowed.
If you must use it, go ahead define it as a font family, but also define a fall-back family. Just in case a user doesn't own a mac, they will see the other family font.
Lastly, if you wish to use a web font, maybe you could have a look at Google Web Fonts: https://www.google.com/fonts/ it has many options and it's fairly easy to use. You might even find a font that looks similar to Helvatica or any other fonts you have in mind.
Good Luck!
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.
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.