What is the source of this font. The two places I found both contained a license text file that should be included and neither of them is referenced as v18 - based on the filedate alone this is a very old version of the font and the latest corrected version is at https://github.com/google/roboto/

Source: https://google-webfonts-helper.herokuapp.com/fonts

You need webfonts for including it in the template and this source is offering the webfonts. If you have another source for roboto webfonts I can include them.

I have tested this item ✅ successfully on 2124fd8

works as expected

Looks like the master repo for the font is just the source - it was just that the readme says this is an older version.

A subset of an earlier version of Roboto is available from Google Fonts, and can be used as a web font.

So I guess this is fine i it supports all the languages

I have tested this item ✅ successfully on 2124fd8

Veriy nice. It is allitle bit narrower, so better use of space.

I have tested this item ✅ successfully on 2124fd8

Before test:
Font is: Arian, sans-serif
After apply patch:
Font is: Roboto, Arian, sans-serif
Easy Peasy test ;-)

I have tested this item ? unsuccessfully on 2124fd8

Fontpath corrected, please retest @brianteeman @renekreijveld thanks!

I have tested this item ✅ successfully on 2124fd8

I retested and found the font file present, could even download them.
/administrator/templates/atum/fonts/roboto/roboto-v18-latin-700italic.ttf

I have tested this item ✅ successfully on 4446814

Tested accorded to instructions.

@renekreijveld can you please mark your Test again as its not in GitHub and Issue Tracker.

I have tested this item ✅ successfully on 4446814

Reconfirm test succesful.

@franz-wohlkoenig Done!

Ready to Commit after two successful tests.

I have tested this item ? unsuccessfully on 4446814

only -700 is being loaded

@franz-wohlkoenig please remove rtc as hound needs to be passing before it is ready

@coolcat-creations only -700 font is being loaded

set back on Pending as stated above.

@brianteeman you have to run npm again

i had run rpm run build:css before posting - but just to be certain i just did a complete npm install

no difference

just tested again on firefox and it works but it doesnt in chrome

Chrome seems to be clever if the font is installed in the computer it does not pull it from the web. Just tested that and is reproduceable. So thats not a bug but a feature from chrome.

Yes I just logged back in to say that the problem was that I had roboto-700 installed on my system.

You can say its a "feature" of chrome but for me it means that we can't use a webfont

It looks like the wa6y to resolve this is to remove

src: local('Roboto'), local('Roboto-Regular'),

Why would one say that? You can name it different in the scss file if you want to prevent that or remove the local reference. But I see no reason why we should block the opportunity to have a faster loading time.

Because if you only have a partial font installed locally eg just the bold variant then that line will prevent the full set of fonts being loaded on the site.

I just tested and removing
local('Roboto'), local('Roboto-Regular'),
will work - you need to keep the src:

does roboto includes all necessary charsets? afaik, it has cyrillic, greek, latin and vietnamese only

does roboto includes all necessary charsets? afaik, it has cyrillic, greek, latin and vietnamese only
I tested the view with Persian and it looked good - maybe because i left the fallback to Arial inside the font-family specification...

I'd suggest removing the fonts and just keep the CSS property. The majority of users would have this font cached.

Then you‘d need to write a gdpr statement regarding google fonts ... That’s why it’s better to serve them local.

We won't be serving anything. I'm suggesting, don't serve 100kb of render blocking fonts when they are most likely already cached on the client.

Well, then back to the 80s using Arial? you forget about networks that are closed, about blocked resources in other countries, GDPR, and more...:-/

So how many of you have forked the Isis and/or Protostar templates to deal with Google Fonts on 3.x? Not anything new there.

Also, it is entirely possible to build a font stack that takes advantage of "fancy" fonts without including all of the fonts in the CMS distribution. But, since we like to not do things that WordPress does and they changed their admin to not rely on downloading external fonts we can't do that.

Well, then back to the 80s using Arial? you forget about networks that are closed, about blocked resources in other countries, GDPR, and more...:-/

??? Nothing in your statement relates to what I am saying so bowing out of this conversation.

As Micheal suggests, I think the best we can do here is a proper font stack with Roboto having priority.

