How to add Google Web Fonts fonts in WordPress theme. How to connect the font from Google Fonts? Connecting fonts from Google Fonts CSS

To find out about everything yourself - not easy, but very interesting. If you have at least a superficial idea of \u200b\u200bhow the site works, then it is better for them to implement your project yourself. At the same time, you will not just save a bunch of money, but also learn a lot of "chips", secrets, etc. Using Google fonts usually do not attract attention, although thanks to them a blog can become more interesting.

Service

For a long time, a major service of web fonts appeared on the Internet. It was developed by Google. Users could use it for free. Despite the fact that the setting of this type is not considered superer, there are still such people who made mistakes and could not cope with the service.

To do this, a simple design was specifically designed. Now work with the fonts of Google Fonts has become easier, and the number of visitors has increased. Library expanded. Last year a new service was held, which gathered a lot positive feedback. Now people have become easier to connect fonts to their sites and view them.

Appearance

So, for those who have never been on the site with the old design, you need to make a general picture of the changes. In the past, the service looked quite massively. Everywhere there were thick frames, catchy buttons of blue, the graphics was not the highest permission. All this has significantly influenced the visitor.

Now the developers have focused on Material Design. All acquired sophisticated features. Appearance He became "easier". Fine animation, interactivity became noticeable. Nothing else distracts attention from the selection of the desired Google Fonts font.

There was a convenient adaptation of the resource under mobile devices. Of course, such a change is not much noticeable against the background of innovations, but taking into account bugs previous version It will be for avid users of the "manna heavenly".

Opportunity

Frequently similar services are used by designers. Despite their experience and professionalism, they also work with visualization. Redesign presented more similar features that would allow you to combine in advance what it will be necessary to implement later in your project.

Therefore, the problem with how one font is combined with a different color and the third background, disappeared. The company added more tools and a palette with universal tones, which would allow experimenting and find out how one or another font will look in a specific color.

Selected

Google Fonts Fonts service provides users with the use of selected options. In a special tab, a set of styles that developer recommends use is collected. These collections are allocated among the others. They are developed by experts from Google and third-party agencies. Most of them have a certain style and special philosophy.

View

One of the important changes affected directly the choice of fonts. It is understood that earlier the user saw some drawing with additional buttons and a large blue, which added a font to the collection. In general, this option looked good, but not always the box was enough good permission Pictures with style, and therefore determine definitely, how the font will look like, it was difficult.

There were questions and these additional buttons that little was known at first glance. It was necessary to either bring them on them or use. Now it has become more or less clear. There are additional features:

Select a specific proposal, paragraph or your own text element.
Font saturation experiments.
Fast setting of sizes using a slider.

By the way, the change in the size of Google fonts has become adaptable, as only one example changed, and not everything on the page. IN old version Users could be transferred from one edge of the page to another, and in the new you just stay on the example that is regulated.

Connection

If you are ready to use this service, you can try to connect fonts to your resource. The process of obtaining links is universal. Problems may arise depending on your CMS system. Each uses its own ways. Therefore, for different projects will have to select individual options.

We will look at how to get a link to connect Google fonts. You need to go to the official website of Google Fonts. There you are viewing the catalog of styles and choose the one that best suits. To do this, next to him click "Plusik". After the font will be added to the special block at the bottom of the page.

Click on this unit and then configure it. Here you can choose the inscription and the necessary alphabet. If you need Google Fonts Cyrillic, then mark the Cyrillic string. After the link will be formed. It can be found in the same window on the Embed tab. It is enough just to copy it or use the full HTML code.

Usually in the site settings there is a font and colors. There are standard options, and you can add extended. They have a separate option for Google Fonts. If you then need to download fonts through the Supreme WebFonts plugin.

Popular options

It is difficult, of course, to judge what styles are better, especially for different subjects of the site. When creating your site, remember that he should not like you, but your audience. Therefore, it is better to look at competitors sites.

