[eag1111]

Hello Friends,

I’d like to change the size and type of font I use in my pages but don’t know the CSS Code to do so.  Can anyone give me a CSS formula so I can insert a font and a size for the font? (I’m not sure which font type I’d like to use yet).  My site is womenfindingtruelove.com.

Thank you for your time.

 

[Sakin]

@eag1111: Currently it uses the font “Arial,sans-serif” and “Lobster” for site title.
To change the general font. You need to change it in the following css:

/* For All content */
body {
font-family: Arial,sans-serif; /* Type of Font */
font-size: 12px; /* Size of Font */
line-height: 24px; /* Line Height of Font */
}
/* For Site Title content */
h1#site-title {
font-family: 'Lobster, Arial,sans-serif';
font-size: 45px;
}


See this for tutorial on Font CSS: http://www.w3schools.com/css/css_font.asp and Websafe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp

[eag1111]

This is A+ information, thank you Sakin.  I’ll try it.

[adminleah]

hi Sakin, can we change the font size on the slider images only and not the entire font size of the rest of the text content?

[Sakin]

@adminleah: Yes you can. Send me your site URL and then I will check in.

[adminleah]

hello it’s test.shareapet.org

[Sakin]

@adminleah: The CSS will be as below. But be careful about the responsive design. This font size you added will be for all devices, including your mobile devices. So, don’t make it too big. But if you have to change only for large screens then let me know it.

/* For Slider Title Font Size */
#main-slider .entry-title { font-size: 18px; }
/* For Slider Excerpt Content Font Size */
#main-slider .entry-content { font-size: 14px; }

[adminleah]

Thanks Sakin. We are seeing large gaps on the left side column on our homepage test.shareapet.org and the body content. In some screen sizes, there is double main navigation header, while in some screens its just one line main navigation header. some menu items drop to 2nd line in some screens. is there a fix to this?

[Sakin]

@adminleah: It’s because you have added the width to 200px in your Custom CSS box. So, find the following CSS in “Appearance => Theme Options => Custom CSS” box.

@media screen and (min-width: 1190px) {
#header-right { float: left; }
#secondary { width: 200px; }
}

And replace with the following, where I have remove 200px width.

@media screen and (min-width: 1190px) {
#header-right { float: left; }
}

[BEAUVAIS]

HELLO
IS IT POSSIBLE TO Add A NEW FONT TO THE THEME? I WANT TO USE THE FONT BolonewtRegular,
THANKS

[Sakin]

@BEAUVAIS: BolonewtRegular font is not a Google font or web font. We can only add GPL Web Font or Google Font in our theme pack. If you have license of this font then you can use Font Embed and add it. You can use online web font generator at http://www.fontsquirrel.com/tools/webfont-generator

[kb]

Is there anyway I can change the header font size, that appears on posts and pages. I couldn’t figure out where to alter the css code. It’s the h2 (subheading style text) in particular.
My url is:http://ealing.streetpastors.org.uk/

Also is there a way of removing the top right text that displays the format of the post, e.g. “Image” or “Link”. Thank you

[Sakin]

@kb: It’s not simple to change the font size for responsive design theme. When we change the font size for large screen, we need to change all the way to small screens. To adjust the header font size of post and page, you need to adjust the size in the following css and add it in “Appearance => Theme Options => Custom CSS” box.

/* For Large Screen */
.entry-title {
    font-size: 26px;
    line-height: 1.5em;
}
/* For Screen with max width 768px */
@media screen and (max-width: 768px) {
.entry-title {
    font-size: 20px;
    line-height: 28px;
}
}
/* For Screen with max width 479px */
@media screen and (max-width: 479px) {
.entry-title {
    font-size: 18px;
    line-height: 24px;
}
}
/* For Screen with max width 320px */
@media screen and (max-width: 320px) {
.entry-title {
    font-size: 16px;
    line-height: 22px;
}
}

To remove the top right text that displays the format of the post, e.g. “Image” or “Link”, you need to add the following css in “Appearance => Theme Options => Custom CSS” box.

.entry-header .entry-format {
    display: none;
}

[kb]

Amazing thank you!

[Carla]

Hello Sakin,
I hope I can ask my question here.
I changed the fonts to Cochin in my catch evolution site (http://www.lechampradis.com/test/), but they don’t respond on my Samsung-android-tablet.
I tried it on Ipad, where it did show.
Could you help me with this?
Thank you very much in advance.
Carla

[Sakin]

@Carla: Please don’t post same question in 2 places. It just makes me confused. I have already replied you in http://catchthemes.com/support-forum/topic/changed-fonts-dont-respond-on-android/

[lanretobi]

helo Sakin, i use desktop version of ur themes for mobile (i hate responsive design) pls how can i make fonts larger on only mobile phones but small on desktop and tablets. thanks

[Sakin]

@lanretobi: You need to add in your site URL and let me know the sizes that you want to desktop and mobile devices. Then, you can customize that using “Additional CSS”

[lanretobi]

laidejaspercarefoundation.com/
i dont like the responsive design of this theme because it is not fullscreen, so i used css to create my own responsive design by increasing the font size on mobile phones but now the fonts are too big on tablets. pls how can i do it so that the font size change does not affect tablets i used 980px? thanks Sakin

[Sakin]

@lanretobi: it’s not full screen as the the no sidebar full content layout is there only in pro version. Check out demo at https://catchthemes.com/demo/catch-kathmandu/layout-options/no-sidebar-full-width/ and also check out them instructions at https://catchthemes.com/theme-instructions/catch-kathmandu-pro/

So, if you want to increase the font in mobile devices only then you can use

@media screen and (max-width: 780px) {
	/* Add CSS Here */
}

But if you want to change for all devices below 980px then, you can use the following:

@media screen and (max-width: 979px) {
	/* Add CSS Here */
}

[Author]

Posts