Custom fonts in Blogger for blog design. How to install a custom Cyrillic font in WordPress

Finally got my hands on it how to change website title font. I don’t like complex things, so I always simplify everything as much as possible. I offer you a simple, fast and not requiring deep knowledge of HTML way to change the font, size and color of the title of your site.

Just three lines in the editor, and you will get real pleasure from your own creativity on the site. In addition, if you use a free template, the site will begin to acquire individual features.

Precautions for those who are not sure

Let's decide first? that we are talking about WordPress themes (templates). If your blog theme is installed on this engine, then this article is for you.
If you are not confident in your abilities, it is better to experiment on a test subdomain first. Once you are confident that you are capable, you can transfer the skill to the main site. However, the actions that are required in order to change site title font, are so simple that it’s difficult to mess up there. Personally, I always do everything on the test test first. A little more time, but more reliable.
If the site is still broken, read >>. But if everything is done carefully, no disasters will happen.

A line of code may look different in different templates. To clarify how in your template, read the article. There is a detailed video on how to find any line of code, after which you can make almost any changes to your website template. This skill will free you from the need to rummage through codes and give you a free hand.

If you can’t figure it out yourself and want to find a good freelancer who understands codes, then the article about there is a useful link where to go if something happens.

Instructions for changing the font in the site header

And if you don’t have time to figure it out, but you want to do it faster. For everything, we will need our website and the word program (for selecting the font).

Log in to the admin panel of your site. Next, in the left sidebar we find Console - Appearance - Editor.
On the right side we find List of styles (style.css) and open it.
The site's header is header h1. Located near the beginning. To avoid searching with your eyes, you can press Ctrl+F - a search bar will appear. Type in search. For me this part looks like this:

Top square: font change line.

Bottom square: font size change string.

Later we will change the font size and color if necessary.

How to change the site title font

Now we open a blank Word document, copy the name on the main page of the site and transfer it to a Word document, select it and start playing with different fonts. They are located on the top panel in the left corner. Why is it convenient to do it in this program? Because all font changes in your title are immediately visible. Choose a font that will match the name of your site. A font that you will definitely like. Once selected, copy the font name into Worde.
We return to the site’s admin panel. In the line for changing the font (in the figure - the upper blue square) we enter the name of the selected font instead of the default one.
At the bottom of the page, click “Update File”.
Let's go to the site and see if the font fits well in the general context. If not, go back to Word and select another one. All.

How to change site title font size

This is done in the same editor template. In the picture above there is a second blue square. All you need to do there is to put different numbers - the font will become larger or smaller depending on what you need. We save the changes, go to the site and see if everything suits us.

How to change the font color of the site title

This is done there. There is a line in the next block after where we changed the font itself and its size. It looks something like this:

To select a color, you can use one of the theme options: Console - Appearance - Background. In the “Background Color” line, you can select a color, copy its alphanumeric value and paste it instead of what it was (in my case #11006a). Save changes. Let's go to the site and admire it.

So to change font, color and size, you need to make changes in just 3 lines of the editor. With little skill it takes very little time.

Nice, easy to read title

consistent with the general spirit of the theme,

will make your blog more attractive and memorable.

Experiment, choose what you like!

P.S. When I make even minor changes to the theme editor files, just in case, I copy the entire changed text into Notepad - into the folder where the zip of the theme installed on my site is stored. In the event that the site suddenly breaks down and the need arises to reinstall the theme, I have saved all the files changed to my taste. All that remains is to transfer the files to the appropriate folders on the hosting when reinstalling WordPress or the theme.

In the following articles, as I transform my blog, we will just as easily change the background color, heading fonts in categories, articles, the color of links - in a word, any elements

Google API fonts are a great opportunity to give your blog a new and polished style. At the moment there are 501 fonts in the set, of which 35 support Cyrillic. The main thing when choosing a font is readability and compatibility with the rest of the blog.
Settings
For example, I chose the font "Marck Script".

1. Go to the catalog and choose a font. You can find the entire font catalog here: google.com/webfonts

Choose the character sets you want:

Latin (latin)
Latin Extended (latin-ext)
Cyrillic (cyrillic)

Select "Latin" and "Cyrillic". I advise you not to choose the other options, since in this case the page will take a long time to load, and sometimes the font simply will not work.

3. In the third point you will see the code that will need to be inserted into the blog, but after a little modification. For example, for my font this code is intended:
This code must be modified for it to work correctly on the blog.

3.1 Add "/" at the end of the code before ">", and also if your code contains this symbol - "&" replace it with "&".

Installation

1. Log into your blogger.com account.
Next go to Design ---> Edit HTML

2. Using search (Ctrl+F) you will need to find this line in your template:

3. After it, add the font code and save the template.
Usage

You can use the installed font anywhere on your blog. For example, if you want the “site name” to have this font, then you need:

1. Go to Design ---> Edit HTML

2. Use search (Ctrl+F) to find this line in your template:
header h1

#header h1 (
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.1em;
}

