Searching for a font by image - the best free online services. The best ways to identify a font from a picture online - detailed instructions and services

We talked about Internet resources that can turn the recognition process, if not into something entertaining, then at least into an ordinary but promising procedure.

And although the best is the enemy of the good, today we will go even further. After all, who needs entire websites when there are browser extensions?

Fontface Ninja

The craze for Asian, and in particular Japanese, culture that swept the Western world in the previous century could hardly fail to be reflected in the IT sphere.

Using the example of individual web products, we see this in minimalism bordering on rigor, in a shift in emphasis from the result to the process and, of course, in sympathy for external attributes. And a particular attraction for developers, apparently, is the warlike and mysterious symbolism of the samurai and their unspoken antagonists - the ninja.

The Fontface Ninja font identification extension for Safari and Chrome fits the idea of ​​a secretive and effective mercenary. Working with it is structured like this: by clicking on the extension button, hover the cursor over the font of interest - a tooltip will contain information about its name, line spacing, and size. If you're lucky, you can download the font right away.
The Mask function may be very interesting: it allows you to hide the graphic content of the page, leaving only text blocks.

Type Sample

One more thing useful extension, but only for Chrome users. The rest can join in the beauty the old fashioned way - using the services of bookmarks.

Operating principle in in this case similar; Perhaps the implemented opportunity to “play with fonts” in real time deserves special attention. A tooltip with information about the typeface is a thing of the past, when by clicking on a selected text block you can change the font size, look at the pangram (in English), enter your own example of text and take other liberties.

Extension for Chrome, Firefox, and Yandex Browser. Such omnivorousness is compensated by extremely simple functionality: I pressed the button, turning on the font detection mode, pointed to the desired one and learned something new.

It is worth noting: WhatFont allows you to determine not only the title, but also when you click on the text line spacing, style, size, family to which the font belongs, as well as its current color code.
In addition, you can see how the font looks like in the English alphabet as a whole and download it - if Google itself had a hand in its development.

How to explain the reverence that developers feel for Chrome users is unknown, but the fact remains: there are slightly more extensions for font recognition supported by this browser.

Typ.io - ideal option for maximalists who do not accept unnecessary body movements. After installing the extension, a button with the letter “T” will appear in the lower corner of the browser, clicking on which displays the names of all fonts identified on the page in a separate column. To find out where which font was used, just click on its name.

It happens that you like everything about a website: the layout, the structure, the fonts used. If you can figure out the layout and structure quickly enough, then the question of how to recognize the font on a website may at first make you think seriously. Millions of sets have been invented; it is impossible to determine one specific one without special tools.

Page source code

The easiest way is to examine the page code. You don't need deep knowledge of HTML and CSS to complete this task, you just need to find the properties " font-family" Let's look at Google example Chrome:

Open a page that uses the font you like. Right click on the text. Select " View code».

A console with developer tools will appear on the right. Find the item “ font family».

On some sites, the name of the font immediately catches your eye, on other pages you need to scroll through the code a little. In any case, the answer to the question of how to recognize the font on a website has been found.

By the way, in other browsers the operation is performed similarly. For example, in Mozilla Firefox You need to right-click on the text and select “Examine Element”.

The searched data will be displayed in the window on the right, the property is also called “ font family».

Services and extensions

If you don't want to use developer tools and look for the name in the page code, use services or extensions to detect the font.

Visit fount.artequalswork.com. There is big button“Fount”, which you need to grab and drag to the bookmarks bar.

Important! To show the bookmarks bar in Chrome, press the shortcut Ctrl+Shift+B.

Open the page with the font you like. Click on Fount on the bookmarks bar. The cursor will turn into a cross. Point it at the font and left-click. The result will appear in the upper right corner.

Fount also works without problems in Mozilla Firefox, Opera and other browsers. If you don't like this service or don't want to use the bookmarks bar, then use one of the extensions to detect the font.

Fontface Ninja for Safari and Chrome.

Type Sample for Chrome.

WhatFont for Chrome, Firefox, Yandex Browser.

Typ.io for Chrome.

All of the listed extensions work according to the same algorithm: you need to click on the add-on icon and then hover over the font. The information will appear in a pop-up window.

