Greetings, dear readers. Today we will talk about google fonts (google web fonts), how to download them and connect them to the site.

Let's go to the site www.google.com/fonts/, in the filter on the right we select: 1. the desired category, 2. if necessary, sort them and 3. select the language we need (if you need a Russian font in the menu on the left, select Cyrillik).

So we have chosen the font, now we need to select its style, to do this, expand the panel at the bottom ( Open selection drawer) and go to the tab CUSTOMIZE and select the styles and languages ​​you need.

To download click on the button donwload.

Connecting the downloaded font

Copy the fonts contained in the archive to the /fonts folder, which should be in the same directory as the /css folder of your HTML site.

Standard connection of downloaded fonts looks like that

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot?#iefix") format("embedded-opentype"), url("Font_file_name .woff") format("woff"), url("Font_file_name.ttf") format("truetype"), url("Font_file_name.svg#DSNoteRegular") format("svg"); font-weight: normal; font -style: normal; )

In my case the connection will look like this

/* Code to include the font in /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font- style: normal; font-weight: normal; )

In order to connect the font you have chosen to the site, go to the tab EMBED, there you will see 2 connection methods:

1.STANDARD

This code needs to be added to the section your HTML document.

2. @IMPORT

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Important. Regardless of the connection method, use the following CSS rules to define these families: font-family: ‘Roboto’, sans-serif; more on this below.

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

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. There's just a little trick left to do in the styles and force different browsers to load 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

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, besides, they are trying to make the version of the site for mobile devices lighter, 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.

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // display my thumbnail size?>

In this lesson we will look at how to include web fonts in the layout. Web fonts are additional typefaces that are used to make a design more unique or varied. Connecting a font on a page ensures its correct display in all browsers, and it doesn’t matter whether the user has it installed or not.

How to connect a font from Google Fonts

Step 1 - choose a font

Service Google Fonts has a large set of web fonts that can be connected to a project in one line and immediately used in CSS styles. To select only Cyrillic fonts for viewing, in the filter on the left in the Script parameter you must select Cyrillic (for Cyrillic) or Cyrillic Extended (for extended Cyrillic). After this, fonts that support Cyrillic will be shown on the right.

For quick use, click on the Quick Use button.

Step 2 - adjust the font settings

On the next page we choose which font styles we will use. The OpenSans font has 10 weights, from very thin to extra bold. The more styles you select, the more it will affect the page loading speed. Therefore, you should only include the fonts you use. Afterwards, you can select character sets; for the Cyrillic alphabet, select Cyrillic Extended or Cyrillic, and Latin.

Step 3 - code to connect the font

Then we take a line of code to connect to your website. The Standard option is to connect a third-party css file from html, on the @import tab there will be a line for connecting via a css file, and a third option for Javascript. After this, the connection is ready and you can use this font in your layout. The block below shows an example of how to access a font: font-family: "Open Sans", sans-serif;

We set the width using the font-weight parameter: 300; or font-weight: 400; font-weight: 800; Italics - via font-style: italic; .

Usage example

As a result, if we chose to include the font via @import in CSS, our CSS file will look like this:

/* Connecting the font*/ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,300&subset=cyrillic-ext,latin); /* Define the style for the header h1 */ h1( /* Select the connected font "Open Sans" as a typeface */ font-family: "Open Sans", sans-serif; /* Select font thickness 300, which will correspond to the Light style - for thin size*/ font-weight: 300; )

Of course, there are various plugins for using Google Web Fonts on your WordPress site, but if you are developing your own theme, you may need to tightly couple your chosen typography to it, bypassing the plugins. Below we'll show you how to use Google Web Fonts in your theme.

First, let's go to the site Google Web Fonts and select the font that we need to apply in the theme. Using special tools located on the left side, you can narrow your search, since there are really a lot of fonts. I knew I wanted a bold serif font for the headings and title of the blog, so I selected serif from the Categories drop-down menu and then moved the Thickness slider to the right.

In the end, the 617 options offered to me were narrowed down to 5. You have quite a few options to preview fonts - you can see how a word, sentence, paragraph of text or poster will look in the selected font. You can select preset text, you can specify your own text, and select the required font size.

Once you have found the font you wish to use on your site, simply click on the Add to Collection button.

You can add dozens of fonts to your collection. However, this is not always required. Just because you can do it doesn't mean you should. Try to limit yourself to a maximum of three fonts. Or better yet, two. For performance reasons, I still like to use a legacy web safe font for the body of the site and save web fonts for headings and other elements that require special expression or attention. Be concerned about the legibility of your fonts—don't use a flashy font if your visitors won't be able to make out what's written.

