Hi David,

Thanks for taking the time to point out each of the bullets I listed, it’s much appreciated. I’ve got a decent bit of programming under my belt, so I should be able to pull off some of the trickier bits myself with a couple short WordPress PHP tutorials and some trial and error. Already pretty much getting the search button functioning as I want it.

Just want to check something with you, I’ve got @font-face running since my mockup and site will be using a custom font. It’s strangely working perfectly on Safari desktop, but Chrome and iOS Safari are just not changing over. I haven’t tried Firefox, Opera or IE/Edge yet, but I’m wondering if you could possibly fill me in as to why it’s not registering on iOS Safari and all of Chrome? Here’s my @font-face CSS:

@font-face {
	font-family: 'Gotham-Light';
	src: url('GothamLight.svg') format("svg");
	src: url('GothamLight.eot'), url('GothamLight.eot?#iefix') format('embedded-opentype'), url('GothamLight.woff2') format('woff2'), url('GothamLight.woff') format('woff'), url('GothamLight.ttf') format("truetype");
}

@font-face {
	font-family: 'Gotham-Book';
	src: url('GothamBook.svg') format("svg");
	src: url('GothamBook.eot'), url('GothamBook.eot?#iefix') format('embedded-opentype'), url('GothamBook.woff2') format('woff2'), url('GothamBook.woff') format('woff'), url('GothamBook.ttf') format("truetype");
}

@font-face {
	font-family: 'Gotham-Medium';
	src: url('GothamMedium.svg') format("svg");
	src: url('GothamMedium.eot'), url('GothamMedium.eot?#iefix') format('embedded-opentype'), url('GothamMedium.woff2') format('woff2'), url('GothamMedium.woff') format('woff'), url('GothamMedium.ttf') format("truetype");
}

@font-face {
	font-family: 'Gotham-Bold';
	src: url('GothamBold.svg') format("svg");
	src: url('GothamBold.eot'), url('GothamBold.eot?#iefix') format('embedded-opentype'), url('GothamBold.woff2') format('woff2'), url('GothamBold.woff') format('woff'), url('GothamBold.ttf') format("truetype");
}

As mentioned, it works perfectly on my MacBook Pro, but not on my PC, iPhone or iPad. I read in an article that Chrome has this tick to its coding that prefers the svg format to come first, but even that’s not working. In fact, I think it’s slowing my Safari’s load time for the fonts by doing that.

Would appreciate the help on this, thanks.