Ad a custom FONT to a custom theme?? tearing hair out stuff.
Permalink
This has been driving me barmy.
Before we start I would like to say I have already seen thishttp://www.concrete5.org/documentation/how-tos/designers/how-to-add...
It makes no sense to me. I have limited skills in web orientated stuff. However I did pose this question to an online support chat with my webhosting company justhost and he couldn't help either so it can't be that easy.
I want to use a custom FONT on my site but when the article says past it into your site where exactly out of the hundreds of folders on my site is it on about. Also what does it mean link to main css blah blah blah it's missing out to many steps and assuming far to much. Like I said I pointed the support guy from justhost to this article and he was just as lost as I am.
So, could anyone explain step by step how to install custom fonts into my concrete5 website. I would appreciate a detailed walk through.
Before we start I would like to say I have already seen thishttp://www.concrete5.org/documentation/how-tos/designers/how-to-add...
It makes no sense to me. I have limited skills in web orientated stuff. However I did pose this question to an online support chat with my webhosting company justhost and he couldn't help either so it can't be that easy.
I want to use a custom FONT on my site but when the article says past it into your site where exactly out of the hundreds of folders on my site is it on about. Also what does it mean link to main css blah blah blah it's missing out to many steps and assuming far to much. Like I said I pointed the support guy from justhost to this article and he was just as lost as I am.
So, could anyone explain step by step how to install custom fonts into my concrete5 website. I would appreciate a detailed walk through.
As a beginner you might be better using Google fonts. And follow any Google font tutorial. That should give you a good idea on how to use custom fonts.
I've looked at the goggle fonts thing but once again they assume to much. let me give you an example of what I'm talking about.
there is an example of some text and then an instruction to "simply paste this text into your website"
that kind of instruction is far to vague and like I said earlier it clearly isn't just a beginner like me that finds that kind of instruction un helpful. The guy at justhost support couldn't figure it out either.
Copy this text "where" on my website - into which of the hundreds of folders.
I appreciate to someone with web skills this is an easy and maybe even obvious task, but, what if I told you to "simply take the rocket cover off the cylinder head of you car engine and remove the gasket" isn't that the same thing. Some people can't change wheel and that sounds silly to a master mechanic, but true.
there is an example of some text and then an instruction to "simply paste this text into your website"
that kind of instruction is far to vague and like I said earlier it clearly isn't just a beginner like me that finds that kind of instruction un helpful. The guy at justhost support couldn't figure it out either.
Copy this text "where" on my website - into which of the hundreds of folders.
I appreciate to someone with web skills this is an easy and maybe even obvious task, but, what if I told you to "simply take the rocket cover off the cylinder head of you car engine and remove the gasket" isn't that the same thing. Some people can't change wheel and that sounds silly to a master mechanic, but true.
Fonts on the web are, generally speaking, a gong show. They're getting better, but ease of use is growing at a glacial pace.
Google fonts are pretty easy. You copy and paste the code given into the <head> area of your html (or php) page. From there, you then specify the font in your css (or scss).
Let's say you wanted to use Roboto. Into the <head> tag you'd paste:
Then in your css you'd spec the font where you wanted it used - so let's apply it to the body tag.
Adobe's Typekit functions fairly similarly and has a much better selection of fonts - especially if you're into type, Google's collection is god-awful. Font Squirrel's @font-face embedding is tricky for beginners (at least I think so).
Hope this helps.
Google fonts are pretty easy. You copy and paste the code given into the <head> area of your html (or php) page. From there, you then specify the font in your css (or scss).
Let's say you wanted to use Roboto. Into the <head> tag you'd paste:
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
Then in your css you'd spec the font where you wanted it used - so let's apply it to the body tag.
body { font-family: 'Roboto', sans-serif; }
Adobe's Typekit functions fairly similarly and has a much better selection of fonts - especially if you're into type, Google's collection is god-awful. Font Squirrel's @font-face embedding is tricky for beginners (at least I think so).
Hope this helps.
I guees you need more of a roadmap for this.
The whole trick consists of two step:
1. Make you website call the resources from the Font-Server (i.e. Googl)
2. Tell your website how to use the font
For step No.1:
First visit GoogleFonts website, choose your font, choose the font-styles/weights etc. and click the "chain" (link-to) link. Googlefonts will provide you with two lines of code (as written below by juddc).
For our step No 1, we need the the first line of code which is enclosed in pointy brackets <link href.....>
Visit your website via FTP and find the "header.php" file. It normally resides inside the /elements folder inside the folder of you theme.
So if you have a theme from the marketplace installed, it will most likeley be:
/YOURSITE/packages/YOURTHEME/themes/YOURTHEME/elements
Before you do any changes to the header.php, it is advised to make a backup copy of it. So if you mess up anything, it is easy to restore.
Now when you open the header.php, look for other elements that start with <link href...>, those other calls to other servers. Just paste your Googlefonts-Code below them and from now on, your page will always ask Googlefonts to deliver the font files.
CAUTION: For pageload reasons, some themes call the fonts in the footer.php file. Same procedure, same folder, just another filename.
For Step No2:
Inside the folder of your theme, there should be a file called main.css or a folder "css" with a "main.css" inside.
Open that file and find where the fonts for your website are being declared. Easiest way is to do a search for the current fontname in your editor, or just browse through it. Look for "font-family".
When you've got it, replace the line with the one that Googlefont gave your. That should do the trick. Clear your Cache and see how it looks.
The whole trick consists of two step:
1. Make you website call the resources from the Font-Server (i.e. Googl)
2. Tell your website how to use the font
For step No.1:
First visit GoogleFonts website, choose your font, choose the font-styles/weights etc. and click the "chain" (link-to) link. Googlefonts will provide you with two lines of code (as written below by juddc).
For our step No 1, we need the the first line of code which is enclosed in pointy brackets <link href.....>
Visit your website via FTP and find the "header.php" file. It normally resides inside the /elements folder inside the folder of you theme.
So if you have a theme from the marketplace installed, it will most likeley be:
/YOURSITE/packages/YOURTHEME/themes/YOURTHEME/elements
Before you do any changes to the header.php, it is advised to make a backup copy of it. So if you mess up anything, it is easy to restore.
Now when you open the header.php, look for other elements that start with <link href...>, those other calls to other servers. Just paste your Googlefonts-Code below them and from now on, your page will always ask Googlefonts to deliver the font files.
CAUTION: For pageload reasons, some themes call the fonts in the footer.php file. Same procedure, same folder, just another filename.
For Step No2:
Inside the folder of your theme, there should be a file called main.css or a folder "css" with a "main.css" inside.
Open that file and find where the fonts for your website are being declared. Easiest way is to do a search for the current fontname in your editor, or just browse through it. Look for "font-family".
When you've got it, replace the line with the one that Googlefont gave your. That should do the trick. Clear your Cache and see how it looks.
Fantastic, thanks for taking the time to spell it out. And to be honest your
explanation isn't even as long winded as some that I've read. So why doesn't
everyone just do what you've done. I'll try this out and hopefully will find
some success.
Thanks again
John
-----Original Message-----
From: concrete5 Community
Sent: Monday, December 08, 2014 9:11 AM
To: john.w.stockton@ntlworld.com
Subject: Ad a custom FONT to a custom theme?? tearing hair out stuff. :
Themes
explanation isn't even as long winded as some that I've read. So why doesn't
everyone just do what you've done. I'll try this out and hopefully will find
some success.
Thanks again
John
-----Original Message-----
From: concrete5 Community
Sent: Monday, December 08, 2014 9:11 AM
To: john.w.stockton@ntlworld.com
Subject: Ad a custom FONT to a custom theme?? tearing hair out stuff. :
Themes
