Blogger template online: change font size for posts
Alainbib
-
Alainbib -
Alainbib -
Hello,
I downloaded a template online to use with Blogger. I am desperately trying to change the font size for all of my posts (articles) on my newly created blog. The downloaded template does not allow for easy modification of the font-size. There is no support from the provider. Currently, the normal text is 14 px and I would like it to be 16 px. I do not know CSS, and it seems I need to add a CSS file to change this. Can you help me?
Thank you very much.
I downloaded a template online to use with Blogger. I am desperately trying to change the font size for all of my posts (articles) on my newly created blog. The downloaded template does not allow for easy modification of the font-size. There is no support from the provider. Currently, the normal text is 14 px and I would like it to be 16 px. I do not know CSS, and it seems I need to add a CSS file to change this. Can you help me?
Thank you very much.
7 answers
Hello,
In Blogger, there is the option to modify the font size in "Theme - Customize - Advanced - Page Text."
If your theme does not allow modification through a form, you should still have the option to add CSS in "Theme - Customize - Advanced - Add CSS file."
In this section, you can add CSS code, for example,
In Blogger, there is the option to modify the font size in "Theme - Customize - Advanced - Page Text."
If your theme does not allow modification through a form, you should still have the option to add CSS in "Theme - Customize - Advanced - Add CSS file."
In this section, you can add CSS code, for example,
body, p, a { font-size: 16px; }
The simplest thing would be to use the customization form.
Otherwise, you can try:
body {
font: normal normal 16px;
}
--
Hang in there, the end of the tunnel is not far, just turn around.
Otherwise, you can try:
body {
font: normal normal 16px;
}
--
Hang in there, the end of the tunnel is not far, just turn around.
Hello,
I did some more tests on my blog.
In the source code of my blog, in the CSS section, there is:
If in the "Add CSS file" option, I add:
it works for my blog, let's see for yours.
--
Hang in there, the end of the tunnel is not far, you just need to turn around.
I did some more tests on my blog.
In the source code of my blog, in the CSS section, there is:
/* ----------------------------------------------- Blogger Template Style Name: Simple Designer: Blogger URL: www.blogger.com ----------------------------------------------- */ /* Content ----------------------------------------------- */ body { font: normal normal 16px 'Times New Roman', Times, FreeSerif, serif; color: #444444; background: #666666 none no-repeat scroll center center; padding: 0 40px 40px 40px; } If in the "Add CSS file" option, I add:
body { font: normal normal 26px 'Times New Roman', Times, FreeSerif, serif; } it works for my blog, let's see for yours.
--
Hang in there, the end of the tunnel is not far, you just need to turn around.
My template seems quite different from yours... I'm reproducing a few lines of the theme code that explain my difficulty, I believe (I'm really not a pro at css!). It uses a Google Fonts with specific families, and I don't see anything like yours for normal font codes.
<!-- Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Playfair+Display:400,400i,700,700i' media='all' rel='stylesheet' type='text/css'/>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
...
/*-- Body Content CSS --*/
body{background-color:#fff;font-family:$(body.font);font-size:14px;font-weight:400;color:$(body.text.color);word-wrap:break-word;margin:0;padding:0}
.row{width:1000px}
What do you think?
<!-- Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Playfair+Display:400,400i,700,700i' media='all' rel='stylesheet' type='text/css'/>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
...
/*-- Body Content CSS --*/
body{background-color:#fff;font-family:$(body.font);font-size:14px;font-weight:400;color:$(body.text.color);word-wrap:break-word;margin:0;padding:0}
.row{width:1000px}
What do you think?
I find this good:
It should be possible to either modify the CSS file or add the CSS code using Blogger's tool:
/*-- Body Content CSS --*/ body{background-color:#fff;font-family:Lato, sans-serif;font-size:14px;font-weight:400;color:#090909;word-wrap:break-word;margin:0;padding:0} .row{width:1000px} It should be possible to either modify the CSS file or add the CSS code using Blogger's tool:
/*-- Body Content CSS --*/ body{background-color:#fff;font-family:Lato, sans-serif;font-size:16px;font-weight:400;color:#090909;word-wrap:break-word;margin:0;padding:0} .row{width:1000px}
In the zip archive you downloaded, there is the file Sorella Free Version.xml
You need to create a backup of this file.
Then, open it with a text editor and modify line 47:
Save the changes, then import it into Blogger.
You need to create a backup of this file.
Then, open it with a text editor and modify line 47:
body{background-color:#fff;font-family:$(body.font);font-size:14px;font-weight:400;color:$(body.text.color);word-wrap:break-word;margin:0;padding:0} Save the changes, then import it into Blogger.
Hello,
I have examined the content of the Sorella Free Version.xml file from the theme, there are indeed other "font-size" properties than the one on line 47, but they only relate to specific parts of the site.
For me, it's definitely the one on line 47 that needs to be modified, I don't see why it's not working.
--
Hang in there, the end of the tunnel is not far, just turn around.
I have examined the content of the Sorella Free Version.xml file from the theme, there are indeed other "font-size" properties than the one on line 47, but they only relate to specific parts of the site.
For me, it's definitely the one on line 47 that needs to be modified, I don't see why it's not working.
--
Hang in there, the end of the tunnel is not far, just turn around.
Hello dugenou,
I completely agree with you, it's quite incomprehensible... I also went through the file from start to finish... I tried several attempts on my end, in HTML, CSS... without success... it seems that changing the font size, with a so-called "responsive" template that contains Google Fonts with adaptive characters (that adjust according to the type of device used) is more complex than making modifications with simple traditional fonts like those found in a basic Blogger theme... is it because there is no definition of "variable" for the font in the settings at the beginning of the file, like for the colors which can be modified... anyway, I don't know anymore... I'm out of resources... this exceeds my basic capabilities and knowledge...
In any case, I thank you infinitely for your generosity, your technical and moral support :-), the time you took to try to help me.... I really appreciated being able to exchange and share with you.
I completely agree with you, it's quite incomprehensible... I also went through the file from start to finish... I tried several attempts on my end, in HTML, CSS... without success... it seems that changing the font size, with a so-called "responsive" template that contains Google Fonts with adaptive characters (that adjust according to the type of device used) is more complex than making modifications with simple traditional fonts like those found in a basic Blogger theme... is it because there is no definition of "variable" for the font in the settings at the beginning of the file, like for the colors which can be modified... anyway, I don't know anymore... I'm out of resources... this exceeds my basic capabilities and knowledge...
In any case, I thank you infinitely for your generosity, your technical and moral support :-), the time you took to try to help me.... I really appreciated being able to exchange and share with you.
Thank you for responding quickly to my request. I really appreciate it!
I followed the proposed procedure... I noticed some changes... but not exactly what I wanted... some font sizes were changed on article titles (smaller) on the homepage, on the author of the article (larger), and on text with links (larger), but not on the normal text overall! I would even say that the text seems to have changed font (from black to gray). Phew, not easy to understand for a layperson like me!
If you could clarify things for me, please!
Alainbib