home › Multimedia › Your own font on the page. Installing new fonts in MS Word How to use installed fonts

Your own font on the page. Installing new fonts in MS Word How to use installed fonts

Vlad Merzhevich

The font is an integral part of web design, gives the site expressiveness and recognition, expresses the characteristic style of the site and is directly related to the perception of texts. A well-chosen font may not be noticed, but without it there will be no zest that gives the site design completeness.

If you already have a specific font installed on your computer, then just add a line to the styles.

h1 (font-family: SuperPuperFont; )

The value of the font-family property is the name of the font typeface; it will be applied to all headings

. But what will website visitors see if our spectacular and rare font is not installed? This situation is most likely, so if the browser does not recognize the declared font, it will use the default font, for example in Windows this is Times New Roman. All our carefully thought-out type design will crumble and go to dust overnight, so we need to look for the most universal solution. The first thing that immediately comes to mind is to arrange for the font file to be downloaded to the user’s computer and the text to be displayed in the selected font. Compared to other methods such as displaying text through a picture, this method is the simplest and most versatile.

What advantages does loading a font file and then applying it via CSS ultimately give us?

Text is easy to add and edit.

In the browser, you can use the search and find the desired phrases.

In the browser settings, you can reduce or increase the font size to achieve comfortable viewing.

Search engines They index document content well.

Text can be selected and copied to the clipboard, as well as translated into another language.

Text parameters like line spacing, color, size, and the like can be easily changed using CSS properties.

Again, using CSS, you can simply add different effects to the text, such as a shadow.

As you can see, there are a lot of advantages. There are also small disadvantages and for balance they are worth mentioning.

Not all browser versions support downloadable fonts and one-size-fits-all formats.

The file containing the font typeface can take up a large amount of space, thereby slowing down the loading of the web page.

In table 1 lists the browser versions and font formats they support.
Table 1. Supported formats
Format Internet Explorer Chrome Opera Safari Firefox Android iOS
TTF 9.0+ 4.0+ 10.0+ 3.1+ 3.5+ 2.2+
EOT 5.0-8.0
WOFF 9.0+ 5.0+ 3.6+
SVG 1.0+ 9.0+ 3.1+ 3.5+ 1.0+
The most supported format is TTF. With the exception of IE up to version 9.0 and iOS, all browsers understand it perfectly. So if your font is in this format and you are targeting modern browsers, you won’t have to do any additional actions. It is enough to write the following code in styles (example 1).

Example 1: TTF connection
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Font

Format	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

First, we load the font file itself using the @font-face rule. Inside it we write the name of the font typeface through the font-family parameter and the path to the file through src . Then we use the font as usual. So, if we need to set the title font, then for the h1 selector, as shown in the example, we set the font-family property with the name of the loaded font. For older versions of IE, we list fallback options separated by commas. In this case, the title font will be "Comic Sans MS", since IE8 and below do not support the TTF format.

The result of this example is shown in Fig. 1.

Rice. 1. Header with loaded font

What to do if you desperately need a florid font in IE8? Fortunately, @font-face allows you to include multiple font files of different formats at the same time. The browser just has to choose the appropriate one. Thus, a universal solution that works in all browsers comes down to converting the existing TTF format to EOT and then connecting both files.

For conversion, there are several online services that allow you to upload a TTF file and receive an EOT file as output. Unfortunately, most of these services have the same problem - we receive the file, but the Russian language is not supported. As a result, the desired result is not achieved, the conversion occurs incorrectly. Among the sites I checked, there was one that displayed the text correctly in IE.

We go to this site, download the TTF file and click the “Convert TTF to EOT” button, after which we save the resulting file to the folder with fonts. In styles, it remains to perform a small trick and force different browsers download the font in the required format. To do this, we add two src parameters. The first one points to the EOT file and is intended for older versions of IE. The second src parameter must contain two comma-separated addresses, one of which points to the TTF file. The fact is that IE versions 8.0 and earlier do not understand the comma in the src parameter and, accordingly, will ignore the entire parameter. There can be several writing options, for example, repeat the url, specify the font name inside the local parameter, or even write a non-existent font. If the browser cannot load such a font, then it will go to the second one in the list, and we have it written correctly. Acceptable writing methods.

