fonts

Permalink Browser Info Environment
Hi,

I am using Long Way Home and really loving it, but I would like to be able to customize the fonts. I'm finding the monospace to be a bit difficult to read on a small screen and would like the option of adding my own Google fonts and font styling and to be able to change the size to ems rather than px. I know that on the post editor I can change to some other fonts like Ariel, but I would prefer to have more control, or at least more options (like Roboto, Open Sans, etc.).

I don't know PHP at all, so I'm not sure how to change these things natively. Is there a way to add custom font css that I'm just not aware of? I know there are customizations (like tagging "card") but I wasn't able to get a different font control in there.

Any help would be appreciated, as a lot of what I do on another site involves a variety of fonts and I'd love to be able to just use concrete5 for future use, especially if I begin working with other people who don't know html/css.

Thanks!

Type: Ticket
Status: Archived
kelsey89
View Replies:
jordif replied on at Permalink Reply
jordif
Hi!

The theme provides a very basic way of using Google Fonts via Page Attributes.

If you go to your Homepage, click on the Gear Icon and choose Attributes, you should see the following Page Attributes:

- Google Font (headings): simply enter the name of the Google Font (i.e. Roboto or Open Sans) that you want to use for the headings.

- Google Font (body text): simply enter the name of the Google Font (i.e. Roboto or Open Sans) that you want to use for the body text.

- Apply Google Fonts to subpages: make sure to tick the checkbox if you want to use these fonts in all your pages.

If you need more control, you can also add Google Fonts via CSS. If you use the CSS option, first remove the Google Font Page Attributes. Then do the following:

- Go to Google Fonts, select the font you want to use and click on the Quick Use button. In steps 1 and 2, change the settings if necessary. In step 3 ("Add this code to your website"), select the second tab (@import) and copy the code to the clipboard.

- Go to your concrete5 webiste. In the theme customizer, under "Advanced", you'll find the "Custom CSS" option. Click on it and paste the code there. Make sure you paste it at the top of the text area. Then add the CSS rule to use the font. For example, the complete code to use "Oswald" for the "Heading 4" tag (<h4>) should look like this:

@import url(http://fonts.googleapis.com/css?family=Oswald);
h4 {
    font-family: 'Oswald';
}


Hope this helps!

Jordi
kelsey89 replied on at Permalink Reply
kelsey89
That was exactly what I was looking for, thanks so much!
ConcreteCMS replied on at Permalink Reply
ConcreteCMS
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.5.6
Version Installed - 5.7.5.6
Database Version - 20151221000000

# concrete5 Packages
4Concrete5 Dashboard (0.9.0), Custom Export-Import (1.1.4), Donate Plus (1.0.1), Long Way Home (0.9.9), Quick Pay (1.0.1), Responsive Embed (1.0.1), Tweet Feed Block Components (0.9.13), Whale Grid Gallery (2.2.0).

# concrete5 Overrides
languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache

# Server API
cgi-fcgi

# PHP Version
5.6.19

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dba, dbx, dom, ereg, exif, filter, ftp, gd, gettext, gmp, hash, iconv, imagick, imap, ionCube Loader, json, libxml, mbstring, mcrypt, mhash, mongo, mysql, mysqli, mysqlnd, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_sqlite, pgsql, phalcon, Phar, posix, readline, Reflection, session, shmop, SimpleXML, soap, sockets, SPL, sqlite3, standard, tidy, tokenizer, xdebug, xml, xmlreader, xmlrpc, xmlwriter, xsl, zip, zlib.

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 30
max_input_vars - 2000
memory_limit - 128M
post_max_size - 16M
sql.safe_mode - Off
upload_max_filesize - 128M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 1440
soap.wsdl_cache_limit - 5
xdebug.max_nesting_level - 256
xdebug.max_stack_frames - -1
xdebug.var_display_max_children - 128
xdebug.var_display_max_data - 512
xdebug.var_display_max_depth - 3

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.