[#23516] - [4.0] Avoid use of of @import for Google font
- Closed
- 11 Feb 2019
- Medium
- Build: staging
- # 23516
What needs to be fixed
Cassiopeia template.css line 8:
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400");
Why this should be fixed
Highlighted in GTMetrix analysis and, to quote Yellow Lab Tools: "It’s bad for performance to use @import because CSS files don't get downloaded in parallel.
You should use <link rel='stylesheet' href='a.css'> instead."
How would you fix it
Either:
Move the request to the head of the index.php file with
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400" rel="stylesheet">
or include the font in the files and use @fontface
Side Effects expected
Better browser support
joomla-cms-bot
- | Labels |
Added:
?
|
||
@Scrabble96 May I work on this issue?
@Scrabble96 May I work on this issue?
@hardik-codes
Please, be my guest. My expertise in Joomla core code is very limited. How my suggested solution, or any other solution, is implemented is not my area of expertise.
Then I'll try to implement your solution and create a pull request for the same @Scrabble96
@C-Lodder and @dgrammatiko to which index.php file the above changes are to be made?
@hardik-codes The font is being imported here:
https://github.com/joomla/joomla-cms/blob/4.0-dev/templates/cassiopeia/scss/blocks/_global.scss#L3
The index.php file you'll need to add it to is:
https://github.com/joomla/joomla-cms/blob/4.0-dev/templates/cassiopeia/index.php
@hardik-codes Should just be able to get away with this in the index.php file:
HTMLHelper::_('stylesheet', 'https://fonts.googleapis.com/css?family=Fira+Sans:400');
@hardik-codes are you still working on the issue, if not I will work on it
@puneeth2001 already a PR is generated for this issue.
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-02-11 12:58:40 |
| Closed_By | ⇒ | roland-d |
@puneeth2001 read my comments and see if you can come up with the right changes
@dgrammatiko Let's discuss the issues in the PR itself. Thanks for pointing it out.
@puneeth2001 I'm still working on it
We load the fonts from Google's Server. There are many advantages preventing loading the Google fonts from Google’s servers but save locally. The reasons vary from privacy concerns over caching advantages to reducing file requests from third party servers.
Is there something against not only changing the way you integrate, but also storing the font locally?