@ciar4n
Sorry then I probably misunderstood you completely. How can we solve to have Roboto but not pulling it from external Sources? I did not understand your Solution. or maybe you can push into this PR and help.

But if you want to load it from local, why had @brianteeman asked me to remove to load it from local if available? I still don't understand the goal of what you want me to do...

Ok then production has to decide if

1. We have a modern and clean backend with a consistent use of fonts which is IMHO also important for branding, continuity and style.
2. Just use any font from a fontstack because we don't care about typography and design.

Since I do care about typography and design someone else would need to create the second PR, sorry.

So can we leave the PR as it is or not? I still don't understand your intentions, sorry.

No... I asked for a decision from production regarding this. How do we proceed?

Thats not a though question. I am sure @wilsonge can just reply if we stick to the design and concept of J4 Backend or do something else.

I approve using the Roberto font that we ship in the backend template only . It's going to be a one-off download (and after that the browser will cache it) and in the backend frankly performance doesn't matter quite as much as the frontend. Clearly it's different in the frontend template where I would expect us to use the "wordpress way" of using what's already been cached in the user's browser as performance is significantly higher importance there.

Thank you @wilsonge !

FWIW the build.js was written, contrary to what most people believe, to automate the "import" of all static assets. I see that this PR totally neglects this very simple idea to improve maintainability. (In other words that was totally wasted time for me...) PS: same story with Brians PR for the accessibility menu. Assets NEED to be handled through package.json you are doing it wrong!!!

Apart from that you need to make sure that the font covers all the languages that the product could possibly be installed/run. So does this font covers this very simple prerequisite, eg does it support Asian languages?

Apart from that you need to make sure that the font covers all the languages that the product could possibly be installed/run. So does this font covers this very simple prerequisite, eg does it support Asian languages?

I asked that four days ago but didn't get an answer

Wrong button sory

@brianteeman The question was asked by @Infograf and I replied directly afterwards below the question. Please don’t accuse me that I don’t reply.

@dgrammatiko is there any documentation how to use what you did or can you help me? I don’t understand what you mean, if you help me I could change whatever needs to be changed.

Unfortunately docs are not my strong point, neither my code is but lets skip that.
Check how we deal with Font Awesome (bloatware):

• https://github.com/joomla/joomla-cms/blob/4.0-dev/package.json#L35

• joomla-cms/build/build-modules-js/settings.json

  Lines 146 to 159 in 7d29f87

  	"font-awesome": {
  	"name": "font-awesome",
  	"css": {
  	"css/font-awesome.css": "css/font-awesome.css",
  	"css/font-awesome.min.css": "css/font-awesome.min.css"
  	},
  	"filesExtra": {
  	"css/font-awesome.css.map": "css/font-awesome.css.map",
  	"scss": "scss",
  	"fonts": "fonts"
  	},
  	"dependencies": [],
  	"licenseFilename": ""
  	},

So basically duplicating these lines and replacing the names should make the magic copy in media/vendors/roboto/fonts/files...

Perfect thank you :-) !!!

Apart from that you need to make sure that the font covers all the languages that the product could possibly be installed/run. So does this font covers this very simple prerequisite, eg does it support Asian languages?

No. All that is loaded here is latin (120Kb). Compare to Arial Unicode which is 22Mb.

In fact and after some research, whether for Arial or Roboto, a lot of charsets are NOT included in the font and still display in Joomla.
That is why we always need to add Sans-Serif to the font-family.

If we are going to go ahead and locally load Roboto we probably need to include Greek, Cryillic and Vietnamese to avoid mixed characters in some languages?? That brings font size up to about 260Kb (WOFF2). For older browsers that will be 350Kb (WOFF).

That brings font size up to about 260Kb (WOFF2). For older browsers that will be 350Kb (WOFF).

Ouch!

That only works if they are additional fonts. It doesn't work if it is one font with all character sets

Thatvonly works if they are additional fonts. It doesn't work if it is one font with all character sets

So the solution is not

Ouch!

but:
"Hey good input, let's look how we can do it the improved way"
?

@brianteeman

That only works if they are additional fonts. It doesn't work if it is one font with all character sets

