Streaming live at 10am (PST)

Need help with integrating social share kit font into Webflow site


#1

Heya Webflow!

We're having an issue with a font not rendering on our site.

We use the following library for social media sharing icons: https://github.com/darklow/social-share-kit

They use Font Awesome to display the icons I believe.

However, as we cannot upload custom CSS / JS files to Webflow, we have the source files located elsewhere (on another AWS S3 bucket).

When you access the site (e.g. from Chrome) the icons come up like so (and you can see the console error): http://b3.ms/4pzMbbw5M0Gx

However, they should come up like this (using Safari the issue does not occur): http://b3.ms/KkdA3vNy93Jq

I noticed someone else had the issue, but looks resolved... http://forum.webflow.com/t/resolved-font-awesome-not-working-due-to-cross-origin-policy/8539

We could fix this by adding a line of code into the .htaccess file, but we can't edit it on Webflow: https://davidwalsh.name/cdn-fonts

The site / page can be viewed here: http://www.collectivecamp.us/blog/the-problem-with-corporate-innovation-programs

So I am wondering what the best solution here is... thanks!


#2

Hey @johnnymitch I'm just checking real quick, so you have you AWS S3 bucket set to public? By default they're set to private but once they're set to public (right click/option click and make it public) then they should work. Keeping my fingers crossed, please let me know if I can further help :smile:


#3

Heya @Waldo thanks for the quick reply!

The files are set to public :smile: I will admit, when I first stared using AWS, it took an all nighter to figure out how to make a damn file public haha!

Here are the file URLs on AWS:
- https://s3-ap-southeast-2.amazonaws.com/collective-campus/css/social-share-kit.css
- https://s3-ap-southeast-2.amazonaws.com/collective-campus/js/social-share-kit.min.js

ACTUALLY, I COULD just upload the fonts to Webflow, then add the CSS and JS from these files directly into Webflow via custom-code.

Think that would work?


#4

Hey @johnnymitch you most definitely can add the custom font to your site via site settings and custom code to your site, CSS in the head and scripts in the footer and there's a great walk thru on how to do that here:
http://help.webflow.com/lesson/custom-code
😁

I use AWS S3 servers for anything I need to host externally on certain builds :smile:


#5

Nice one, AWS S3 is excellent @Waldo!

So I did the above and I now get these errors:

http://b3.ms/avz9EWLNnWpd

:frowning:

Any advice?


#6

Hi @johnnymitch, I took a quick look and it seems for me, there are two different errors on the page.

From what I can tell, there is a couple of font files that are not found, which are being used in some custom html tags in the social icons

http://www.collectivecamp.us/fonts/social-share-kit.woff
http://www.collectivecamp.us/fonts/social-share-kit.ttf

The social share kit css is looking for the fonts under the fonts folder, which does not exist for a site hosted in Webflow. Here are the font face declarations for the Social Share Kit font uploaded to Webflow:

@font-face {
font-family: 'Social share kit';
src: url('https://daks2k3a4ib2z.cloudfront.net/56413b181484d4be2a5bd76b/568f569860473ef56670f9e7_social-share-kit.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56413b181484d4be2a5bd76b/568f569957e6ebc02f82f892_social-share-kit.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56413b181484d4be2a5bd76b/568f5699badea96c57c78f48_social-share-kit.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}

One thing to try, is to change the path of the css from the social-share-kit.css file, to have the correct path matching the urls loaded by webflow:

The other issue is that there is a script having a 403 forbidden error and that would still need to be looked at, to see what is causing the issue:

https://api.autopilothq.com/anywhere/0ce97be818d14148bdb7eb193e58075312dee20696da42a8b87d4043cf282b9c?t=Blogs&u=http%3A%2F%2Fwww.collectivecamp.us%2Fblog%2Fthe-problem-with-corporate-innovation-programs&r=http%3A%2F%2Fforum.webflow.com%2Ft%2Ffont-issie-re-cors-cross-origin-resource-sharing-policy%2F23075

I hope that helps with the fonts, let me know and thanks in advance !


#7

Heya @cyberdave ! Thanks for that! :smile: It has been tricky indeed!

Is there any way in future for me to get these URLs somehow?

I tried the code you send (refresh that page and you should see it in there), but unfortunately no change... I may have implemented it wrong through?

Let me know anyway... I'll see what that script issue is!


#8

IF it turns out this won't be easy to implement... do you recommend another social sharing kit we can use, that will work well with Webflow (it's just we use this kit on 3x sites now, all broken we just realised)


#9

Hi @johnnymitch,

Try this:

  1. Upload your custom fonts to the site, and publish. Open the published site css file and scroll to the bottom of the page. You will see the "social share kit" font defined similar to below (the links to fonts will be different on your site):

    @font-face {
    font-family: 'social share kit';
    src: url('https://daks2k3a4ib2z.cloudfront.net/568f91ce60473ef566712ae1/568f9531b2df7bc62f563427_social-share-kit.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/568f91ce60473ef566712ae1/568f9531b2df7bc62f563428_social-share-kit.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/568f91ce60473ef566712ae1/568f953111c7337557e7f5ec_social-share-kit.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/568f91ce60473ef566712ae1/568f953160473ef566712c98_social-share-kit.svg') format('svg');
    font-weight: 400;
    font-style: normal;
    }

Next, replace the font face declaration in the social-share-kit.css file, with the font face declaration above.

An important step, you will want to change the name of the font face generated by Webflow "social share kit" to "social-share-kit".

Save the css file and and either link to it, or paste all the css to the head of your site.

Republish your site and see how things look. Also, I have created an example integration you can clone:

https://webflow.com/website/social-share-kit

I hope this helps :wink:


#10

BADASS @cyberdave this worked!

Lifesaver!!

http://collective-campus1.webflow.io/blog/lemonade-stand-a-success-story-in-teaching-children-entrepreneurship

Thanks a mil for the support!


#11

@johnnymitch, glad to hear it helped. Get ready for a great 2016 :wink:


#12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.