Hi Caligirl,

In the future, please do not create duplicate discussions in different sections of the forum.

Any custom font can be used in a theme, such as Google Fonts, TypeKit, font files, etc. In general, you define the custom fonts you want to use in your theme CSS. There is no support for selecting a Google Font from a list when you create and edit content. Part of this has to do with the ease of adding too many custom fonts and substantially increasing the page size and page load time.

The following tutorial explains how to change the default fonts in the Elemental theme that comes with concrete5:
"Replace the default font in the Elemental theme"
http://legacy-documentation.concrete5.org/tutorials/replace-the-def...

As someone new to concrete5, I highly recommend reading the Editors documentation.

Umm okay, no problem I did'nt know I was restricted to a particular category to post a question that's a bit draconian lol. As i am new to concrete5 I wanted to make sure my question was posted in the relevant options available....but now I know so no problem:)

Also I did go to the links provided previously. However it clearly stated on the top the following message "This is the documentation for concrete5 version 5.6 and earlier. View Current Documentation". So I did just that and then when you click the current documentation it takes you to a long list of articles which I am still not sure if they are relevant to concret5.7 or the earlier versions.

I am using concrete5.7.4 and it seems that there is not much information or accurate tutorials in regards to the "NEW CONCRETE5"

Anyways I have provided a few screenshots and will check out the links provided again to see if i can get things to work out. I will keep you posted in the next few days.. btw thanks:)

@Caligirl

The tutorial is for 5.7 and was mistakenly added to the legacy section. I wrote it for 5.7.

After reviewing basic concrete5 use, you will find these links helpful:
http://documentation.concrete5.org/tutorials/adding-redactor-custom...
http://documentation.concrete5.org/developers/designing-for-concret...

Thank you for your reply:) so I checked out the article you posted herehttp://legacy-documentation.concrete5.org/tutorials/replace-the-def... So I am assuming this is just to change the main theme (//fonts.googleapis.com/css?family=Titillium+Web:200,400,700,900);?

But lets say I want to use a particular google font for the logo area of the element theme. And then I would like to use other google fonts within different blocks of a webpage. Am I able to use google fonts in the content editor? Basically for certain titles and certain content I was hoping to have the ability to use google fonts to how identify the individuality and creativity of each page.

BTW I know this is a bit off subject but is there also a way to have a full width image slider or block the runs the entire screen regardless of the monitor someone might have (example: for headers, footers, etc.) and if so can you place content on top of image sliders???

Thanks in Advance:)

@Caligirl

If you are adding content to pages using the Content block, you can create custom editor styles that use a specific Google Font. The class and Google Font would be added in your theme CSS.

For content that is added to the page through blocks or other text elements (p, h1-h6, etc.). The fonts used would also be defined in your theme CSS.

You can enable full width content by disabling the grid container for a block. Click on a block and choose Design & Custom Template from the popup menu. A new menu bar will appear, choose the gear icon "Custom CSS Classes, Block Name, Custom Templates and Reset Styles" on the right side. From the Block Container Class drop-down menu, select "Disable Grid Container".

Thank you for your response:) I must say you are absolutely awesome when it comes to replying to concerns or help issues. Concret5 definitely deserves a A+ when it comes to that.

So if I am using the element theme that comes with 5.7.4 where would i go to add the css for the google fonts?? (Example: is there is specific file or folder I need to go to) so that I would be able to use multiple google fonts throughout the website? Or do you add the css when clicking the gear icon while editing a block??

sorry just a bit confused lol
Thanks:)

Hello mr K, I am not sure if you had a chance to review my last reply but as I do also have a few more questions I am unsure if I am suppose to post to a new forum section or ask my questions here so I guess I will just ask here lol.......

When going to a theme and customizing the colors is it not possible to have a completely transparent background for the body of the page so that a image may be shown instead though still being able to place content on top of the background image????

it seems when you click no color no changes are made to the page, however if you bring down the opacity through the slider changes are in-fact shown???? I guess I would like to create a image landing page that then directs to other content based pages within the site...

Also How do you create global areas as I am having a hard time getting this to work in concrete5.7...I do hope I am not bombarding you with questions though I do believe that the answers provided to my questions may be useful not only to myself but also others in the concret5 community which may be experiencing similar issues or that are new as I am and still having a bit of difficulty through the learning curve of concrete5...

Kindest Regards,
God Bless

hey so I am still having trouble with adding google fonts...did you buy chance have a time to check out my last replies??? Just wondering is there not any way to have google fonts drop down in the content or theme editor???