2.2 If your "header h1" code does not have the font-family line then add it:
font-family:Marck Script, Georgia, serif;

2.2.1 Instead of "Marck Script" - put the name of your font. The name can be found on the font page, in the fourth paragraph.
2.3 That's it. You can also try adding the font in other places on your blog, for example in the "sidebar", "post-body" or "post h2".

Irina Kudryavtseva

Justus showed one option, I would like to see other possible fonts!

https://www.blogger.com/profile/03714046357448661094

Irina Kudryavtseva, unfortunately this is the only “non-standard” font that I came across (on Blogspot). If anyone knows other fonts, I’d be happy to check them out!

S.A.A.

Is it possible to change the font in batches, that is, in all messages at once? Otherwise, with a thousand messages before retirement, you will have to redo the messages.

S.A.A., need to think! Give it until tomorrow!

https://www.blogger.com/profile/13746790384341325111

S.A.A.

Persuaded. But only one day. ;)

https://www.blogger.com/profile/06106872544132460143

S.A.A., your request has been completed! At the end of the post I posted an installation manual. The simple solution didn’t work, you’ll have to dig deeper into the template! In addition, it is not known how this will affect the overall design of the blog?

https://www.blogger.com/profile/13746790384341325111

MagentaWAVE

"unfortunately this is the only “non-standard” font that I came across (on Blogspot). If anyone knows other fonts, I’d be happy to check them out!"
I will allow myself the audacity to spam the link,
http://www.magentawave.com/2013/01/connect-and-use-web-fonts.html
Just recently I was fighting about these matters,

https://www.blogger.com/profile/05069681985675276048

MagentaWAVE, Thank you, I’ll post your link at the end of the post for experienced readers!

https://www.blogger.com/profile/13746790384341325111

S.A.A.

Thanks, but it’s a little scary after the warning “how will this affect the design of the blog.”

https://www.blogger.com/profile/06106872544132460143

S.A.A., I meant that in addition to the text, the font will end up somewhere else! Where...? This will only be visible after installing the code! I don't think it will be worse. Either way, you can get it all back!

https://www.blogger.com/profile/13746790384341325111

Marina Kouyarova

Thanks for the tip. If you change the font in the code to any one supported by the template, then the fonts can be changed, for example, in gadgets (which is what I did :))

https://www.blogger.com/profile/05106932572444773407

OLEN SAVITSKAYA

Excuse me, please, the teapot itself, but where is the text editor? I don’t see it point-blank...and where is the HTML of the template - is it there-where-when I clicked on -template-next-edit HTML? but if it’s there, I don’t see at all about what you’re writing about, well, what’s this, nothing works for me... and the leaves fell, and now they haven’t fallen for the second day... where did they go? !

https://www.blogger.com/profile/04422214255958505740

OLEN SAVITSKAYA, For example, I typed Google and immediately found an article for you with a video:
http://mlmvsem.blogspot.de/2012/01/blogspot.html

https://www.blogger.com/profile/13746790384341325111

Kristina Azarova

Where have you seen such tags! If you write a flock, then write that for standard templates, in self-written ones there is nothing like that, and it will not work.

https://www.blogger.com/profile/05518665193214781905

Kristina Azarova, tags are taken from standard templates and they ARE there, but finding them in the new “Edit HTML” is very difficult!

