Menu order causing weights to display incorrectly

Hey,

this is most likely due to “invalid” (for browsers only accept css values from 100-900 in full hundred intervals) weight classes. My guess is that the “Air” weight and the “Regular” can’t be distinguished because the “Air” does not recognized. Based on the load order of the fonts one or the other will fail to load/switch properly.

I have this tracked as an issue to fix here and here and the work in progress development version already has a work around for those situations — I hope to release this soon, but it needs more testing still.

In the meantime I suggest you make sure either the all weight classes are unmistakable and unique and adhere to the browser 100 rules, or you can export the Woff using a “MyfontAir” family name (instead of the Myfont Air, which will conflict with Myfont Regular in this case).

I leave this issue open until a solution to this is live.

Thanks for your quick reply @kontur, I’ve passed on the font requirement to our font dev.

All good once we had the font updated — thank you @kontur !

As an aside, I’m trying to figure out how to change the default font size for mobile only… trying something like this and whilst the slider nudges down a bit, it doesn’t go down to my override size – it just goes down about 4px from the default. The settings for desktop are 15px min / 150px initial / 255px max.

Any ideas?

$('div[data-target-property="font-size"] input').val('56px').delay(250).trigger('change');

You can do something like the below:

// let the page load first
jQuery(function ($) {

// listen for whenever a Fontsampler finishes initialising, not exactly a feature, but this is documented here for developers:
// https://github.com/kontur/fontsampler-wordpress-plugin
$("body").on("fontsampler.event.afterinit", ".fontsampler-wrapper", function () {

	// somehow determine when you want to show a different, predetermined size on load, I’ll leave this one up to you
	if (mobile) { 
		
		// get any initialised fontsampler that has not yet been marked as having had the font size reduced
		$(".fontsampler-wrapper.initialized:not(.fontsize-reduced)”).each(function () {
			
			// reduce the input’s value, then trigger a “change” event so the jQuery plugin sliders will update, 
			// which will in turn reduce the actual font size
			$(this).find(".fontsampler-ui-block-fontsize input.specimen-slider").attr("value", "12").trigger("change”)

			// since this event will be triggered whenever any Fontsampler initializes on the page, somehow mark this one as “done”
			// in case there are several Fontsamplers
			$(this).addClass(“fontsize-reduced”)
		})
	}
})
})

Thanks for the quick reply @kontur

The event.afterinit callback function is handy as I was relying on setTimout before, however whilst your code seems sound it doesn’t quite work… the input value updates, but change isn’t triggered…

Using Chrome dev tools I noticed that even though the value attr was updating, the actual computed value wasn’t changing, so tried using val(52) instead.

https://www.dropbox.com/s/lzfegzlhn94unbj/Screenshot%202018-08-29%2011.14.10.png?dl=0

Current code:

$(this).find(".fontsampler-ui-block-fontsize input.specimen-slider").val("52");
			setTimeout(function(){
				$(this).find(".fontsampler-ui-block-fontsize input.specimen-slider").trigger("change");
			},1000);

The issue is the triggering of the input change, I think. I tried having the trigger(“change”) on a separate line rather than chained, but that didn’t work either.

If I put a console.log in here its definitely running, and as I say its updating the value just fine, but not triggering the input in order to make the setting actually apply. Oh, and the class isn’t being added either… odd!

Any other ideas?

Thanks

• This reply was modified 6 years, 6 months ago by jamblo.

Please use my code, but I noticed some of the pasted “-marks got transformed to actual quotation marks, which breaks the code.

I’ve used that same code here to test: https://fontsampler.johannesneumeier.com/2018/08/29/testing-custom-mobile-font-size-configuration/

That is the same Fontsampler instance as on the frontpage, but as you see it loads and after forcing a resize sets the font to 12px not 24px like on the front page.

When using my code, are you certain it executes and are you certain the mobile check gets triggered and are you certain there is no other javascript errors?

Yes, I even went to your example page (which I see is working) and copied your JS (except the if is single part). I don’t have any if(mobile) conditionals around the code either…

I’m running jQuery v1.12.4, as are you…

I even tried binding the trigger to a button… still no good. Ack!

Quite likely something on your page is interfering somehow. Can you make a private page showing your code and send me a link, for example to [email protected]?

Emailed… thank you!

Instead of .attr("value",20).trigger("change") could you try .val(20).trigger("change") and let me know if that works?

Yes! That works.

I said above that I tried that, but I didn’t have it set outside of my other code… must have been a misfire caused by code elsewhere.

Thanks a lot for your speedy and affective help, Kontur!

• This reply was modified 6 years, 6 months ago by jamblo.

Happy to help. Very cool font site coming up!

For commercial work consider (or have your client consider) making a small donation to support the plugin development and get featured on the about page ??

Thanks for marking as resolved. Feel free to be in touch again should you hit other problems.