Thanks:)

Can I suggest quick step back here, and a slightly different way of thinking towards styling and build a website?

Generally it's better practice not to manually mark up individual pieces of text throughout a site with specific fonts and colour - treat the times you do mark specific content up with those features that as exception cases, not as the way you go about initially styling up a site.

For future maintainability, you should be always aiming to have cleaner _semantic_ markup on your pages, and then use styles to apply a visual appearance. Think about your page content in terms of headings, paragraphs and lists (and then classes that indicate specific types of content) and then think about applying styling on top of that.

A simple example might be that you as the designer decide that all of the heading 2s and heading 3s throughout your site are to be red, with font sizes 18px and 16px respectively.

If you went through every page of your site and applied this styling manually you could achieve this, but you'd have two problems:
- Every new page you create or new content you place with headings would need to be manually styled. You'd have to remember to do this, as well as what the styles were.
- If you _change your mind_, you have to edit every instance you've marked up this style. On a larger site this is a nightmare.

However, if you used styles to target these, all you'd have to do is adjust the settings in the one place. This might be in a stylesheet (or using concrete5's theme customize panel).

An example of where this really saves you is on a site we did a rebrand for recently. See the screenshots on our blog post here to see what the site looked like originally:
http://www.mesuva.com.au/blog/recent-work/australian-college-of-ope...
However, if you check out the site now you'll find it is visually very different, different fonts, sizes, colours, logos, everything:http://www.acorn.org.au/

We were able to create a brand new theme, install it, and simply swap it over via the dashboard. A few minutes later the entire site was swapped over. This is exactly the same site, pages and content, it just has differnt styles.

If we'd manually marked up content this would have been pretty much impossible.

A lot of people are so used to marking up web content directly with styles because they are used to doing so in word processor documents. Unfortunately many/most people don't know that word processors also have styles in theme and they should be taking the same approach!

Now in regards to your question, you've asked about selecting fonts both in the content editor as well as the theme editor. My comment above is more in regards to the content editor (and you may be completely on top of what I'm talking about), but I can see how you may want to pick a specific font when customising the theme.

What is important to keep in mind that 'out of the box', concrete5 is a content management system where you can load up a theme and pick a variety of options for that theme to put a custom spin on things. However, it's not going to give unlimited control over _everything_, it's not designed to be a completely freeform and limitless design creation tool. What it does provide is a way for people to customise things to a large amount, but in ways where things don't really break. Some fonts for example simply won't work well with some themes, so they're simply not offered.

There really isn't such a web product that gives you rich and well structured editing control, whilst giving you complete visual design flexibility. Such a thing isn't really necessary either, as it ends up being more management with custom styling/coding anyway.

So there simply comes a point where you have to decide: 'is my creative design for a new site achievable with concrete5's default theme (or a theme from the marketplace) with a few changes, or is it going to be more custom?'.

If it's the latter, you may want to think about learning how to create your own theme for concrete5 and CSS in general - you'd then have complete visual control, there really are no limits then. In these cases, normally a website design is completely mocked up and defined initially first (Illustrator, Photoshop, Sketch, InDesign, etc), and then a theme built to accurately reflect such a design.

What you end up with is a site where the content editors only have to think about their content and structure and never about fonts, font sizes and colours. This means that future content always matches the styling and branding envisaged for the site and you don't end up with a mess. That's ultimately the best way to handle things and what HTML and CSS was designed for.

I always ramble on the forums... just a few thoughts!

Thank you for your kind reply, yes I would agree with your position on many points and do understand the importance of having an external style sheet as apposed to several inline style changes that would need to be managed and changed individually.

I guess I am just having a hard time of figuring out a method of were you could build somewhat of an external style sheet for concrete5 to be used within any theme where I could include for an example a specific google font or multiple fonts that could be used in-conjunction to the logo, H1, H2, H3 tags ect. while still maintaining the themes overall structure but with the ability to make simple editing changes such as font styles which would follow the entire website pages.

It would be nice if concret5.7 simply had a drop down of google font options in the theme customization dashboard or at least within the block editing options. As a graphic designer a modern and clutter free user friendly website is of the utmost priority. However Absent sufficient typography options which account for 90% of a websites identity and uniqueness leaves both the designer with not only limited options but now a designer stuck creating websites with limited branding and typography which in my opinion only leaves one option. A bland and boring website that looks more text based of that of a word document and not that of a modern and appealing website.