https://www.blogger.com/profile/13746790384341325111

Vladimir Televnoy

The site has a selection of web fonts, but I still don’t understand how to use it, http://www.google.com/fonts/

Vladimir Televnoy

If only you had suggested it. The site makes links and scripts, but what and where to insert...

https://www.blogger.com/profile/16497829425382739102

Irina Busurmanova

I want calligraphic handwriting, but this is simply HORROR for a teapot!

https://www.blogger.com/profile/10826754143079211427

For many years, Internet users, as well as website creators, suffered from the fact that they could only use a few fonts on their resources.
Today Google launched a new service “Google web fonts” with the slogan – “Making the Web Beautiful!” (Making the Web beautiful). This service will help you use various fonts from Google directories on your blog or website without any registrations or signatures. The use of fonts has no restrictions. Make your blog more beautiful right now. So let's get started...

Step 1: Save a backup copy of the template.
This step almost always comes first before any changes are made to the body of the template. To do this, go to the blog settings, Tab Design/Edit HTML and press the button download the entire template .
Step 2: Select a font.
To do this, go to the Google Font Directory and select any one you like.

Step 3: Get the font code.
In this article I will use the font “Tangerine”, which I liked the most. In order to get its code, click on the name and a new window will open! In it you need to click on the “Get the code” tab

Step 4: Add code to the template body
Now you need to copy the provided code and paste it into the body of the template. The code must be inserted immediately after the tag:

The pasted code should look something like this:

It should be noted that before the closing tag you should put this slash “/”, so the top code will look like this:

/ >

Copy this code and paste it as already mentioned after the tag:
The font code should go immediately after the tag , otherwise problems may arise when viewing fonts in Explorer and FireFox.
Next, click save template.

The code has now been added to your template.

Step 5: Add CSS code to your template.

The final step. You should add the following code where you want to change the font in the body of the article. To do this, you will need to go to the section when writing an article “Change HTML.” Then for the sentence in which you want to change the font, insert the code:

, serif;">Your text

Instead of “Font name” writes the name of the font you chose

Instead of “Your text”, writes the required text.

If you want to change the font:

Blog names;

Title of the article;

The text of the entire article;

Text in sidebars.

Then you need to add CSS code for them too. Don't worry, it's not difficult at all.

1.To change the font of the article title, find the following tag in the body of the template:

These are the main types of common CSS code for blog post titles. Next, you need to add or modify the following tag below if it is already in your template:
Will change “Name of your font” to the name of the font you chose in step 2. In general, the code after modification should look something like this:

.post h3 (font-family: "Your Font Name"; )

For other fonts, look for the following tags: -Blog title: h1 -Article title: post h3 or .post-title -Article font: .post-body -Sidebar: .sidebar h2 If you want to change the font in these 4 positions, look for, their tags in the template, and then, as when changing the title of the article, insert the tag:

font-family: "Name of your font";

after him. It is worth noting that in some templates the heading tags may differ, so you will have to look for similar tags

How to change the font on your website? How to connect publicly available fonts from the Google Fonts library, but what if the font is exclusive? If the questions are relevant to you, read on

Font formats

Similar to other file types, fonts come in different formats. There are several dozen of them in total, and the most popular ones used on the network are TTF, EOT, WOFF and SVG. However, each is supported only by certain versions of the software.

In addition to belonging to specific systems, they differ in character rendering technology and compression method. The size of the resulting file depends on the latter, which directly affects its loading time, and therefore the page display speed. This is only critical when installing a new font, since after downloading the file containing it will be stored in the cache. At the moment, when implementing a specific font on a site, you need to prepare all these font formats: TTF (or OTF), WOFF,EOT and SVG.

Connecting Google Fonts

In order to make it easier to work with fonts, Google created the “Fonts” service, which presents several hundred fonts, including dozens of Cyrillic ones.

After selecting the required fonts, and there may be several of them, the service generates a minimized window with the “standard” and “import” modes, each of which has two types of code:

add special line to the title of the HTML document between the tags + write the required combination in the CSS file;
or write another line between the tags