Finding a font by image: incredibly simple ways from services to applications. Determine the font from a picture online Find out what font online

So, you look through your favorite resource and find a site on it that uses the ones you like. You also want such a font (and the sooner the better!)... and what do you need to do to find out the name of this font? Sounds familiar? Yes, we've all been in similar situations.

The easiest option is to simply write to the webmaster of this site and ask for the name of the font and where you can get it. The answer may not come immediately; moreover, not all webmasters respond to such letters. So I decided to put together a list of free online resources to speed up the font identification process.

The service was created by one of the largest font suppliers (myfonts.com - translator's note). This is the #1 resource on your list of font identifiers. Just upload a picture with the font you want to identify to the WTF server (take a screenshot and cut out the word with the font you like - approx. translation) or paste a link to the font image in a special line. The system will show you various font options in the results.

If the system cannot recognize the font, you will be prompted to go to the Font Forum, where you can post a picture of the font and wait for a response from experts as to what kind of font it might be. I've used both and it usually solved most of my font related issues

Identifont

P.S. On behalf of myself and the readers of Design Mania, I would like to thank the MultiLogo project for this selection of services that are truly useful in their work. The original article is on the Webdesign Deport website. Sometimes a lot depends on the fonts in website design. Most often, of course, standard developments are used, but with the development of the Internet, HTML5, and font services, designers are gradually paying attention to other possibilities for text design.

P.P.S. Do you want to become a radio presenter? Have you always dreamed of working in radio? - then the radio presenter courses in Kyiv are what you need, you will learn and receive the entire necessary amount of knowledge.
If you have always been attracted to an unusual eye color, then you can use colored contact lenses that are available for order in the LensMaster online store.

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/

The benefits of search engines are as follows.

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 that match 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 point) 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 was made as if with a brush 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 look through the results, simultaneously noting suitable replacement options for yourself.

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 desired 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.

If this is not enough, you can remove the white color from the screenshot. 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, in the group “

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 the example of Google 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 “Inspect 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's a big Fount button that you need to grab and drag to your bookmarks bar.

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

Open the page with the font you like. Press 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.

Here we have collected the most convenient services and applications for identifying fonts. Save this article to your bookmarks and you can easily find out the name of any font!

Designers are often faced with the need to find out what font a particular text is written in. Going through the entire existing collection of fonts in search of a match is far from the most convenient way. In addition, the required font may simply not be available. Of course, you can ask for help on thematic forums, where other designers can suggest the name of the font. You'll just have to wait weeks for an answer. What if there is no time to wait? What to do then?

It's actually simple. Use these resources and you can find out the name of the font in just a couple of minutes, or maybe even faster!

Online services

WhatTheFont

WhatTheFont is objectively the best service for identifying fonts from pictures. Simply upload a picture with an example of a font, indicate whether the service recognized the letters correctly, and click on the big green button. You are given several fonts that are most similar in style, among which you can find a 100% match. If you still cannot determine the font, you will be asked to ask a question on a specialized forum on the same site. The service is also convenient because the found font can be purchased immediately.

For those who are constantly looking for fonts and in any conditions, there is a mobile application for iPhone and Android. You can simply take a photo of the font and immediately find out its name. Very comfortably!

IdentiFont

On this service you can search for a font if you don’t have an image of it, but you remember what it looks like and can indicate its characteristics by answering a series of questions. I can’t say that this is the most convenient way, but if there is no other option, it’s quite possible to find what you need! The creators of the service offer different options for searching fonts: by name (partial), by font families, by symbols, and even by the designers who developed them.

Whatfontis

What Font is - an online service for identifying fonts from pictures. Similar to WhatTheFont in many ways, but worth bookmarking just in case.

Browser apps and extensions

In addition to the above online services, there are their analogues in the form of browser extensions. Their advantage is that you don’t need to open a new tab every time to find out in what font this or that inscription on the site is made. You just need to activate the extension.

