Custom google font weight not showing in Safari iOS when Google fonts disabled.
I setup custom Google Nunito Sans as custom font in .woff2 and .ttf a lot of weights and it renders perfect in every browser, in every weight. Except Safari iOS. See mobile menu for the best example which is set at 800, but seems to display at something like 200.
Could it be that you have created the woff2 font with a converter? If so, this could also be the reason. You can only get the ttf file from google itselfâŠ
By the way: is there a particular reason why you have defined each weight but use the same (variable) font for it? Actually, you only have to define the font once with its default weight and then set the weight using font-variation-settings, e.g. âwghtâ 800.
Hi, I guess that conversion was the problem. I used fontquirrel. I shall use your link in the future. Thanks.
And then I canât find what you mean. I only see the option to refer to the same variable font file ( I use only Woff2 now) for every variant and weight. A bit tedious to do. But you have a better solution? (canât see it here: Custom Fonts â Bricks Academy )
I see the font-variation settings in Bricks, but setting that to f.e. 800 gives an error in de inspector and doesnât workâŠAlso on soek occasions I get a dropdown with all font-weights (working as well) without having them set in custom fonts. And most of the time there is only 400âŠ
Ok, Iâm glad that the problem could be solved so easily.
Regarding variable fonts: the advantage of variable fonts is that, for example, all weights (and other things, depending on the font) are already included and you therefore only need a single file, not per font-weight. Which font-weight is used is then set in the font-variation settings (add âwghtâ 800) instead of in the font-weight dropdown, see: Integration: Adobe Fonts â Bricks Academy
The âunpleasantâ thing about your approach is that you had multiple font-face rules in the source code (for each weight) that all refer to the same file. Fortunately, the font is only loaded once because the browser is smart and knows that it is the same file
ok. I wrote âwghtâ 800 instead of âwghtâ 800. Ok. it all works. Thanks for your fast response!
Would be great if Bricks would build the 100 - 900 options in also on variable fontsâŠ
(Funny when I set the font Nunito in the global settings, there IS the option to set 100 - 900 in the dropdown) But is dissapeares when I set it manual to the (same) NunitoâŠ
edit ok, Firefox still doesnât see it. (Safari does now) See the main menu on desktop view. That should be set to 700 weightâŠsee inspector
In your case, ACSS adds a font-weight of 600, so that some browsers seem to interpret this differently.
âwghtâ 700 is set correctly, but simply set the font-weight to 400 so that this value overwrites the ACSS value. Then, in theory, it should be the same in every browser.
Thank you. And I tried what you said. Still the same problem. Strange how first only Safari iOS had a problem and now this on only Firefox developer edition. Gets me thinking it might have to do with an extension or settingâŠ