src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);

A working option for connecting a font for all browser versions is shown in example 2.

Example 2: EOT connection

HTML5 CSS3 IE Cr Op Sa Fx

Font

A modern element of the political process

In fact, Montesquieu’s political teachings bring forward the continental European type of political culture, which was reflected in the works of Michels.

As for iOS, it seems to me that there is little point in making and downloading a separate font in SVG format. The audience of sites viewing it via iOS is still small, and besides, the version of the site is for mobile devices They are trying to make it easier, and it is not advisable to download an additional few tens of kilobytes.

Google Web Fonts

A convenient service that takes care of the routine of supporting different font formats and browser versions can be found at www.google.com/webfonts. Although there are relatively few different fonts in the collection (there are several dozen), they are all selected very high quality and are free for use on websites.

Before selecting a font, switch the Script value to Cyrillic, then you will see a list of fonts that support the Russian language (Fig. 2).

Rice. 2. Selecting fonts in Google Web Fonts

The font you like must first be added to the collection by clicking on the “Add to Collection” button, and then on the “Use” button in the lower right corner of the screen. On the next page (Fig. 3) you can finally select the fonts you need. At the same time, you need to understand that a font typeface can contain several styles and each of them increases the volume of downloaded files.

Rice. 3. Fonts loaded on the page

You can connect the selected fonts in one of three ways; the added code can be copied below the page.

1. Via element . The line will look something like this.

2. Through the @import rule. We insert this line into our CSS file at the very top.

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Through JavaScript.

In principle, all paths are equal, so choose according to your preference.

The advantages of using this service are as follows.

The fonts are free to use, you don't have to pay for them.
The offered fonts are “sharpened” for viewing on the screen, the files are optimized and occupy a relatively small volume.
The browser is detected automatically and the font in the required format is provided for it.

One of the main advantages of the service is that fonts are stored in TTF, EOT, WOFF, SVG formats and are loaded after checking the browser. Thus, the EOT format will only be available for older versions of IE.

Whether you use Google Web Fonts or not is up to you. If you don’t find a suitable font there, you can always connect the popular and widespread TTF. Moreover, it is supported by the latest versions of all popular browsers.

When laying out pages, from time to time you have to deal with non-standard fonts. Of course, you shouldn’t use them as the main ones on the site, but in various individual elements, for example, in the header, it’s quite possible. The problem with these fonts is that it may simply not be on the user’s computer, which will lead to the corresponding text being displayed in a standard font, as a result, the intended design will be spoiled. This problem can be solved very simply: all non-standard font is simply cut out as a picture. However, there is also another way to use a custom font on a website.

Let me write CSS code, and then I’ll explain it:

@font-face (
font-family: SpecialFont;
src: url("font/specialfont.ttf");
}
p(
font-family: SpecialFont;
}

As a result, to the tags

the font will be applied SpecialFont. I think the code is quite transparent, but I’ll explain anyway. You need to get the font and upload it to your website, for example, in a folder font. Next in CSS code register in @font-face its name and path to it, and then you can use it.

But it’s not without reason that in most cases they use images to display non-standard fonts. In use @font-face there are 2 drawbacks:

There are very large fonts that weigh hundreds of kilobytes, and this will dramatically increase page loading time.
The second minus is even more serious. Not all browsers support this feature Moreover, some browsers require a font in a different format (not ttf). Thus, some people will still not see your font. To solve this problem, you need to download the same font in different formats, which will greatly increase the first disadvantage.

But it is worth noting that the first minus is no longer as important as before. Since Internet connection speeds are growing very quickly, and few people care about additional 100-200 KB.

The second minus is also not so important. The only more or less popular browsers that will not understand this code are IE8 and below, plus iOS. All other modern browsers will understand this code without any problems.

Considering that IE8 is still relatively popular, then I personally will withdraw for now non-standard fonts are still available as images, but I really hope that in the near future this browser will become history, and then it will be possible to use @font-face and ttf fonts.

P.S. Congratulations to all women on the spring holidays!

IN latest versions text editor Microsoft Word There is a fairly large set of built-in fonts. Most of them, as expected, consist of letters, but some use various symbols and signs instead of letters, which is also very convenient and necessary in many situations.

