Using Google fonts

Permalink Browser Info Environment
Hi.
Is there a way to use google fonts in your theme?
I found an earlier post in this topic, but no visible answer, just personal e-mail.
I really need to use a font that looks similar to my clients graphic profile.
/Peter

Type: Discussion
Status: Resolved
View Replies:
pilipala replied on at Permalink Reply
pilipala
Instructions for changing Google Fonts in Seren theme (choose whichever fonts and font styles you want):

1. Change the defaults.less file located here (or another colour less file if you are not using the default colour scheme):

seren\themes\seren\css\build\fonts\

@import url(http://fonts.googleapis.com/cssfamily=Josefin+Slab:400,400italic,700,700italic);
@import url(http://fonts.googleapis.com/css?family=Dancing+Script:400,700);


So you need to import whichever font you want to use here. Google Fonts will provide the information that you need to put here. If you are not going to use one font, then delete it. Or if you want to keep all of them, but just add another font, then just add in the new font you want.

For example, if you wanted to change Josefin Slab to Open Sans, then delete Josefin Slab and add Open Sans like this:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i);
@import url(http://fonts.googleapis.com/css?family=Dancing+Script:400,700);


You can combine the families instead if you prefer, e.g.:

@import url(https://fonts.googleapis.com/cssfamily=Open+Sans:400,400i,700,700i|Dancing+Script:400,700);


2. Then change defaults.less file located here (or another colour less file if you are not using the default colour scheme):

seren\themes\seren\css\presets

Everywhere you see "Josefin Slab",serif; then you would replace it with the font that you want as per Google Font's instructions, e.g. do a find and replace for "Josefin Slab",serif; with 'Open Sans', sans-serif;

Upload both files to your server. Save the modified files elsewhere so that you can keep them to upload again if you ever update Seren theme, as changes will be overwritten with theme upgrades. By the way, you can also create your own named preset if you prefer, e.g. custom.less. Just copy the defaults.less files in both locations, name them both custom.less and make the changes you need. Then you would select custom in the design panel.

Thanks,

Jennifer
peel1962 replied on at Permalink Reply
OK, I will try that.
Thanks for helping
/Peter
pilipala replied on at Permalink Reply
pilipala
You're welcome. If you have any further questions, let us know.

Thanks,

Jennifer
peel1962 replied on at Permalink Reply
Hi again.
Trying to do some changes with the fonts but...
When I´m doing some color changes in one of the presets (design mode) then the font Josefin Slab dissapears from the font list and is replaced with Open Sans bold. Can´t find Open Sans anywhere in the css-files.
Don´t understand 😱

/Peter
pilipala replied on at Permalink Reply
pilipala
You will see the link to the Google Fonts within the Seren package here:

seren\themes\seren\css\build\fonts\

There are several less files in this folder. Defaults.less is the one you need to change if you are using the default colour. If you are using a different colour preset then you would modify a different less file, e.g. blue.less if you are using the Blue preset.

The other file you will need to change is here:

seren\themes\seren\css\presets

Again, you would change defaults.less file here to substitute the fonts that you have chosen, or if you are using a different colour, e.g. blue than you would change blue.less.

In the Seren theme, the White Blue colour preset uses Open Sans and the other ones use Josefin Slab. So if you change the colour preset, you will get a different choice of fonts.

To choose your own font, change the files above with your chosen font. Choose the less files to correspond with the colour preset you want to use. Then you need to make sure you have chosen the right colour preset in the design panel.

Thanks,

Jennifer
peel1962 replied on at Permalink Reply
OK, thanks again!
So when I choose a preset and make changes in design mode, it turns to the default css?

/Peter
pilipala replied on at Permalink Reply
pilipala
Hi

No, I meant that you need to choose the colour preset less files that you will use if you wanted to change the Google Fonts. If you like, you can pm or email contact@pilipalawebdesign.com and advise what colour preset you want to use and which fonts where, and I can go into more detail.

So if you are going to use the blue colour preset you would edit blue.less files, or if you are going to use red colour preset you would edit red.less files and so on. The files that you edit in the package to include your Google Fonts need to be the same colour that you choose in the design panel.

It might be confusing as there is a different font used in the Seren preset called White Blue. You can't select Open Sans in any other colour preset in Seren unless you add Open Sans (as described in the previous email) to the relevant less files. If you look at white-blue.less you can see the difference from the other less files and then I think you might see how you can edit the fonts.

Thanks,

Jennifer
peel1962 replied on at Permalink Reply
OK, thanks again.
/Peter
pilipala replied on at Permalink Reply
pilipala
Good luck with your project,

Jennifer

concrete5 Environment Information

# concrete5 Version
Core Version - 8.1.0
Version Installed - 8.1.0
Database Version - 20170123000000

# concrete5 Packages
Breadcrumb Trail Page Links (1.1), Login/Logout Link (1.0), Login Page Background (0.9), Mega Menu (1.6.2.2), Seren (1.0.2)

# concrete5 Overrides
languages/en_GB/LC_MESSAGES/messages.mo, languages/en_GB/LC_MESSAGES, languages/en_GB, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, 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/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, 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/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, 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/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/cs_CZ/LC_MESSAGES/messages.mo, languages/cs_CZ/LC_MESSAGES, languages/cs_CZ, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/en_GB/LC_MESSAGES/messages.mo, languages/en_GB/LC_MESSAGES, languages/en_GB, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, 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/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, 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/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, 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/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/cs_CZ/LC_MESSAGES/messages.mo, languages/cs_CZ/LC_MESSAGES, languages/cs_CZ, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU

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

# Server Software
LiteSpeed

# Server API
litespeed

# PHP Version
5.6.30

# PHP Extensions
bcmath, bz2, calendar, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imap, intl, json, libxml, litespeed, mbstring, mcrypt, memcache, mhash, mysql, mysqli, mysqlnd, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, Reflection, session, shmop, SimpleXML, soap, sockets, SPL, sqlite3, standard, tokenizer, turbo_realpath, XCache, XCache Cacher, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend OPcache, zip, zlib

# PHP Settings
max_execution_time - 3000
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 5000
memory_limit - 1024M
post_max_size - 100M
sql.safe_mode - Off
upload_max_filesize - 100M
memcache.max_failover_attempts - 20
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 - 7200
soap.wsdl_cache_limit - 5
RealPath safe mode - <i>no value</i>
realpath_cache_safe_mode - <i>no value</i>
xcache.var_maxttl - 0
opcache.max_accelerated_files - 4000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8

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.