Now I will teach you bad things.

Let's say there is a picture

and you need to find the font in which the inscription is made, or choose one that is similar in style and character.

Search by images

We go to search engines and try to find the source of the image using image search.

https://www.google.ru/imghp?hl=ru

We upload the original image through the form or drop it onto the search page by dragging and dropping.

Sometimes Yandex works better than Google.

https://yandex.ru/images/

Benefit from search engines next.

If we find the source of, for example, a logo, we can find the author and, possibly, his portfolio, and in it an indication of the fonts used. Or simply on the page somewhere next to the image the name of the font will be written.

Who knows, this is the case. The chances are small, but not so small as to ignore them. Especially in a hopeless situation.

“What kind of font” on MyFonts.som

We go to Mayfonts to the section where a specially trained robot works.

http://www.myfonts.com/WhatTheFont/

We give the robot a picture, and he gives us the fonts. Well, or nothing.

But don’t rush to send him a picture without checking and finalizing it. Please note that:
– The robot does not understand the Cyrillic alphabet. Before uploading, remove from the image all characters that are not in the Latin alphabet. Cyrillic characters, coinciding with Latin ones can be left.
– The robot has poor eyesight. Sometimes he confuses letters with unusual shapes. Therefore, sometimes it is better to feed him one letter at a time. It’s worth finding the most characteristic one and starting with it.

After downloading, correct the recognized characters by entering the correct characters in the cells under the pictures.

If a letter or mark (for example, an exclamation mark) has split into two cells, drag one picture onto the other and put the letter back together.

Click Continue.

The robot will try to find the original font and suggest suitable tags for further independent search.

Search by keywords on MyFonts.som

In the search field, enter a word or phrase in English that defines the drawing tool, the nature of the font or its classification.

Our image is made as if with a felt-tip pen. Words like “calligraphic”, “handwritten”, etc. are also suitable here. Here you can use the tags suggested by the robot.

You can search for terms individually or combine them and combine them in one query.

If you definitely need support for Russian or another language, then specify the appropriate settings in the advanced search fields, cutting off garbage in the results.

Click the Search button and view the results, making a note along the way suitable options for replacement.

Mayfonts has many options to replace the original font.

Yes, Mayfonts has paid fonts. But it’s stupid to buy a whole typeface if you need to make a short inscription of several characters for testing in your project.
We find the right option and increase the viewing area of ​​the example to the maximum. In some cases, you can also zoom in the browser.

Let's screen it.

Raster

In Photoshop we turn the screen into smart object. In the smart object we overlay it Gradient Map from the desired color to white.

In the layout, set the layer blending mode for the smart object, for example, Multiply.

For most cases with a white background, this is sufficient.

For those who don't like this, you can remove it from the screenshot white. Color Range..., poke the eyedropper into a white background

get a selection by color, invert the selection,

smooth it out a couple of times by a pixel or two so that the contour border is not so jagged,

and hide everything white under a mask

In the main document, you can already do whatever you want with the smart object, almost like with a vector shape.

When you make a Smart Object smaller, the jaggies in the outline will become less noticeable. Therefore, it is better to screen with a reserve, and then reduce it to the desired size.

Vector

If you need a vector, then we do the tracing in Illustrator.

Open a screenshot from a PNG file:

On the panel Image Trace put Mode: Black and White, tick Preview And carefully twist Threshold and settings in Advanced:

Having received an acceptable result, we make inscriptions Expand

and we get a vector for all occasions:

Free fonts

It is possible that the font you are looking for is not a commercial story and was made for fun or not for sale. Then there is no point in looking for it in official stores.

For free fonts go to VKontakte, to the group “

Quite often, on all kinds of question and answer services, people ask the same question: “ How to identify a font from a picture».

For those who are not involved in graphics or web design by occupation, it is difficult to understand why this is necessary)) Those who are “in the know” know well how difficult it is to determine the type of font in any picture or logo and select it so that the text looked almost like the original.

WhatTheFont is a free online service that will help you identify a font from a picture. In order for the determination result to be as accurate as possible, it is desirable to meet the following conditions:

• letters should not merge with each other, have clear contours
• letters must be aligned horizontal line
• It is desirable that the height of the letters be about 100px