Usually for commercial resources no one bothers about styles. After all, if you see the font in Google Chrome. In the online store, you are unlikely to pay attention to it. But if you have a blog, then, most likely, something you can like, and something, on the contrary, will annoy.

Google Fonts has prepared many collections in which there are popular styles. For example, Lobster love to use for individual blocks in the text. It is difficult to read if the entire article is written in such a bold italic. But it looks good inserts and quotes.

Bad Script is also an option for blogs. Cursive type heavy to read large arrays of text, but you can allocate the main idea. The style imitates handwritten handwriting. Jura Normal 400 is an interesting option for Cyrillic. The author claims that this is Eurostil from the Sens Serip Family. It looks really very good and has several variations.

WebFonts is the technology of using third-party fonts on its webpage. One example:

If you start from source, the font tag was introduced in 1995, and already in 1996 a software definition was written to CSS. Starting from the CSS 2.0 version, the font synthesis was introduced and the browsers synthesis, but nevertheless then still popular, and now the old and irrelevant IE did not have support for font loading, which prevented the rapid development of fonts on its website.

IN modern Internet Web fonts are a long-established thing. On different sites, we can use all sorts of fonts, which, in turn, are not included in the supply of a particular operating system, but there is an undesirable side effect, which we will talk about today and talk.

File formats

To connect the fonts, the software insertion in CSS is used, the so-called @ -Evilo. So, B. simple form @ Font-Face is such a declaration. It looks like this:

/ * Declare the font * / @ font-face (font-face: "font name"; src: url ("path / up / it");) / * Apply * / P (font-face: "font name" , Arial;)
TTF or OTF - the usual font file, but loaded from the server during the site viewing time;

WOFF is an unprotected OTF or TTF source archive, perhaps the most important format that most popular browsers support, and the files in the WOFF usually 2-2.5 times easier than the original;

EOT - introduced TT OpenType Archive, having protection mechanisms, needed to support old browsers Internet Explorer. (starting with IE8, except TrueType curves, supported and postScript);

SVG - to support the Safari browser.

Prepared for implementation (@ font-face) to the site Fonts today must be immediately in several formats. You realized that there are some discrepancies, as well as there is not one kind operating systems. Font formats are quite a lot, but the concrete will only work in a particular browser. As for these most formats, why it is necessary to specify them so much when connected, then they are needed for cross-browser support of the site.

@ Font-Face (Font-Family: "Ashift_name"; src: url ("file_name_shift.eot"); src: url ("file_file_shift.eot? #iefix") Format ("Embedded-OpenType"), URL ("File name_shift .woff ") Format (" WOFF "), URL (" File_Shift.TTF ") Format (" TrueType "), URL (" File_Fail_name.svg # dsnoteregular ") Format (" SVG "); font-weight: normal; font -Style: Normal;)
If you want to use the encrypted code instead of the file, in this case, Base64 comes to help, which works on the same principle and with images, however, for old IE Base64 is not processed.

@ Font-Face (Font-Family: "Ashift_name"; src: url ("file_name_shift.eot");) @ font-face (Font-Family: "Ashift_name"; src: url (Data: font / woff; charset \u003d UTF-8; BASE64, DATA) FORMAT ("WOFF"), URL (DATA: Font / TrueType; Charset \u003d UTF-8; BASE64, Data) Format ("TrueType"), URL ("File_name_Svg #File_Shot_name") Format ("SVG"); font-weight: normal; font-style: normal;)

Embedded OpenType?

As you might notice, the plug-ins for IE have a line with such a parameter:

SRC: URL ("file_File_Seot? #Iefix") Format ("Embedded-OpenType")
In the classic version, we had to specify with you this way:

SRC: URL ("File_SHift.eot") Format ("Embedded-OpenType")
But when adding a symbol "?" After the font format, we forcibly specify the browser not to read the following indication - Format ("Embedded-OpenType"). Internet Explorer supports the embedding of fonts through the so-called company Embedded OpenType standard, starting with IE 4.0 version. It uses a digital rights management method to prevent the fonts that apply to the license.

What if the font is not supported in the browser?

A long time ago, bypass roads were already invented, the so-called "crutches" to display a font. There are cases when the font was designed only in SVG format, or only in TTF format.

1. In the old days, the developers connected the image, which in turn was the text scored in visual editor. However, now it is considered a bad tone, for support is predicted (you need to open the editor again to change the text of the picture), respectively, the user cannot copy the text from the image.

2. Also common was the use of Flash solutions.

3. Another solution is using javascriptTo replace the text with VML (for Internet Explorer) or SVG (for all other browsers).

What problems can still occur?

The browser will try to synchronize the font loading, it will try to hide the text, that is, to make it invisible until the font has been loaded. This effect is called FOIT, the effect of "white flash".

Flash effect

FOIT effect in browsers such as Safari, Chrome, Opera, Firefox tends to hide the text within a maximum of 30 seconds before refusing to get a font, after which the default font is set.

An example of how the font is loaded:

Nevertheless, 2.7 seconds are a long time!

What can be done?

Initially, the approach was to enable the font file conversion to URIS data so that those fonts can be included directly in the font family definitions in the CSS file. By downloading this CSS file asynchronous way, you can guarantee that the browser will immediately give text in the page using custom fonts, and new fonts would be used as soon as CSS would be loaded.

However, in any experiment there is a side effect.

Initially, Bram Stein used a custom font, but after his font was loaded, "flicker" occurred, in the example of 0.7 second:

In short, the flicker occurs when the browser is trying to display the font from font-facely and apply it to HTML. The font defined in the @ font-face of the declaration, which was not still loaded.

Bram Stein showed how to connect the fonts correctly, it developed a script, an alternative to Google for an asynchronous font loading, this is a fontfaceobserver script.

Trying

Analysis

Standard connection from Google

Honestly, using more than one font on the site, you can specifically slow down the site loading speed, thereby increasing the total load time. Google Fonts API allows you to quickly add a font to the site using the font generator, thereby quickly designing your site. However, you need to remember the effect of FOIT. Total load time - 322 ms.

Web Font Loader from Google

Web Font Loader - JavaScript Library for advanced work with API, a library that gives us more control over the font loading than the standard Google Fonts API. The script allows us to use many fonts, loading them sequentially or asynchronously. In contrast to the standard connection, text with standard font is displayed on weak connections, until the font is loaded.
Total load time: 1132 ms

Fontfaceobserver

FontFaceObserver is a JavaScript library (5kb), a so-called bootter compatible with any font web service. The script allows us to notify us whether the font loaded or not, allows you to track an event after downloading and up to the font load. Total load time: 159 ms

Using the script.

Google Fonts is one of the best resources with free web fonts, and Google gives you several ways to import them to your website. Unfortunately, none of them includes a popular WordPress engine. This means that you must either use plugins, which are a lot, or pack hands, rearing with the code.

Good news is that you can install any font from google Libraries Almost any topic of WordPress without much trouble. How exactly - we will teach you today.

There are two options - connect the plugin, or a little to pierce with the Functions.php file.

But first I would like to list the advantages and disadvantages of Google Fonts so that you finally decide to use them in our projects or not.

Good and bad Google Web Fonts

As for web fonts, Google is one of better options in terms of performance . All due to lightweight design, and caching system. Visitors should not wait for Google fonts, if they recently visited the site on which they were used. Popular fonts such as Open Sans can improve your site performance by reducing the download time.

Another feature is that Google allows you to upload these fonts So you can use them in your layouts.

And finally the platform is completely free . To start using fonts, you only need to log in or start mailbox On Gmail (and who has no mail today to gmail?).

Of flaws You can specify that google-fonts choice is small Many of them are similar to each other. It is necessary to spend a lot of time in search to find a decent, original font. Fonts for Cyrillic very little.

In addition, there are usual safety problems - You need to specify some personal data when installing fonts from Google on your site.

How to install Google fonts using WordPress plugins

If you are looking for plugins, the first thing you see in the search results - plagings WP Google Fonts and Easy Google Web Fonts . These are really the two best plugins.

Plugins are not the ideal solution for setup Google- WordPress WebsiteStos site - not only from the point of view of performance, but also because the plugins do not allow you to choose certain pieces of text. Nevertheless, if you or your client are confident that it is better to use plugins, then look at these two options.

This plugin allows you to focus on specific elements, such as headlines H1, paragraphs and quotes. You also receive a custom CSS option for further work with selected styles. Add and configure fonts from Google on your WordPress site with this plugin quite easily.

Easy Google Web Fonts justifies its name, and makes the installation of Google Fonts super easy even for beginners. You can use the Live Preview feature for viewing, testing and optimizing fonts without leaving the website, as well as create your own font rules without writing a line of code.

The right way to install Google Fonts in WordPress template

In the end, we come to the option to open the Functions.php file and work with a code. Before you do this, you need to choose a font from the Google Library. For example, let's try to take a very popular Open Sans..

Then you need to choose the font style - normal, greasy or italic. You are able to do it yourself :)

After you choose styles, Google will give you a snippet code. Our looks like this:

In addition, we got CSS style:

font-Family: "Open Sans", Sans-Serif;

Now it's time to open the Functions.php file (path to the file: WP-CONTENT / Themes / Yourtheme). At the end of the file, add a new feature:

fUNCTION LOAD_FONTS ()
{
WP_REGISTER_STYLE ("ET-Googlefonts",
"http://fonts.googleapis.com/css?family\u003dopen+sans:300italic,400,500,300"); WP_ENQUEUE_STYLE ("ET-Googlefonts");
}
Add_Ction ("WP_PRINT_STYLES", "Load_Fonts");

The key of this feature is the "wp_enqueue_style" command, which causes WordPress to call the font styles table in the header of each page. If you look carefully, you will see, we delete the HREF \u003d and REL link \u003d 'Stylesheet' Type'Text / Css', from the code that Google gave us, and you will need to do the same if you want to add any other Google font for your site on WordPress.

All you need to do now is to open the main CSS file and insert a style with Open Sans. There are normal rules here, so add the following code into the style sheet, save and update:

body.
{
font: Normal 1em "Open Sans", Sans-Serif;
Color: # 313131;
}

This style will work throughout the site. To individual text fragments you can set another style:

Bold-Text
{
font: Bold 1em "Open Sans", Sans-Serif;
}

As you can see, in fact, everything is very simple. Try and check the result :)

Despite the new web technologies and startups, until recently we lacked the rich and beautiful web typography.

Although we have a fairly wide selection of headsets, we could only use a certain set of proper fonts installed and supported by most computers - these fonts were known as - Secure Web Fonts (Web-Safe Fonts).

Web typography against printed printing house

When creating content on traditional media (newspapers, magazines, books) in the use of typography, only creative potential limits you.

But now, the separation between printed and virtual carriers is reduced. Now @ font-face support many modern browsers (including Internet Explorer From version IE4.0.).

Introduction to Google Font API

Google Font Directory and Google Font API are free web services from Googlethat provide site owners with the opportunity to use various fonts simple, convenient and efficient way.

Google Font API - a new representative of the niche, which includes Typekit., TYPOTHEQUE. and etc.

So let's go into the unexplored potential Google Font API.

What is Google Font API?

You traveled a lot on the Internet, but have you seen non-standard fonts on many sites or blogs?

Let's determine non-standard fonts that are not among the safe ( Arial, Helvetica., Verdana., Georgia. and Times New Roman.).

Google Font API - This is a web service providing high-quality open (Open Source) fonts that can easily be used in your design.

We hope that collection of fonts It will continue to grow so that we have an even greater choice of various headsets.

Benefits of using Google Font API

If you still decide whether to use Google Font API, here are some of its advantages.

Using HTML Text

In contrast to the use of images or replacements with CSS. Background-image, using @ font-face, as solutions for a more attractive web typography, more favorably in terms of plan SEO..

In addition, you will not need to change the existing content - you only update your CSS. Tables.

Availability

As you use HTML Text, not an image or background CSS.This does not affect people using programs for on-screen reading.

Reliable infrastructure and reduced load on your server

Since downloading your @ font-face uses reliable infrastructure GoogleYou can be sure that the font file service will be rapidly, and you can reduce the load on your own server.

How to use Google Font API

You do not need to be a professional web developer to use Google Font API. All you need To do is add one Stylesheet Link item to your page, after which you can start using this font in CSS..

Here is a generalized process of use Google Font API:

Step 1: Adding a link to a style sheet with selected font

To start go to collection of fonts GoogleTo see which fonts are available for use. Here is the main format for inclusion of a specific font:

If you need a font for one-time use, you can declare the style of one row.

Step 3: Always have a spare option.

You may not pay attention to the fact that in previous code fragments we used SERIF as a spare font. This is done in order to avoid any unexpected results. This means that if with servers Google Something is wrong, the browser can use his standard font Serif.. Make it with a habit when you use the font-face attribute, it does not matter whether you use @ font-face or not, always specify additional fonts - this technology is called font sets.

Example of using Google Font API

Copy and paste the following block code into your HTML Document, save it, and then open in your browser.

We suggest testing your HTML Document in various browsers, so you can see cross-browser differences (or their absence).

You can experiment with different fonts, but for example, we used the Lobster headset.

< html >

< head >

< link rel = "stylesheet" type = "text/css" href \u003d. "http://fonts.googleapis.com/css?family\u003dlobster">

< / head >

< body >

< h1 > Six Revisions is beautiful!< / h1 >

< / body >

< / html >

Result:

Request for using multiple fonts with Google Font API

Let's say you need three fonts from Google Font Directory.. Do not make many requests. Multiple requests increase the number Http. Requests. Less quantity Http. Requests reduces web page response time.

Instead of a multitude of Stylesheet Link tags, use the following format for the HREF property of one StyleSheet Link tag.

Example below will load all three fonts ( Vollkorn., Yanone. and Droid Sans.) Using one request.

Vollkorn. | Yanone. | Droid + Sans.

Now you can use any of these three fonts in your styles.

What should pay attention to

Separate font names using | without spaces. Pay attention to the use of + in font Droid Sans.. Use the + symbol in the font names instead of a space.

Tip: Using too large number Fonts in one query can increase the response time of the page. Load only those fonts that you really need. Be conservative.

WEIGHT and STYLE Fonts Fonts Font API

Weight fonts also have various WEIGHT / STYLE parameters. To use them, add to the font name of the colon (:), and then specify STYLE and WEIGHT.

In the example below we indicate bold. and bold-Italic for Vollkorn., I. italic for Inconsolata..

http: //fonts.googleapis.com/css?family\u003dVollkorn: b.,bI| Inconsolata: i.| Droid + Sans

What to pay attention to

Use the colon (:) without a space after the font name, and then specify the name of the style (i.e. bolditalic) or the corresponding reduction (i.e. Bi). If you need many varieties of one font, divide them with a comma (,) without spaces.

Google Font API makes a web typography more attractive

The web design industry is actively looking for a solution to the old problem of choosing and using web fonts, and, like, @ Font-Face is a response.

Of course, there are different plugins in order to use the Google Web Fonts fonts on your WordPress site, however, if you are developing your own topic, then you may need to close the typography with it by you, bypassing the plugins. Below we will show how to use Google Web Fonts in your theme.

First, let's go to the site Google Web Fonts. And choose the font that we need to apply in the subject. With the help of special tools located on the left side, you can narrow the search area, since fonts are really a lot. I knew that I had a fat serif font for headlines and blog names, so I chose Serif in the Categories drop-down menu and then moved the Thickness slider (thickness) to the right.

As a result, the 617 options offered to me smoothly dropped to 5. You have quite a lot of options to perform preview Fonts - you can see how the word will look like, offer, text paragraph or poster in the selected font. You can select a predefined text, you can specify your own text, select the desired font size.

Once you have found the font that you want 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. If you can do it, it does not mean that you should do it. Try to limit yourself with a maximum of three fonts. And even better two. For reasons, I still like to use an outdated web safe font for the main text text and save web fonts for headlines and other elements that require special expressiveness or attention to yourself. Commier about the clarity of your fonts - you should not use a catchy font if your visitors cannot disassemble what is written.

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

After that, you will move to the screen on which an instruction consisting of four steps will be presented. From it you will learn how to use fonts. If you wish to download selected fonts to use them in a graphic editor to evaluate them or make an attractive screenshot of screenshot.png for your topic, then you just click on the download button at the 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 choose the styles and the thickness of the plug-in. In the second step, you can choose a set of characters you want to connect. You can also evaluate how your collection of fonts will reflect on the speed of page loading.

Now we go to the third step, which is no longer as simple as the previous ones. In the third step, we get the code you need to add to our sites - three different options. We select the Standard option - however, we will somnake somewhat from Google's instructions in order to support the established methods for adding styles to Wordpress themes. In the code for the standard version, copy only the URL, which is specified as the HREF attribute for the LINK tag.

Then open the Functions.php theme file. We will create a feature to download CSS, which we will use in our topic:

Function GGL_LOAD_STYLES () ()

See GGL prefix from my function? This is one of the successful WordPress practitioner. Always add a prefix to the names of your functions in WordPress to reduce the risk of conflicts with other functions in your topic, a subsidiary or plug-ins.

Now in this function we need to register our table of styles received from Google:

Function GGL_LOAD_STYLES () (if (! Is_Admin ()) (WP_REGISTER_STYLE ("Googlefont", "http://fonts.googleapis.com/css?family\u003dholtwood+one+Sc|Rouge+Script");))

We use the WP_REGISTER_STYLE function. The first argument is a descriptor, i.e. A reduction that we can use to appeal to this stylist table in the future in our code. The second argument is the path to the file. We use the URL that we received in the third step of Google-instructions.

Next, we connect our basic style table for our topic. I hope you did not place the LINK tag in the Head section of your header.php file? If so, then go back to the file and delete this code. Then plug in the style table in the Functions.php file:

Function GGL_LOAD_STYLES () (If (! Is_Admin ()) (WP_REGISTER_STYLE ("Googlefont", "http://fonts.googleapis.com/css?family\u003dholtwood+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 tie a descriptor to our stylist table. Then get the way to our style table. Fortunately, in WordPress, you can get the path through the get_styleSheet_uri () function. After that, we indicate dependencies. Our Style.css file depends on the Google Web Fonts style table.

Finally, we use the WP_ENQUEUE_Scripts Hook to call our function:

With the Functions.php file is finished. Now we have left to make the last step to use the selected font. Fourth Step B. google's instructions Shows what values \u200b\u200bwe must pass to the Font-Family property to use our font. I want to do all my headlines with HOLTWOOD ONE SC:

H1, H2, H3, H4, H5, H6 (Font-Family: "HOLTWOOD ONE SC", SERIF;)

And I want to make a description of the site, I want to make a ROUGE Script font:

Site-Description (Font-Family: "Round Script", CURSIVE;)

Everything! No more do nothing! You have added Google Web Fonts fonts to your WordPress theme. Use them responsible!