And yet, no matter how many built-in fonts MS Word has, the standard set will always not be enough for active users of the program, especially if you want something truly unusual. It is not surprising that on the Internet you can find many fonts for this text editor created by third-party developers. That is why in this article we will talk about how to add a font to Word.

Important warning: Download fonts, like any other software, only from trusted sites, since many of them may well contain viruses and other malicious software. Do not forget about your own safety and the safety of your personal data, do not download the fonts provided in the installation EXE files, since in fact they are distributed in archives, which contain files in OTF or TTF formats supported by Windows OS.

Here is a list of safe resources from which you can download fonts for MS Word and other compatible programs:

Note that all of the above sites are extremely conveniently implemented and each of the fonts is presented clearly and understandably there. That is, you look at the preview picture, decide whether you like this font and whether you need it at all, and only after that download it. So let's get started.

1. Select a suitable font on one of the sites we offer (or on another that you completely trust) and download it.

2. Go to the folder where you downloaded the archive (or just a file) with the font(s). In our case, this is the desktop.

3. Open the archive and extract its contents to any convenient folder. If you have downloaded fonts that are not archived, simply move them to a location where you can easily access them. Do not close this folder.

Note: In addition to the OTF or TTF file, the archive with fonts may also contain files of other formats, for example, an image and Text Document, as in our example. It is not necessary to extract these files.

4. Open .
IN Windows 8 - 10 you can do this using the keys Win+X, where in the list that appears you need to select . Instead of keys, you can also right-click on the menu icon "Start".

IN Windows XP - 7 this section is in the menu "Start" — .

5. If in viewing mode "Categories", as in our example, switch to the small icons display mode - this way you can quickly find the item you need.

6. Find the item there “Fonts”(most likely it will be one of the last ones) and click on it.

7. A folder with fonts installed on Windows will open. Place the font file(s) previously downloaded and extracted from the archive into it.

Advice: You can simply drag it (them) with the mouse from folder to folder or use the commands Ctrl+C(copy) or Ctrl+X(cut) and then Ctrl+V(insert).

8. After a short initialization process, the font will be installed on the system and appear in the folder where you moved it.

Note: Some fonts may consist of multiple files (for example, regular, italic, and bold). In this case, you need to place all these files in the fonts folder.

Installing a new font in Word

1. Launch Word and find a new font in the list of standard ones built into the program.

2. Often, finding a new font in the list is not as easy as it might seem: firstly, there are already quite a lot of them there, and secondly, its name, although written in its own font, is quite small.

To quickly find a new font in MS Word and start using it in typing, open the “Font” group dialog box by clicking on the small arrow located in the lower right corner of this group.

3. Listed "Font" find the name of the new font you installed (in our case it is Altamonte Personal Use) and select it.

Advice: In the window "Sample" you can see what the font looks like. This will help you find it faster if you don’t remember the name of the font, but remember it visually.

4. After you click "OK" in the dialog box "Font", you'll switch to the new font and can start using it.

Embedding a font into a document

Once you install the new font on your computer, you will only be able to use it on your own. That is, if you send a text document written in a new font to another person who does not have this font installed in the system, and therefore is not integrated into Word, then it will not be displayed for him.

If you want the new font to be available not only on your PC (well, on the printer, or rather, on a printed sheet of paper), but also on other computers, other users, it must be embedded in a text document. Read below for information on how to do this.

Note: Embedding a font into a document will increase the size of the MS Word document.

1. In a Word document, go to the tab "Options", which can be opened through the menu "File"(Word 2010 - 2016) or button "MS Word" (2003 — 2007).

2. In the “Options” dialog box that opens in front of you, go to the section "Preservation".

3. Check the box next to the item “Embed fonts into file”.

4. Select whether you want to embed only characters that are used in the current document (this will reduce the file size), or whether you want to exclude the embedding of system fonts (in fact, it is not necessary).

Actually, we can end here, because now you know how to install fonts in Word, having previously installed them in Windows. We wish you success in mastering new functions and limitless possibilities. Microsoft programs Word.

