60 Fonts
Charise Scrivner
To identify a font from an image, use a font finder or font identifier. These tools are great for finding the name of a font or similar alternatives. All you need to do is upload an image of the text by having it readily available on your device or taking a photo.
Yes, WhatTheFont is a simple and easy font finder that can help you identify fonts. Just upload an image of the font you need identified, and the tool will do the job for you. WhatTheFont works by searching through its database and comparing its fonts to the one in your image. The app will list all font matches and give you a preview of how each looks like as text. Enter your own text and play with font size for the full experience. WhatTheFont is available for both iOS and Android devices.
Tip: The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with a comma. Read more about fallback fonts in the next chapter.
Variable fonts offer continuous ranges of styles, often without additionallatency. This is relevant to responsive design.This dynamic typography uses continuous ranges of styles, offering all theweights between 100 and 900 on a page, and responsively varying the weightbased on some conditions.
Without style specifications, the API provides the default style of therequested family. To request other individual styles, such as specific weights,append a colon (:) after the name of the font family, followed by a list of axisproperty keywords in alphabetical order, an at sign (@), and one or more listsof values for those axis properties.
With static fonts, styles of weight are usually specified as multiples of 100(e.g. 300, 400, 700). Variable fonts offer both the standard weights andintermediate weights. To render an intermediate weight:
Be precise about the styles you are using. The API delivers the requested stylesin the most compact set of fonts. Requesting unused styles may cause your usersto download more font data than they need, causing more latency. If you use only3 specific weights, specify them in your request as individual styles. If youuse a continuous range of weights, specify that weight range in your request.
In these cases, you should consider specifying a text= value in your fontrequest URL. This allows Google Fonts to return a font file that's optimized foryour request. In some cases, this can reduce the size of the font file by up to90%.
Please note that the 'text=' parameter can only be specified once. It applies to all families in the request. Please use separate API requests if you need different text optimizations across multiple families.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
All patched fonts have Powerline symbols, extra powerline symbols and many icons to choose from. Build your own status line, add icons to filetypes, make visual grepping easier. You are only limited by your imagination.
Use the provided FontForge Python Script to patch your own font or to generate over ?? million unique combinations/variations (more details).
You can even specify a custom symbol font with the --custom option to include even more glyphs.
In the last few weeks, because of a combination of various things at work, and in side-projects, I've been learning a lot about web fonts and also a lot more about Google Fonts specifically. Through that I've come up with a more nuanced answer to the question, that in the past I thought was easy: should you self-host Google Fonts?
Now, to be totally up front, I'll admit that fonts are not my strong point. I'm much more practical than design-y (look at this website for evidence of that!) and have never totally got the need for fonts. Sure they look a bit nicer, and can understand they make a message seem more on-brand, but for the main body of text at least they seem more of a nice to have - I've never read an article more or less (or treated the contents any differently) because it had a pretty font. However, I've also been acutely aware of the performance implications of them so maybe that's clouded my view of them.
Still, many feel differently, and fonts are here, whether I appreciate them or not, and many developers aren't given a choice whether to use them or not. So let's look at what we can do to minimise the performance impact, but also give the designers what they want - win win!
A few years back it was all the rage to use a CDN to serve common assets (e.g. jQuery from - and yes jQuery is still very much a thing!). To be clear when I say CDN here, I mean where you are loading some assets from someone else's domain, rather than a CDN fronting your domain.
The theory behind this was that browsers limited the number of connections to each domain (typically to 6 connections) so using another domain gave you 6 more connections. While that may have been true in the past (particularly when browsers limited it to less than 6 domains) and before HTTPS became the norm, now connections are expensive to create. Additionally HTTP/2 actually benefits from one connection (mostly!) so using other domains is often a performance cost rather than gain.
Another way of doing this was by sharding your domain with one or more assets subdomain (e.g. assets.example.com) so again the fonts are not hosted on your main domain where your web page is loaded from. However, it has the same connection issues so again this is not the performance benefits it may once have had.
The other supposed benefit of using a public CDN, was from leveraging the fact that visitors might already have that version of jQuery loaded in their HTTP cache, but again I'm convinced that's over-egged. There are so many libraries and versions, and browser caches are smaller than you think, so for you to be lucky enough to gain from this seems unlikely. Additionally Safari has a unique HTTP cache per domain visited, for privacy reasons (called a double-keyed cache) and Chrome soon will have too, ending any argument there.
That leads nicely into the privacy implications of using third-party CDNs. You have no idea what sort of tracking they are doing to your users by using them, rather than self-hosting. And recent legislation means a lot of sites have to explicitly list all the cookies used on the site, which gets more complicated when using a third-party.
I've been convinced for a while now that third-party CDNs, or even sharding your own domains, are not the performance boast they are thought to be. All too often you see the main domain serving the index.html, and then that connection not being used for anything else as time is instead wasted setting up new connections.
This is not to mention the security implications of loading assets from another domain. Yes there is SRI but that can cause unexpected issues, and I honestly don't see the point. If it is a static asset (where you can use SRI) then self-host, and if it is not static (because the contents are liable to change) then you can't use SRI.
On a related point, using a third-party, also introduces the risk of them becoming a single point of failure (SPOF) and taking down your website if it goes offline for any reason. This has been recognised for a long time and while it may seem unlikely that Google Fonts will go down, it can be blocked by company proxies or whole countries.
All in all, more and more have been advising to self-host your static assets, ideally on the domain you serve the web pages from. Fonts are static assets, so they should also be self-hosted right? Well it turns out it is not quite as simple as that because fonts have their own peculiarities and performance optimisations that might make self-hosting a little trickier...
Google Fonts is an amazing resource for those of you that are into your fonts. It has 977 open-source fonts for anyone to use completely for free. Commercial fonts are ridiculously expensive for those of you that have ever looked into them and they are also usually licenced rather than bought, and are charged based on expected number of page views - like they will run out through use! To have so many free fonts in one collection and so easy to use is therefore very useful.
Google Fonts, however, takes it one step further. Like many providers of website assets (see jQuery example above), they also provide a CDN and host the fonts for you to use directly from them. This means you can start using fonts just by adding one line of code to your website to pull in the style sheet, like this:
The downside to this is in performance (the upside is also in performance but that side is not as obvious - we'll get to that). The problem is that your website (say www.example.com) loads the stylesheet from fonts.googleapis.com, which returns some CSS made up of font-face declarations. Using the first example above, returns this then I view that URL in Chrome:
However this means you have to connect to fonts.googleapis.com, download the CSS, then connect to fonts.gstatic.com to download the actual fonts (why Google can't host both the CSS and the fonts on the one domain I really don't know!).
Fonts are often discovered late by the browser when loading a page (as you need to download the CSS to see the font references) but Google Fonts are discovered extra late, as you need to download the CSS from another domain, then the fonts from a 3rd domain and, as discussed above, making an HTTPS connection takes time. This can be seen in the following waterfall diagram generated by WebPageTest (note all tests were run with Chrome - 3GSlow):
4a15465005