When you add your fonts to the collection, you will see them in the blue section at the bottom of the site. Once you have the fonts you want to use in your collection, simply click the Use button.

You will then be taken to a screen with four step instructions. It will teach you how to use fonts. If you want to download selected fonts to use in a graphics editor, to evaluate them or to make an attractive screenshot.png for your theme, then you just need to click on the Download Fonts button at the very top of the page. If you just want to use the font in your theme, then you do not need to download it to your computer.

In the first step, you can select the styles and thickness of the connected font. In the second step, you can select the character set that you want to connect. You can also evaluate how your font collection will affect page loading speed.

Now we move on to the third step, which is no longer as simple as the previous ones. In the third step, we receive the code that needs to be added to our sites - three different options. We choose the Standard option - however, we will deviate slightly from Google's instructions in order to support established methods for adding styles to WordPress themes. In the code for the standard version, we copy only the URL, which is specified as the href attribute for the link tag.

Then open the theme's functions.php file. We'll create a function to load the CSS that we'll use in our theme:

Function ggl_load_styles() ( )

Do you see the ggl prefix on my function? This is one of the successful practices of WordPress. Always prefix your function names in WordPress to reduce the risk of conflicts with other functions in your theme, child theme, or plugins.

Now in this function we need to register our style sheet received from Google:

Function ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); ) )

We use the wp_register_style function. The first argument is a descriptor, i.e. a shorthand we can use to refer to this stylesheet later in our code. The second argument is the path to the file. We use the URL we got in step three of the Google instructions.

Next we include our main style sheet for our theme. I hope you haven't placed the link tag in the head section of your header.php file? If so, then go back to the file and remove this code. Then include the stylesheet in your functions.php file:

Function ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl ", get_stylesheet_uri(), array("googleFont")); ) )

We use the wp_enqueue_style function. It has the same arguments as wp_register_style. First we bind a descriptor to our stylesheet. Then we get the path to our style sheet. Luckily, in WordPress you can get the path using the get_stylesheet_uri() function. After which we specify the dependencies. Our style.css file depends on the Google Web Fonts style sheet.

Finally, we use the wp_enqueue_scripts hook to call our function:

Function ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl ", get_stylesheet_uri(), array("googleFont")); ) ) add_action("wp_enqueue_scripts", "ggl_load_styles");

We are done with the functions.php file. Now we just have to take the last step to use the selected font. The fourth step in Google's instructions shows what values ​​we need to pass to the font-family property to use our font. I want to make all my headings in Holtwood One SC font:

H1, h2, h3, h4, h5, h6 ( font-family: "Holtwood One SC", serif; )

And I want to make the site description in Rouge Script font:

Site-description (font-family: "Rouge Script", cursive; )

All! You don't need to do anything else! You have added Google Web Fonts to your WordPress theme. Use them responsibly!

Hi all! You can read about what I wrote in lesson 132. And in this article, I will tell you how you can easily and quickly connect a font to your website from Google Fonts. Using the Google Font service, you need to select a font for your site, and then connect it.

It is not necessary to upload the font file to the hosting. It is enough to write the required HTML code in the site header and in the name of the new font. Fonts can be connected not only to a WordPress site, but also to any other site.

How to connect Google Fonts to a website

We go to the Google Font service using this link and select the font we need.
Fonts can be selected through a filter. That is, we set the parameters, and thus the service finds fonts with the selected parameters.

You can set other parameters if necessary: ​​thickness (font thickness), slant (slant), width (font width).

You also need to select the Cyrillic alphabet if your site is in Russian: cirillic (Cyrillic), or cirillic extended (Cyrillic extended).

When the parameters are selected, the service will show all the fonts that are available with these.

We move the mouse cursor to the font that we want to install on the site, after which additional settings/parameters appear: Quick-use (quick use), Pop out (view the font in a separate window) and Add to Collection (add to the collection).

Select " Quick-use"and we see a widget in the form of a speedometer on the right side. It shows how fast the selected font loads. The lower the number on this speedometer, the better.

Below you can choose one of three options for installing the font on the site: standard, @import or javascript.

Each option has instructions in English on how to correctly connect the font to the site. I'll show you the first option " standard", because it is simpler.

Copy the line highlighted in red, and then paste it into the header.php file between the tags ….

Then we open the style.css file, find the font that needs to be changed, and add a new one. We simply write the name of the new font. We place the Google Fonts font in quotation marks, for example, font-family: "Aladin",Arial,Helvetica,Sans-serif.

If you don’t understand anything at all about what I said here, then watch the video where I talk in detail, how to connect Google Font to WordPress site

______________________
For lesson 204. without a plugin