To determine the font from a picture, you need to upload this same picture to the service or indicate its address on the Internet. Both of these actions are performed on home page WhatTheFont.

As an example, let's let's define the font in the logo of my website MuzRelax.ru. I know what font is used there, but let’s see if the WhatTheFont service can correctly identify it.

I took a screenshot of the logo and uploaded the image like this:

As you can see, the background of the font is not even contrasting, although this is also a desirable condition (black on white or white on black).

On next page the service will automatically break the entire inscription in the picture into individual letters and try to identify them. You can enter letters that are undecided or incorrectly identified yourself in the small windows. In my example, everything was determined correctly in automatic mode.

At the final stage, the service will provide a list of fonts that look similar to the font that is in the picture. In my case, 4 options were offered, the very first of which (Georgia) is the type of font that I used in the MuzRelax.ru website logo. Great result!

Unfortunately, WhatTheFont has several disadvantages:

• Although the service's database contains a huge number of fonts, it is not able to identify some exotic ones
• The service does not detect Cyrillic fonts. However, this drawback is quite conditional, because there is not a single service on the Internet for determining a font from an image that would work with Cyrillic fonts. Unfortunately…

WhatTheFont is a leader among similar online services, has good community, where you can ask for help in identifying a font, is completely free and works very quickly. I definitely recommend it!

P.S. Don't forget to bookmark this article and recommend it to your friends).

Every designer faces the problem of choosing the right font. Sometimes you need to find a font from a picture, or identify a font from a sample. This is especially true for web developers when selecting fonts for a future website. In this case, they come to the rescue special services, which will be discussed in detail in this article.

So, let's do an experiment. To do this, I wrote a test in Photoshop using the selected font and will determine it in various services what font I used. Thus, I will determine which service is the best.

You can go through the services with me, and use my picture for testing. It is possible that you will come to different conclusions.

Here is the inscription:

The first service with which we will determine the font is

1. WhatFontIs, address - http://www.whatfontis.com/
   
   
   
   
   Click on the “Browse” button to select a picture with text. Next, you have to select one item and go ahead:
   
   
   
2. What The Font, address http://www.myfonts.com/WhatTheFont/
   xdf
   
   
   
   
   Here you also need to upload a picture with text to the service or insert a direct link to the image. The diagram shows what the picture should be like for proper operation service. Letters and symbols must be clear, do not merge, the font size is at least 100 pixels and the text must be aligned horizontally.
   
   After selecting a picture with text, click “Continue”. It’s nice that the service partially identifies the characters itself and you will have to enter only the doubtful ones manually.
   
   
   
   
   I added the letter f, corrected the S to i, and added a period to the empty space. “Continue” again.
   
   And this service did an excellent job, correctly guessing the font. The only drawback of the site What The Fontthis is a smaller number of fonts compared toWhatFontIs.
   
   Service rating– 5 points.
3. These were services that determine the font from the picture. However, there are sites where font search works based on individual distinctive elements.
   Identifontaddress http://www.identifont.com/index.html
   
   
   
   
   If you know exactly what the font looks like, if you have sample letters, then you can do a little test on appearance font and find its name.
   
   Examples of questions you will answer:
   • does the font have serifs,
   • name: just enter the name of the font or part of it,
   • similar fonts – enter the name of similar fonts to the one you are looking for,
   • font designer If the designer or manufacturer of the font is known, then you can include it in the search.
     
     
     Note: the service is in English, but even without knowledge of the language it is easy to understand, since the questions are supported by pictures with symbols.
     
     I was unable to find using this service desired font. Passed the test.
4. Font Finder Firefox Add-On— an add-on for Firefox that determines what font is used on the site. Just highlight a word on the site, and the add-on will determine the font and CSS style.
   Link to addon https://addons.mozilla.org/en-US/firefox/addon/font-finder/
5. Bowfin Print Works— http://www.bowfinprintworks.com/SerifGuide/serifsearch.php
   
   A service that is based on your idea of ​​what a font looks like, you need to conduct a detailed analysis of the letters and their elements.
   
   
   
   
   By using of this service also the font could not be determined.

I hope that now finding the right font and finding out its name will not be a problem for you.