Font Family "Roboto Thin" not embedded in the template

AzimuthDesigns

I am testing on other desktops and found that the main font-family: "Roboto Thin" is not loading on other computers.
Therefore it's not being embedded or linked from Google fonts.
Is it possible that the name or syntax of this font isn't loading correctly.

Now Roboto has other suffixes like 100, italic etc Roboto Thin 100, could this be causing an issue?

font-family: "Roboto Thin",Arial,Helvetica,sans-serif !important;

https://fonts.google.com/specimen/Roboto

dominic

Hi AzimuthDesigns,
You can use the following code:

h1,h2,h3,h4,h5 {
	font-family:"Roboto";
}

.category-module .article-title {
  font-family: "Roboto", sans-serif;
  font-size: 30px;
}

.contentheading,.componentheading,h1,h2,h3,h4,h5 {
	font-family:"Roboto", Arial, Helvetica, sans-serif!important;
}

AzimuthDesigns

I've added this a week or so ago to the file:

edit that custom.css file directly: /templates/ja_aiga/css/custom.css

So far it's not worked.

Is it the wrong file?

AzimuthDesigns

For some reason the template does not recognize either font-family...

"Roboto"
or
"Roboto Thin"

dominic

Hi AzimuthDesigns,
I have checked and see that the site loaded the Roboto font from the Google font, you can check the following screenshot:

If you want to change the title style to the Thin style, you can use the following CSS code:

h1,h2,h3,h4,h5 {
	font-weight: 100 !important;
}

.category-module .article-title {
        font-weight: 100 !important;
}

.contentheading, .componentheading  {
	font-weight: 100 !important;
}

Also, the custom CSS code will worked here: /templates/ja_aiga/css/custom.css

AzimuthDesigns

Correct it is only loading on the Home Page/Index page!
Ideally should be loading this font as a title or H tag on all the other pages, but it's only working in Firefox right now on a mac.
None of the Chrome/Safari browsers are loading Roboto Thin with the 100 weight yet.

I've uploaded that requested css addition, but it's not working.
The only way I can get it to work is if i delete all the optional fonts, like Arial and Helvetica in the css, which is probably a real liability for people who are not getting the Google Roboto font downloaded.

++++++++++++
.contentheading, .componentheading, h1, h2, h3, h4, h5 {
font-family: "Roboto Thin", Arial, Helvetica, sans-serif!important;
}

converts to this to make it add the thinner version of some font.

.contentheading, .componentheading, h1, h2, h3, h4, h5 {
font-family: "Roboto Thin"
, sans-serif!important;
}
++++++++++

There is no caching issue as I've cleared that and tested on several computers. It's an odd issue i didn't know existed until i started beta testing this on different computers!

dominic

Hi AzimuthDesigns,
I have updated the CSS code in the custom.css file, you can check your site now. Let me know if it is all the change that you want to have.

AzimuthDesigns

That worked!
I didn't realize that the addition of the "thin" into the css was a conflict!
Thank you so much the website looks so much better now!
<3 <3 <3