Fonts

[Zdenka]

Sorry to bother you again.
I’m happy it’s now so easy to set font sizes. Please could you make a tutorial how to change the font-family?

In fact I wouldn’t mind using “open sans”. But some special letters (ě, č, ř, ž) do not look nice in my language. A bit smallet and thicker than the other letter (see the screenshots). A friend told me that some of these letters do not show at all on Android but I have yet to check it somewhere).
“Times new” is fine but I might prefer a sans serif font.

For using a different font do I have to add some font files into the “font” folder first ot is it enough to only define the font-family in the css in the theme editor?
Snmekobrazovky2014-12-02v15.30.59.png
Snmekobrazovky2014-12-03v10.06.43.png

Attachments:

You must be logged in to view attached files.

[Anonymous]

Ok thanks. I’ll make tutorial for it too. here are quick steps. Download ttf font from here : http://www.fontsquirrel.com/fonts/open-sans .

There are many variations but we’ve used in this theme are :

1. OpenSans-Regular
2. OpenSans-SemiBold
3. OpenSans-light

After that go to webfont Generator : http://www.fontsquirrel.com/tools/webfont-generator

Upload these ttf file and after uploading click on the expert mode there here is settings you might want to have : http://i.imgur.com/tcIc98c.jpg
You can choose language support for others too if you want.

After downloading, you’ll have zipped file which will have CSS and all the web fonts there.

I hope this will help you 🙂

[Zdenka]

To tell the truth I’m a bit confused 🙁

I don’t get the same screenshot as you. It seems like there are several ways to get the font kit with all necessary files.

After unzipping I have for each font type: .eot, .svg, .ttf, woff and the stylesheet.css

But what to do next? I’ve found some tutorials on web but I’m not sure how to apply this to your themes.

Do I add these files the font folder or do I replace the current files (via FTP)?
What to do with that stylesheet.css? Copy somewhere? Open somehow?
It seems like there are always several fonts in the theme code. The main one and some backup fonts. There is no need to install the backup fonts? What font are these? (and there is no Times New Roman in the theme folder?)

Maybe a more detailed video tutorial would be of great help. It will certainlly be the same for all your themes.

[Anonymous]

Dear Zdenka,

Sorry to hear you’re still having confusion. To get the the screen like what i’ve shown there. You need click on the export mode here : http://www.fontsquirrel.com/tools/webfont-generator and make sure in subsettings you choose custom subsettings then you’ll see screen like that.

After unzipping the download, you can ignore stylesheet.css it’s just an example and we already have that code in our style.css. Just grab the .eot, .svg, .ttf, woff files and replace the files in puresimple/fonts folder via ftp. Make sure the name is similar while replacing file in ftp.

After replacing these .eot, .svg, .ttf, woff files, just open your site in different browser or clear the cache so new font gets rendered and it’s not from cache.

I’ll take some time soon to make tutorial for this.

[Zdenka]

Thanky you very much Roshan.
Now your description is very comprehensive even for non-experts.
It worked perfectly, I didn’t have to clear the cache. And the Czech letters look much nicer 🙂

I’m looking forward to you tutorial (video or written in details). Sure, many users here will appreciate it.
Could you include a note about how to add and integrate a different font there (e.g. a fancy font for headings) and how to use the “secondary” / backup fonts?

In fact I must admit Andre was right with his idea not to blow up the themes with unnecessary things. With you help / tutorial, I (anybody) can upload just a font I’d like to and in my language.

[Jen Shea]

Hi Roshan,

I’m struggling to change the fonts in the Pure & Simple theme. Did you make a video tutorial (as promised last month in this thread)? We chose this theme because the fonts matched closely to what we were looking for… yet this is definitely not the font.

Here is the link to the demo: http://demo.styledthemes.com/demos/puresimple/
And the text below “Welcome to Pure & Simple” displays the font I was expecting to find:
” Explore my new WordPress theme called Pure & Simple…a theme built for professional bloggers with beautiful subtle features that gives you more when you are serious about your content! Unlimited colours, several blog styles, Jetpack ready with a gorgeous portfolio, mobile responsive…and much more! ”

I’m not a coder but with good direction I can figure things out. How can I change the existing fonts? My client now is talking about starting all over with a different theme so she can get the font style she desires. I don’t want to start over.

Thank you!!

[Shekhar Bhandari]

Hi Jen,
Could you please specify the font name that you want for your site and where you want to use it. It will be easy for us if the font is available in Google fonts so we could give u step to step instruction for setting up the fonts. In the meantime, you can look at the this video tutorial.
https://www.youtube.com/watch?v=aBbG5OvudHQ

Thanks.

[Jen Shea]

Thank you Shekhar, I will do that. I’ve go to go out for a few hours but back around 3EST. I’ll check out the Google fonts then.

Thanks so much.

Jen

[Jen Shea]

Hi There,

I would like to use the following fonts:

Source Code Pro
Quicksand
Nixie One
Lato
and Calligraffitti

I would like to be able to use them anywhere on the site. Is that possible?

Many thanks!!

[Shekhar Bhandari]

Hi Jen,
Yes it is possible to use the fonts that you mentioned. To use the fonts install the Google fonts plugin. Then Go to Setting and Google Fonts and choose your desired fonts.
Plugin Link: https://wordpress.org/plugins/wp-google-fonts/
Screenshot Link How to use Plugin: https://wordpress.org/plugins/wp-google-fonts/screenshots/

Thanks.

[Zdenka]

But won’t using a font plugin slow down the website?

Moreover, these plugins (I’m just testint Easy Google Fonts) don’t cover fonts in lists and widgets. If you still recommend a plugin, would it be possible to adapt your themes so that they are 100% compatible?

[Anonymous]

Well using one or two fonts are ok. You can always keep eye on how many fonts you want to use and Page speed using their tool. Go here : http://www.google.com/fonts and add fonts to collection. When you click on the USE button below. You’ll see the PageSpeed effect see this screenshot : http://prntscr.com/5v40we . Make sure they are always under Green level.

Regarding making 100% compatible, well you know the classes and id of widget can be different and different classes can be used using Widget CSS Classes plugin. So if you can figure out the selector of the element then you can use it everywhere inside the plugin. This video might help you : http://vimeo.com/77878709

Let us know if you’ve any question there.

[Ark Zaydman]

Roshan and Shekhar. Very sorry to hijack this thread, but I was not getting very good help from Binaya on my original post. You two seem to be the font experts here. Could you please help?

https://www.styledthemes.com/forum/pure-simple/1808-changing-font-of-post-and-page-header <<original post. I have tried EVERYTHING. Including custom css. Even if I turn off my good fonts plugins and use custom css, The entry-title stays times new roman (but only before click to go to full post)

[Shekhar Bhandari]

Hi Ark,

Binaya has replied you back on the post that you have mentioned, please check the reply.

[Author]

Posts