The fact that a individual is using concrete5 should indicate that that particular individual has sought out the use of the concrete5 system as they most likely have limited knowledge or inability to code. Which sounds like to achieve anything close to what I have mentioned above would require a user to have somewhat of a developer background or at least having to learn the process of creating there very own custom theme which would entail theme having to code and have a background of both html, php, and css. This would be an oxymoron as the sole purpose of a user using concrete5 is to be able to create a fully functional and "attractive website" while being absent any technical or coding skills.

If you know of any solutions to the above please let me know.
Thanks;)

You could perhaps try the approach suggested in this post here:
https://www.concrete5.org/community/forums/5-7-discussion/changing-f...

There is a 'Custom CSS' option when you edit a theme's design settings, you can use that as a final style override. You may be able to try out the example above and then adjust further to your needs.

I do suggest you've misunderstood concrete5 a bit though. People use concrete5 for a very wide variety of reasons, and yes, some are attracted to it because you can get a lot done without technical knowledge, but that's not it's primary focus. Concrete5 isn't intended to be a 'create any look that you want website without coding' system.

There are lots of great themes that are flexible, and the default Elemental can be changed quite substantially, but it never promises any font you want, it just gives you a hand picked selection that will work with the rest of the theme.

Keep in mind too that many of the Google fonts don't have a range of weights, often they only have the one style - so offering the full set is going to present lots of issues. Some are more title/heading fonts, while others work much better for body text.

And although it might be handy for you right at the moment, it is also potentially a theme designer's worst nightmare - fonts are normally carefully matched to other aspects of a design, they're not generally freely interchangeable anyway.

So I guess I'm politely suggesting that your preferred way of implementing a website design right now is the less common approach. You're aiming for this midpoint where you aren't creating a custom site design, but you want more inbuilt flexibility with fonts than it necessarily makes sense to offer. You're not really supposed to _design_ a custom look and feel with Elemental or another theme, you're just given a bit of flexibility.

If you are creating a unique design, you may need to follow more traditional web development processes and either build a theme or at least get something working with CSS overrides (like in the example link above).

Thank you for your honest response.. And yes to a certain degree maybe I did misunderstand a bit of what concrete5 actually is and partially due to how it is advertised to new users. My understanding was that it would be very similar to the building capabilities ofhttp://www.wysiwygwebbuilder.com/... though with the added content management capabilities included. I think it is reasonably plausible that a first time user would assume like with most wysiwyg software that you would have the ability to drop and drag elements on to the webpage and make "standard changes" such as changing fonts, colors, moving around the layout, ect. while without having any technical background. Now having a technical or coding background is a given that one would be able to customize the website to a much greater degree than one that did not have such a background.

That being said I feel that concrete5 is a unique and creative piece of software that enables individuals to create responsive websites relatively easy while within the confounds of what is offered. As from a designer standpoint and what is deemed from your stance as "typical" is nothing less than a opinion at best as such references difference greatly. As a web designer I believe there is no such thing as standardization when it comes to web development/design, for if there was such a thing there would be no uniqueness between websites in which is clearly the distinguishing factors between them and there counterparts. Web design is purely based on the creativity and thinking of "in" or "outside of the box" of the web designer. (Some website designers tend to prefer more options and add-ons such as what is offered with Joomla - where others may prefer the simplicity and ease offered through concrete5 and others prefer to hand code) but clearly a personal opinion as there is no standard practice when it comes to the creativity of the mind.

That being said I have been creating websites via dreamweaver cs6, while creating a visual mock-up via photoshop. However I thought it would be nice to try something new, something simpler though I find some basic options lacking. Additionally, It would be awesome if concrete5 offered a way to create a custom template via drop and drag in the dashboard as it is apparent that you are restricted to some degree of the available customization's offered through a particular template. (For example: being able to move global areas, etc.)

In conclusion I am very appreciative to the developers of concret5 as should all users in which choose to utilize this free software, As it is an amazing piece of opensource software that I am sure a substantial amount of work and thought has been put into it especially behind the scenes. So thank you:)

Now I do just have a few questions for you if you don't mind?
#1 - So how do you in-fact create a custom template for concret5 as I am now using the most current version of concret5.7 and have found little to no documentation??

#2 Additionally, how do you create new global areas within a template? Is it at all possible to remove a previous global area within a template?

#3 Finally, is it at all possible - for instance, if I am using the default element theme or any other theme for that matter to in-fact rearrange the layout to fit my particular needs?

Once again I would like to thank you for your time and any others that have responded to my questions as It is much appreciated. Please also take no offence to my honesty as I am sure you have a deep passion for concret5 though I do have hopes that all may be open-minded to what has been said including that perhaps concrete5 should they read this may take some of the suggestions under advisement as I am sure other users may have similar feelings.