FontFaceNinja

The undisputed leader at the moment. FontFaceNinja makes it possible not only to find out the name of any font on the site (not pictures), but also to try writing it here on the site, and also (attention) download the font you like! Of course, the authors warn that the fonts are downloaded for informational purposes only.

In addition to the beauty and convenience of this extension, there is another nice thing. FontFaceNinja has a magic button (mask) that hides all advertising from the page, allowing you to enjoy the fonts exclusively. You can download the extension completely free of charge. Works with Chrome and Safari.

Whatfont tool

An extension for Chrome and Safari that will help you find out the names of fonts in the browser. Shows fairly detailed background information on the font of interest, including font family, size, and line height.

Fount

An excellent plugin for identifying fonts on websites. For everything to work, you need to bookmark the site and click on it. The cursor will take the shape of a cross and when you click on the font, a window will appear with its name, size in pixels, weight and style. To turn it off, press again. Works with Safari, Chrome, Firefox, and IE8+ browsers.

Upgrading your personal font recognition skills

Everyone wants to be a cool designer who knows not only all existing fonts by name and family, but can also list the developers and tell the stories of their creation. Of course, such skills are an undeniable talent. But it’s quite possible to improve your knowledge a little. Here are some games and tools to help you with this.

Font Trainer

Online game test: set the parameters and guess where the font is. You can install both Latin and Cyrillic alphabet.

The Font Game HD

This application will literally help you learn the names and styles of fonts with ease. There are different game modes, interesting tasks and statistics of your achievements. Of the minuses, it is worth noting that the application is paid and only in the AppStore.

A simple and beautiful test, which we wrote about separately in the blog. Can you identify the 10 most popular fonts? Challenge yourself. The results may be unexpected!

Write to us if you know of any other convenient services or applications for identifying fonts. We welcome your comments! And share the link to this article with your friends. Let their life become a little easier too :)

If you are a designer or just a hobbyist using any graphics editor, you may have encountered the problem of identifying fonts.
For example, when the font you like, in which the text is written, is in the image.
You might have seen it on the website or taken a screenshot while watching a video - it doesn't matter.
We'll tell you how to identify a font from a picture in this article.

Font detection services

The most popular services on the Internet are the following services, which allow you to determine online from a picture:

What The Font
What Font Is
Bowfin Printworks
Identifont
Type Navigator
Flickr Typeface Identification

There are quite a lot of differences between them. Let's look at each of the above sites in more detail.

What The Font

It is no coincidence that the What The Font resource received this position first on the list of search engines. At its core, this is a section of a popular website containing a wide database of fonts.

Ease of use and speed of search are also important criteria for a high rating.

All you need to do is a series of simple steps.

The execution order is indicated directly on the search page.

To find a font from a picture you need:

Upload the desired image by pressing the “Select file” button. You can do this with a file that is already stored on your device.
Go to the folder where the picture is stored and click "Open".
To go to the next step use the “Continue” button;

If the font you need was not found, you can go to the Font Forum. Post an existing picture and after some time you will receive a comment from an expert who will suggest the style of the specified test.

For correct results, make sure that:

Adjacent letters in the text do not touch each other;
The characters used in the font have a distinct shape;
The text should be as horizontally level as possible;
If possible, the symbol height should not be around 100 pixels.

To the website

What Font Is

What Font Is is another pleasant service that is easy to navigate and accurately determine the font.

The search principle here is almost completely identical to the previous site: you also upload a photo or insert a URL link to it, enter each letter of the text to improve the correctness of the result, and at the end you get the name of the style you are interested in.

However, there is one significant difference that makes this search engine stand out.

As you fill out the required fields, you will be offered one of three search options to choose from:

Show free fonts or their equivalents;
Show only paid (commercial) fonts or their equivalents;
Show all types of fonts.

This selection of alternative options will help you immediately find free styles without bothering you with an independent search on the Internet.