Google Font
Permalink Browser Info Environment
Hello!
I've read the instructions and have created the new structure and files required to change fonts.
In config/pixel_theme/custom.dev.less I have ....
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:wght@400;600');
In config/pixel_theme/variables.dev.less I have...
@body-font: 'IBM Plex Sans', sans-serif;
@heading-font: 'IBM Plex Sans Semi-bold', sans-serif;
@secondary-font: 'IBM Plex Sans', sans-serif;
However, the font is not loading, but is being replaced with the default sans-serif
Further, Trying to use the new Google CSS2 protocol (https://developers.google.com/fonts/docs/css2) crashes C5.
Looking for some help with this...
Thank you!
I've read the instructions and have created the new structure and files required to change fonts.
In config/pixel_theme/custom.dev.less I have ....
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:wght@400;600');
In config/pixel_theme/variables.dev.less I have...
@body-font: 'IBM Plex Sans', sans-serif;
@heading-font: 'IBM Plex Sans Semi-bold', sans-serif;
@secondary-font: 'IBM Plex Sans', sans-serif;
However, the font is not loading, but is being replaced with the default sans-serif
Further, Trying to use the new Google CSS2 protocol (https://developers.google.com/fonts/docs/css2) crashes C5.
Looking for some help with this...
Thank you!
| Type: | Ticket |
|---|---|
| Status: | Archived |
I tested your code and it works just fine. Could you send me a live link so I can take a look?
sent via DM thx!
Hi there,
This is what you should append:
In `\application\config\pixel_theme\custom.dev.less'
In `\application\config\pixel_theme\variables.dev.less'
This is what you should append:
In `\application\config\pixel_theme\custom.dev.less'
@import url('//fonts.googleapis.com/css?family=IBM+Plex+Sans');
In `\application\config\pixel_theme\variables.dev.less'
@body-font: 'IBM Plex Sans', sans-serif; @heading-font: 'IBM Plex Sans', sans-serif; @secondary-font: 'IBM Plex Sans', serif;
Great! Thank you. That's working to render the required font in browser.
However, it seems to omit the ability to specify font weights which is what our previous code was attempting to do (following google font syntax)
Is font weight specification not possible?
However, it seems to omit the ability to specify font weights which is what our previous code was attempting to do (following google font syntax)
Is font weight specification not possible?
Of course possible. Check the `\packages\theme_pixel\themes\pixel\css\less\variables.less` and look for any variable with `font-weight` in that, and copy/paste them to your custom file. Then change them based on your fetched google font.
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.
To re-open this issue, reply to this message.
do these lines need to be modified?