![]() ![]() Fonts Ninjaįonts Ninja’s browser extension is the most helpful if you want to acquire a particular font. Hover over it and another box will appear with all the font information you need. Once you have installed it and made sure it’s enabled, go to the text you want to identify, right-click to open the dialog box and you should see Fontanello at the bottom. Fontanelloįontanello is available for Firefox, Chrome, Edge, and iOS (Safari). It provides slightly less information but still gives you the basics of name, size, and line height. Click the x to close, and to turn WhatFont off again, click on the Exit WhatFont button just below your toolbar.Īlthough the original WhatFont is only for Chrome and Safari, another developer has very helpfully made a wrapper for it to run in Firefox. Click, and a box opens with more details. After installing it, you click on the WhatFont button in your toolbar to activate it, and you will see the font name appear next to your cursor when you hover over text. There are an ever-growing number of these, and different browsers have different extensions, but here are a few suggestions to get you started. You just install the extension and follow its instructions for use. These do what you’ve just done, but without you having to drill through the code yourself. However, if that seems like too much work, or you need answers fast, there are other ways. If you’re curious about how other designers/developers do stuff, noodling around in the inspector looking at the source code can be fun. After all, browser developers went to the trouble of making these tools for our benefit: it seems kinda rude not to. ![]() If you’re not used to using the code inspector in your browser, it’s worth playing around to see what it can do for you. Occasionally, the font name might be obscured with the font referred to by a class name or variable name, and these extra tools are handy for decoding that. Some browsers have additional tools for example, Firefox has a Fonts pane that will list all the fonts used on a page, and Chrome’s CSS overview will also give you a list of all the fonts on a page. ![]() A quick (google) search for ‘basis font’ will take you to Basis Grotesque by Colophon Foundry, which is the font we currently use. Scroll down through the rules section until you find font-family, and there you have it, the name of the font used for that particular piece of text, in this case, ‘basis’. What you see should look more or less like this: You can change its position or separate it if you want. Browsers vary a little, but generally, by default, the inspector will open docked to the browser window you are in. Select some lines of text on a web page, right-click and select inspect from the menu that pops up, and your browser’s code inspector will open. If you haven’t already, it’s time to make friends with the code inspector in your browser. However, even if you decide to use a browser extension or online tool (more on those later), it’s good to know how to do it this way because you are getting directly to the source - literally, you’re going to look at the source code. The Hard Way: Follow The Codeįirst up, this is the most protracted method to identify a font and is the closest to manual labor. But if the design uses a font, there are multiple ways to identify it. Of course, if the type is hand-lettering that hasn’t been converted into a font, then it’s unavailable, and you won’t be able to identify it. Or you could save yourself a lot of time and trouble by using one of the following methods to identify fonts from the web, and from print, easily and quickly. You could spend hours wading through hundreds of type foundries trying to find it, examining font after font until you gradually lose the will to live. But what is this font? Where can you get it from? How do you find out? It could be it’s perfect for something you’re already working on, or maybe it’s one to keep in your toolbox for later. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |