Non-standard web fonts in layout. Google fonts and webfont. Connecting CSS fonts. Working with web fonts. Google Fonts Including fonts from google fonts css

Learning about everything on your own is not easy, but very interesting. If you have at least a superficial understanding of how the site works, then to implement your project it is better to do it yourself. In doing so, you will not only save a lot of money, but also learn a lot of "chips", secrets, etc. Using Google fonts usually does not attract attention, although they can make your blog much more interesting thanks to them.

Service

Quite a long time ago, a large web font service appeared on the Internet. It was designed by Google... Users could use it for free. Despite the fact that this type of setup is not considered super difficult, there were still people who made mistakes and could not cope with the service.

A simple design was specially developed for this. Google Fonts are now easier to work with and more visitors. The library has also expanded. Last year, a redesign of the service took place, which collected a lot positive feedback... It is now easier for people to connect and browse fonts to their sites.

Appearance

So, for those who have never been to the site with the old design, you need to get a general picture of the changes. The service looked pretty massive in the past. Everywhere there were thick frames, catchy blue buttons, graphics were not of the highest resolution. All this greatly influenced the visitor.

Now the developers have focused on Material Design. Everything has acquired sophisticated features. Appearance became "easier". Subtle animation and interactivity became noticeable. Nothing distracts attention from choosing the right Google Fonts anymore.

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

Opportunity

Designers often use this service. Despite their experience and professionalism, they also work with visualization. The redesign presented more such opportunities, which would allow you to combine in advance what will need to be implemented later in your project.

Therefore, the problem with how one font is combined with another color and a third background disappeared. The company added to the website more tools and a palette with universal tones that would allow you to experiment and find out how a particular font would look in a particular color.

Favorites

The Google Fonts service provides users with a selection of their favorites. A special tab contains a set of styles that the developer recommends for use. These collections stand out from the rest. They are developed by experts from Google and third party agencies. Most of them have a certain style and a particular philosophy.

View

One of the important changes directly affected the choice of fonts. It means that earlier the user saw in front of him a certain drawing with additional buttons and a large blue, which added the font to the collection. In general, this option looked good, but the box did not always have a sufficiently good resolution of the picture with the style, and therefore it was difficult to determine unambiguously how the font would look.

There were questions about these additional buttons, about which little was known at first glance. It was necessary to either direct them or use them. Now everything has become more or less clear. Additional features have appeared:

• Select a specific sentence, paragraph, or your own text element.
• Experiments with font weights.
• Quick adjustment of sizes using the slider.

By the way, Google font resizing is now more responsive as only one example changed, not everything on the page. V old version users could be transferred from one side of the page to the other, and in the new one you simply remain on the example that you are adjusting.

Connection

If you are ready to use this service, you can try connecting fonts to your resource. The very process of getting a link is universal. Problems may arise depending on your CMS system. Each one uses its own methods. Therefore, for different projects, you will have to select separate options.

We'll look at how to get a link to connect Google fonts. You need to go to the official site Google Fonts. There you browse through the styles catalog and choose the one that best suits your needs. To do this, click the plus sign next to it. After that, the font will be added to a special block at the very bottom of the page.

Click on this block and then customize it. Here you can select styles and the desired alphabet. If you need Google Cyrillic fonts, then check the Cyrillic line. After that, a link will be generated. It can be found in the same window on the Embed tab. You just need to copy it or use it full code HTML.

Usually in the site settings there is a setting for fonts and colors. There are standard options, and you can add advanced ones. They contain a separate option for Google Fonts. If yours then need to download fonts via the Supreme Google Webfonts plugin.

Popular options

It is difficult, of course, to judge which styles are best, especially for different site themes. When creating your site, remember that you should not like it, but your audience. Therefore, it is better to take a closer look at competing sites.

Usually for commercial resources nobody bothers about styles. After all, if you see the font in Google chrome in an online store, you are unlikely to dwell on it. But if you have a blog in front of you, then, most likely, you may like something, but something, on the contrary, will be annoying.

Google Fonts has prepared many collections that include popular styles. For example, they like to use Lobster for individual blocks in the text. It is difficult to read if the entire article is written in such bold italics. But inserts and quotes look good.

Bad Script is also an option for blogging. Italic type is heavy to read large arrays text, but they can highlight the main idea. The style mimics handwriting. Jura normal 400 is an interesting variant for the Cyrillic alphabet. The author claims that this is a Eurostyle from the Sans-Serif family. It looks really good and has several variations.

Sponsor of the material.
Air conditioners in the online store http://www.technodom.kz/catalog/konditsionery. Air conditioners - best goods, lending, huge selection, impeccable service.

Good afternoon, dear readers. All of you probably dream of making your own or client's sites more concise and attractive.

One of the main factors that is responsible for the perception of information on the site are fonts and how we use them together. Since on one site, two or more types of fonts are most often used, for example, for headings and just body text.

One of the possibilities to visually improve the readability of texts is to connect third-party fonts. After all, everyone probably knows how "poor" standard collection Cyrillic fonts in Windows, which is responsible for displaying text in the browser.

Standard fonts:

Cufon and @ font-face

Earlier I already wrote about, with which you can connect non-standard fonts to the site. Now let's look at an easier way - this is the @ font-face rule in css and loading the font itself from the Google Fonts store.

The whole difference between Cufon and @ font-face is that the former uses js to emulate the font and draws symbols by its own means, while @ font-face downloads the font itself to the visitor's computer and the browser already uses it to display the text.

In any case, Cufon and @ font-face slow down site loading speed, albeit not significantly.

Use of Google Fonts on the site

I will not paint a lot and for a long time, I will give a specific example of connecting Google Fonts, using this blog as an example.

As you can see, my article titles and subheadings are made in a non-standard font, so now in practice I will show how to do this, and you will try it on your sites by analogy.

Choosing a font in the repository

In order not to get scared, I will explain - a repository is a repository, but in a bourgeois way :). And so, we go to http://www.google.com/fonts/ and look for a suitable font for ourselves:

Not much on the menu:
On the left, as you can see, there is a block with all kinds of font search filters, in which you can select, for example, only Latin or Cyrillic fonts. And on top, settings for displaying examples, which are divided into 4 tabs:

• Word- display of several letters. In this mode, it is convenient to compare many fonts at once and see how specific characters look;
• Sentence- display in the form of one sentence;
• Paragraph- a large piece of text is displayed, which will allow you to visually compare the font already in the text itself;
• Poster- headings are displayed, this method of comparison is convenient for choosing the font that will be used in headings.

Connecting the font to the site

After that, in the Collection panel, which is at the bottom, go to the Use tab, which is responsible for using fonts from your collection. Here you will immediately see that Google shows how much the page load speed will deteriorate:

Below is a panel with a choice of "display type", select Latin (latin) and Cyrillic (cyrillic), which will give us the ability to display both Latin and Cyrillic letters:

After that, we move on to the third item on this page, namely the connection itself. Google offers us three options for embedding their fonts - via js, standard way via connection to and @import in css file. I am using the latter method.

Open your css file and write the line that google provided us:

That's it, we connected the font from Google Fonts to the site, now how to use it?

Usage in CSS

Everything is quite simple, after we have connected the font via @import, we need to write standard instructions for those classes and indicators for which our new font will be used. For example:

h1, h2, h3 (font-family: ‘Cuprum’, sans-serif;)

After all these manipulations, you will have headers with a new, non-standard font.

That's all, thank you for your attention and see you soon.

The font plays an important role in the design of the site; it can emphasize the general style, help the user navigate the text content. Search for free fonts, and then include a bunch of files for different browsers- this is not grateful, but there is a way out - fonts from Google Fonts.

Finding the right font from Google Fonts

Let's go to the Google font service itself and take a look at its capabilities.

In the left (side) panel, you can configure the font filtering parameters and, most importantly, select whether it belongs to the Cyrillic or Latin alphabet.
In the upper part, you can change the display of the demo text, in the form of: word, sentence, paragraph, poster. Change the font size and enter your own text instead of the demo version.

Connecting a font from Google Fonts

After you have selected the desired font, click on the "quick-use" button (see the picture below)

On the font connection page, you need to select:

1. Font styles, bold, italic, etc. Do not overclock too much, choose only the most necessary, because all this affects the speed of loading the font and, accordingly, the speed of loading the text on your site. Follow the indicators of the sensor on the right (point 5 in the picture)
2. Choose what characters you need in this font (mainly Latin and Cyrillic).
3. Copy the code of the link tag into the HEAD block
4. We use the declaration of the font in the styles as shown in paragraph 4 (see picture)

A great source of fonts for web designers. V WPBv4 started using a popular font combination Google font: headsets Oswald and Lora... Several users have asked questions about whether Google fonts can be used in WordPress themes and how to do it. This article will show you how to add Google Web Fonts to WordPress themes. right without affecting the performance of your site.

Looking for Google Web Fonts you like

First you need to find the fonts from Google that you like. Look for options in the font library called Google fonts library... Once you find a suitable option, click on the button Quick-use:

After clicking on this button you will find yourself on new page... Scroll until you see a form titled " Add this code to your website":

Copy the code and paste it into notepad, we will use it later. Usually at least 2 different fonts are used. For example, in our practice we used fonts Oswald + Lora... So the above procedure must be repeated for the second font as well.

Adding Google Web Fonts to WordPress Theme

There are three main ways to add Google fonts to your website. For example, there is a standard path, a way to import @import and adding with Javascript... Usually one of the first two methods is used.

The easiest way is to open your theme file style.css and paste in the following code related to the added font (remember, we copied it into notepad in the first step):

@import url (http://fonts.googleapis.com/css?family=Lora); @import url (http://fonts.googleapis.com/css?family=Oswald);

Many do this ( StudioPress, Genesis). But, nevertheless, this is not quite the correct method for adding open fonts. Method usage @import blocks parallel downloads, as a result of which the web browser will first download the file with fonts to the end and only then continue to download the rest of your website content. Therefore, although this method seems convenient, it is not The best way for working with a font if you care about the speed and performance of your site. You can read details about these nuances. here.

The best thing would be to combine requests for different Google Fonts in one request to avoid excessive HTTP requests. Here's how to do it. Add the code:

@import url (http://fonts.googleapis.com/css?family=Lora|Oswald);

Even if you are forced to use @import, at least combine multiple queries into one.

How to add Google Web Fonts without sacrificing website performance

The best would be to use standard method which uses links rather than importing a file. Just take two addresses Url from the first step of this manual. Combine 2 different fonts by adding a character between them | ... Then put the resulting code in a block head your theme. To do this, you will have to edit the file header.php and add the code from the stylesheet to it. You should end up with something like the following:

the main goal is to add a request to the font early on. According to the project blog Google Web Fonts if there is a script tag before the font declaration @ font-face, then Internet Explorer nothing will render on the page until the actual font file is loaded.

After execution this step you can just use the resulting code snippet and font in the file CSS your theme. It will look something like this:

H1 (font-family: "Oswald", Helvetica, Arial, serif;)

There are quite a few child themes and frameworks out there. Not recommended modify the files of the parent theme, especially if you are using a framework; because the changes to the theme will be erased every time you update the framework version. You will have to work on add-ons and filters in the parent theme or its framework if you want to add Google fonts correctly to child themes.

For example, if you look at the page Blueprint, the team created the WPBv4 theme as a custom child theme from the framework Genesis... Let's see how to add Google Web fonts to a child theme based on Genesis.

How to Add Google Web Fonts to Genesis Child Theme

Open the child theme and its file functions.php and add the following code to this file:

Add_action ("genesis_meta", "wpb_add_google_fonts", 5); function wpb_add_google_fonts () (echo " "; }

The main thing to do is to look at the code inside the block genesis_meta... By default, there are parameters like META-descriptions, keywords, style sheets, favicons, etc. By specifying the priority 5 , we will make sure that the stylesheet is loaded before the main stylesheet is loaded.

Unfortunately, we cannot cover all the existing parent and frameworks that are out there. If you have questions about specific topics, please ask the theme developers and authors in the appropriate threads on the theme developers forums.

Our final tip regarding Google Web Fonts on your site: don't ask questions or experiment with fonts you don't intend to use. For example, if you only want normal and bold type, do not use or customize all the other possible styles for a particular font. Hopefully this post will help you properly configure and use Google Web Fonts on your WordPress site.

Hello everyone! You can read about that, I wrote in lesson 132. And in this article, I will tell you how you can quickly and easily connect a font to your site from Google Fonts. On the Google Font service, you need to choose a font for your site, and then connect it.

It is not necessary to upload the font file to the hosting. Enough to prescribe the HTML you want 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 your site

Go to Google service Font on 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 needed: thickness (font thickness), slant (italic), width (font width).

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

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

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

We choose " Quick-use"And see from right side widget in the form of a speedometer. It shows how fast the selected font is loading. The lower the number on this speedometer, the better.

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

Each option has instructions for English language how to properly connect the font to the site. I will show you the first option " standart"Because it is simpler.

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

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

If you did not understand anything at all what I told you here, then watch the video where I tell you in detail, How to connect Google Font to WordPress site

______________________
To lesson 204. but without a plugin