How To Use Custom Store Locator Fonts In Bullseye

Bullseye LocationsShopify Store Locator, Store Locator

Recently, we’ve had a few questions from clients on how to use their brand’s web styles within the Bullseye store locator. So today we’re going to show you how quick and easy it can be to get custom store locator fonts working for two of the more popular web fonts, Google and Adobe Typekit.

Instructions for Custom Store Locator Fonts

Google Fonts

For adding Google Fonts, go to https://www.google.com/fonts. Choose your font collection and select Use.

google font collections

Copy the reference code.

google font reference code

Login to your Bullseye Admin then go to Interfaces and select the interface you want to Edit. Then go to the Styles section and click on the Advanced tab. This is where you’ll add the reference code from above as well as overriding some styles to use the font.

custom store locator fonts styles editor

Here’s some sample code:

<link href=’https://fonts.googleapis.com/css?family=Lobster’ rel=’stylesheet’ type=’text/css’>

<style>
#results h2 {font-family: ‘Lobster’, cursive;}
</style>

Typekit

For Typekit, you’ll need to login or create an account at https://typekit.com. Select the font you want to use in your store locator.

adobe typekit fonts

If you’re using the store locator in an iFrame, you’ll need to Create a Kit with the bullseyelocations.com domain so it gets whitelisted.

typekit add domain

Then copy the Javascript reference code provided.

typekit font reference code

After logging in to your Bullseye account, go to Interfaces and select the interface you want to Edit. Then go to the Styles section and click on the Advanced tab. Paste the code above and add any overriding styles to use the font you selected.

advanced editing custom store locator fonts

Here’s some sample code:

<script src=”https://use.typekit.net/aeq1lql.js”></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<style>
.SearchformTab label { font-family: “europa”,sans-serif;}
</style>

And it’s that easy to brand your Bullseye store locator!

If you have any questions about how to setup an embeddable interface, check out our knowledgebase for more information: http://kb.bullseyelocations.com/support/solutions/articles/5000541957-creating-an-embeddable-interface