Without a font, books, blogs, announcements about sketching courses or creating snowflakes from pompoms are impossible. A lot depends on choosing the right font. A font, like a person’s face, can reflect and evoke emotions and mood. For example, you would like people to be happy after reading your text, but for some reason they remain indifferent. The whole point may be the wrong font chosen. And this causes cognitive dissonance.

In the book On Type, Eric Spiekermann, the #1 expert on type, shows that typography is not an art for the elite, but a powerful tool available to everyone who has something to say and who wants to express their thoughts correctly, both on paper and on paper. screen.

Here the design is explained in simple language, and the font ceases to be something incomprehensible. Meaningful, strong, interesting. This book has already been read by millions of people around the world. Now it is also in Russian.

Meet Eric Spiekermann

Eric Spiekermann is a designer, professor at the Bremen Academy of Arts, member of the German Design Council, and president of the International Society of Typographic Designers.

Eric has a passion - fonts. He can easily tell what era a particular font is from. Which font will show your love and which will show your serious intentions.

Eric Spiekermann and his most famous phrase about type.

If you have ever been to Germany and rode German trains, the inscriptions, diagrams and signs that you saw at stops, platforms and stations are written in the Deutsche Bahn font, created by the hands of Eric Spiekerman. He also created the font for Audi, the design for The Economicist magazine. And I wrote this book.

“The beauty of his publications is that they are written by Eric for NON-designers. This is what people really love - design and typography in ordinary human language. Spiekermann - He is simply the Pope of modern typography and design in general.”
Natalie Ratkowski

What is inside?

This is a real parallel world where fonts are its main inhabitants. And this book will teach you to understand fonts like the back of your hand. There are a huge number of examples in the book.

Graphic design and typography are not easy, but even simple projects can benefit from knowing how to choose the right font.

The skill of presenting information is to ensure that the reader does not get distracted, reads to the end and understands what you wanted to say. This is the art of choosing a font.

Letters with character

Take a closer look at the letter: is it light or massive, round or square, thin or squat. What does it look like? The letters can stand at attention like soldiers, or they can sing or dance gracefully in a line, they can shout or laugh. Some words not only sound, but also look more pleasant than others.

Font for doubt, surprise, anger and joy. Illustration from the book

In the font for the word joy (“joy”) open forms, confident strokes and a sense of dynamics. It's nice to see that some words contain an explanation in the letters they are made of. These loose and easy shapes will definitely make you think of a joyful, open-armed person, especially the letter Y.

Bold fonts with sharp outlines correspond to gloomy feelings, while pleasant emotions are better conveyed in light, casual fonts.

Kafka font

Font designers have always taken their handwriting as a model when developing typefaces. Mechanical limitations led to the development of handwritten fonts, written with a brush, pen, fountain pen, or even felt-tip pen. They were then cut out of metal or photographed and turned into type.

Today, with the development of digital tools, handwritten fonts have become more unusual and personalized. Now you can buy the "handwriting" of famous artists and writers such as Picasso, Cezanne and Franz Kafka.

Fonts of the Mister K group. Illustration from the book

The latter's manuscripts were quite illegible, but this did not stop Yulia Sysmäläinen - she developed the Mr. font. K - in Kafka's handwriting - with all the imperfections that the writer would probably want to avoid.

Typography puzzle

Let's play. What font do you think matches each type of shoe?

Illustration from the book.

Which font to choose

Perhaps you've been in this situation: late evening, flight at six in the morning, and you're still packing your suitcase and can't decide what to take with you.

This happens when choosing a font.

Choosing the right font for a specific message is interesting and difficult at the same time. What do you want to put into the message, other than facts? How do you want to interpret it, comment on it, decorate it? If you choose a “neutral” font, such as Times New Roman, then the message is neutral.

By thinking about the appearance of the message, you interpret it one way or another.

Before you pack fonts into an imaginary suitcase, take a look at the problem. It is necessary to balance practicality and aesthetics.

We associate the appearance of a particular font with a certain product. Thus, fresh products are more suitable for labels with improvised handwritten font. Baked goods correspond to softly shaped serifs, whole grains are best represented by quickly handwritten type with jagged outlines, and serious business enterprise is associated with the era of copper engraving, securities were produced in the form of elaborate printed certificates.

Book spread

Still in the book

