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
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 |
OK, I will try that.
Thanks for helping
/Peter
Thanks for helping
/Peter
You're welcome. If you have any further questions, let us know.
Thanks,
Jennifer
Thanks,
Jennifer
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
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
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
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
OK, thanks again!
So when I choose a preset and make changes in design mode, it turns to the default css?
/Peter
So when I choose a preset and make changes in design mode, it turns to the default css?
/Peter
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
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
OK, thanks again.
/Peter
/Peter
Good luck with your project,
Jennifer
Jennifer
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\
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:
You can combine the families instead if you prefer, e.g.:
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