Kindest Regards:)
God Bless!

Hi and welcome to C5,

I am not a developer but my strength is in website design, however I like you, were developing sites in Dreamweaver for many years before coming across C5 about 6 years ago.

It is a great CMS and the new 5.7 is awesome once you get to know how it works and I'm still discovering and learning all the time.

I encourage you to go through these videos and tutorialshttp://documentation.concrete5.org/developers/designing-for-concret... to gain an understanding of how you create your own themes.

I would suggest that when you install C5 you start with a 'blank' install. This way you can create whatever you like. I use google fonts and embed the link for the font into the 'header.php' file and then set the styles in the main.css file.

It takes time to get your head around things but keep experimenting and reading the docs and forum posts and I'm sure you will start to get comfortable with it once you understand the concept.

I've found the community to be very helpful and have learnt so much. I hope this will be the case for you too.

Thank you for your helpful and kind words. I will definitely attempt to keep an open mind as I know there is a learning curve as is to be expected when utilizing any new software. I appreciate your taking the time to point me in the rite direction and very much appreciate it.

Please have a fabulous and Blessed Day:)
Kindest Regards,

I actually read very carefully through this discussion. Seems there are two sides:
one says Concrete5 themes (especially responsive 5.7+) are wonderful to work on as long as you agree that the creator solved all problems on the horizon
second says that designers don't necessarily want one big san-serif font throughout their site.
I've been working with pre-5.7 themes for about 6+ years and became a C5 fanatic because of the freedom that a little css knowledge (both type and layout) could provide.
Now i have a situation where if i want to put an elegant serif font into the design (using google fonts and the iffy documentation and all the advice from Google fonts) i get a broken website saying the font change was "unexpected." Back to the file manager to replace the code.
i am working with "stucco," a free theme with little to no documentation. Am very hesitant to pay money (especially client money) and have to answer as to why I can't change a font in the website.
Thanks callgirl for staying with this. Thanks Mesuva for keeping the conversation alive. I will go back and review the link you posted about fonts mid-way through.

I think the CSS override trick should work pretty well.
I just tried it out on Elemental, using:

The only thing to keep in mind is the specificity of the css selectors, in this case the div.ccm-page is necessary.

This was just through the theme's Custom CSS option as per my screenshot.

If your theme doesn't have that option available, then you need to get a bit more creative.

One trick than can work is to use/abuse the 'Tracking codes' feature at:
/index.php/dashboard/system/seo/codes (or just search for 'Tracking' with the intelligent search)

If you use this feature and set it to output to the header, it works to globally inject some code. You can put in the normal link to the google stylesheet there, and then you could also link to a stylesheet in a location of your choosing (or if it's a small change just directly put in the CSS). See my screenshot of this.

So although this feature is intended for tracking codes, it really doesn't care what you put in it - it'll just spit whatever you put in there out on every page (but obviously be careful).

thanks very much mesuva for your latest advice on adding fonts, the screen shots helped immensely. i've already given the "code tracking" approach a try and it works great. looking forward to trying the css approach. in fact i'm once again looking forward to doing more with the site in an overall sense!

Hello apicella, just wondering if there is anyway to achieve the flexibility that is found in the wix website builder?? I know concrete5 is a completely different software though it seems to me that the changing of fonts, colors, layout, etc are so much easier to achieve outside of what concrete5 is currently offering:( I am trying my best to stay with concrete5 as I want to give it a fair chance and am optimistic based on users feedback such as your self that do in-fact speak very highly of the software which is encouraging. However, in all fairness and truth I find there is allot lacking in comparison to other wysiwyg web builders when it comes to basic functionality and editing of the look and feel of a website. Any suggestions would be greatly appreciated.

Kindest Regards,
P.S. I am not bashing concrete5 just trying to get a better understanding of the software.

@Caligiri
if you are looking for a WYSIWYG Website builder, and want to go totally free-form - maybe what you need is something like Adobe Muse, or Freeway by Softpress. If you are a bit more code savvy, Dreamweaver.
Alternatively, when I need to add a logotype, I don't use a font, I use a PNG or JPG of the logotype. I would not recommend this for H1, H2, etc., as it hurts SEO and is definitely not accessible for handicapped people.
Personally, I work with Concrete5 because it provides structure and streamlined editing. Although most of my projects are very small, because I always use C5 it speeds up workflow.

@Mesuva
Another bonkers great idea with the tracking code area & google fonts!
Thank you!