With this book, you will look at fonts in a new way, learn to understand them and choose the right one for your purposes. The book contains a lot of interesting and practical information:

History of font evolution
Selecting a font for a specific task
Readability and legibility of font
How to make a font work
Screen Font Features
Newspaper, magazine, book layout for text
The future of fonts
List of literature and websites on typography

…200 pages of interesting historical facts, useful tips on the choice and use of fonts, beautiful illustrative examples.

You can spend your whole life learning to choose the right font, and it’s extremely interesting, almost like mastering watercolors. It’s also useful because it’s one of the ways to convey ideas to your audience. Make friends with fonts!

Hello, dear readers!

In a previous article, I wrote about how to style content on a website running WordPress in a non-standard way using inline CSS styles. Using styles, you can, among other things, change the font used in the text.

Fonts for a website are the most important element of its design. The behavior of the visitor on the page depends on their correct choice. It is necessary to choose the right font type, its size, thickness, slant, color, so that all this is harmoniously combined with the overall design.

But sometimes there is a need to use some unusual font, and a myriad of them have now been developed - artistic, handwritten, Gothic, Old Russian, etc. Can any of them be used on the site?

It is possible, but there are certain conditions.

Standard and custom fonts

For the font you choose to display correctly on a user's screen, it must be installed on their computer. When installing the operating system, we also receive a certain set of fonts. This set is called standard. Each operating system has its own list of standard fonts. But there are fonts that are present in all operating systems, they are called safe. You can safely use any of them on your website without fear that it will not be displayed correctly on the visitor’s computer. Naturally, these fonts are the most popular, they are used to type content on most sites, and they are easy to read.

In addition to standard fonts, the user can install other non-standard fonts on his computer, but problems may arise with their display. Sometimes inexperienced users, preparing an ordinary text document in Word or a presentation, use some beautiful artistic font that they found on the Internet and installed on their computer. When preparing, everything looks great, but when they start viewing this presentation on another computer, it turns out that this beautiful font is replaced with a regular, standard one.

The same thing happens with websites. In order for the non-standard font you use to be displayed correctly on a site visitor’s computer, it must be installed on the site visitor’s computer. But you cannot require thousands of visitors to install a certain font in order to view your site.

How to solve this problem?

To do this, you need to connect the necessary fonts to the site.

How to connect fonts for a website

There are two main ways to do this. In the first case, fonts located on a specialized remote server, the second involves placing font files on the server of the site itself.

In this article we will take a closer look at the first method.

Working with the Google Fonts service

Let's start with Google service Fonts, as the most famous and reliable.

It’s not for nothing that I talk about reliability, because if you use a third-party resource on your website, then it must be verified and reliable. In the process of preparing this article, I visited several sites with collections of fonts that I had in my bookmarks. I used them before, but it turned out that one of them was disabled for non-payment of hosting, the other, on which I once bought very beautiful fonts, blocked by antivirus.

On the site , as can be seen from the screenshot, on this moment The collection contains 708 fonts, but not all of them are suitable for us. For Russian-language sites, fonts that support Cyrillic are needed. On the left there are filters for selection, where in the drop-down list Script choose Cyrillic, after which there are already 61 options left. We choose from them. Add the fonts you like to the collection by clicking on the button .

After selection, move on to the next item - button Review. On the page that opens, you can see how the text will look and try changing its parameters.

Next we move on to the last point - the button Use. Here you can copy the code to connect the font to the site.

This code should be inserted into the HTML page of your site between the tags<head> andhead>. For WordPress sites, these tags are located in the header file header.php. Step 4 copies the code to describe the CSS style.

As you can see, I chose three options, and if I now type the following code in the WordPress HTML editor:

then on the page it will look like this:

This text is formatted in a non-standard way. Poiret One.

There are two main ways to do this. Russo One.

Let's take a closer look at the first method. Mark Script.

Working with the AllFont.ru service

Another good service to select a font for the site - . It seems there is even more choice here. At least it's more varied. You can choose using the rubricator or search by name.

On the page of the selected font, you can change the color, background, size, text and see how it will look.

After this, you can copy the embed codes to the site. Everything is done in the same way as they did on the Google Fonts website. I chose the AGZeppelin-Roman font as an example, look how it looks.