at least google does exactly this for the font:
https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese"%20rel="stylesheet

You can download the same files from herokuapp.

i like the Discussion about pro and cons of a possible Solution. Thanks for learning by this.

if you use the css property unicode-range on loading the additional fonts you don't have this problem.

I can't see unicode-range working here. Presuming you are considering creating a font for each set, how would you stop say a Greek site from loading both Latin and Greek fonts?

Just to mention, Wordpress once loaded a Google font in their admin but recently went to lengths to remove it. Their reasoning for why might be a worthwhile read if anyone can source it.

My personal opinion is not to force the user/manager/admin to load 3rd party content for there own website. Mainly for privacy reasons. The same reason why I have a adblocker not because I don't want to see ads and support the website owner. The reason is self protection against tracking and drive-by adware.

The other reason is that there is normally no performance gain if you load anything from a CDN.

Loading the font remotely is not an option. The choices I believe are as follows....

1. Load Roboto locally (this PR)
2. Don't load the font but listed it in the font stack
3. Leave as is

2 is the only logical solution

FWIW this was already proposed exactly 4 years ago (14 sept 2014) for ISIS with the only difference I used the Ubuntu font which is also open source and a free d/l: https://github.com/joomla/joomla-cms/pull/4280/files#diff-640427faca138ce1913bd20c2bac8541R47
PR: #4280

Unfortunately docs are not my strong point, neither my code is but lets skip that.
Check how we deal with Font Awesome (bloatware):

* https://github.com/joomla/joomla-cms/blob/4.0-dev/package.json#L35

* [joomla-cms/build/build-modules-js/settings.json](https://github.com/joomla/joomla-cms/blob/7d29f87dada9910281473ee6bacecfdbee9e1951/build/build-modules-js/settings.json#L146-L159)
      
      
          Lines 146 to 159
        in
        [7d29f87](/joomla/joomla-cms/commit/7d29f87dada9910281473ee6bacecfdbee9e1951)
      
      
      
      
  
          
            
             "font-awesome": { 
          
  
          
            
               "name": "font-awesome", 
          
  
          
            
               "css": { 
          
  
          
            
                 "css/font-awesome.css": "css/font-awesome.css", 
          
  
          
            
                 "css/font-awesome.min.css": "css/font-awesome.min.css" 
          
  
          
            
               }, 
          
  
          
            
               "filesExtra": { 
          
  
          
            
                 "css/font-awesome.css.map": "css/font-awesome.css.map", 
          
  
          
            
                 "scss": "scss", 
          
  
          
            
                 "fonts": "fonts" 
          
  
          
            
               }, 
          
  
          
            
               "dependencies": [], 
          
  
          
            
               "licenseFilename": "" 
          
  
          
            
             },

So basically duplicating these lines and replacing the names should make the magic copy in media/vendors/roboto/fonts/files...

@dgrammatiko I don't understand the settings.json file... It is loading css instead of .scss - is there any reason for it? I would prefer to have everything in the template.css or what it the reason for this structure? Maybe I just don't understand the logic behind...

@coolcat-creations here is some more help:
the name of the nodejs package is roboto-fontface according to https://github.com/choffmeister/roboto-fontface-bower and the version is 0.10.0
This needs to go to Joomla's package.json on the root folder
Then npm install will create the folder in the node_modules.
Next step is to get any files required and placed in media/vendor/somename and this is done in the

Some explanation here, although might be a little bit off (it's been some time since I wrote this piece of ?):

 "roboto-fontface": { 
   "name": "roboto-fontface",
   "filesExtra": { 
     "fonts": "fonts",
    "css": "scss"
   }, 
   "dependencies": [], 
   "licenseFilename": "LICENSE" 
}

• Tha name refers to the name of the folder that will be created under vendor
• css and js is an object that holds the path of the source (node_modules/whatever/someFile.css) and the destination (media/vendor/whatever/someFile.css)
• The FilesExtra is some magic helper to copy whole folders or files that are not css or js
• Dependencies is an array that holds any dependencies the script/scss might have. Should be avoided at all costs!!!!
• licenseFilename is just the license filename (might accept folder structure)

Closing this PR due to known reasons.