Incorrect font displaying on live site

Site URL: http://www.studioeightyseven.com

I am using Adobe Caslon Pro and Bebas throughout my site. I recently switched up my h1 and h3 styling for SEO purposes, and now font styling I set for my h1 (Adobe Caslon) is displaying as Bebas. 

what I see while editing and what I hope to see live... 

What I am actually seeing live: 

I tried to override using CSS but with no success. Any ideas what is happening?

@StudioEightySeven Hi. Add this CSS to override font

h1 {
    font-family: adobe-caslon-pro !important;
}

@StudioEightySeven and some small problems on your site. 

If you need to fix any problems, just comment, we will check it again.

1. (Mobile-Homepage) Text is narrow

2. (Mobile-Homepage) Huge white spacing

3.(Mobile-Footer) Want to change order of elements in footer?

4. (Tablet-Homepage) Want to change to 4 logos/row on tablet?

5. (Mobile-Branding and Logo Design page) Huge white spacing

6. (Tablet-Branding and Logo Design) Text is narrows, huge logo, huge white spacing

7. (Tablet-Website design) Huge logo – white spacing

8. (Mobile-Website design) Not equal spacing between items

9. (Mobile-Website Design) add text left/right padding?

10. (Mobile-Freelance) Huge logo – white spacing

11. (Tablet-About) Text break

12. (Tablet-About) huge logo – white spacing

13. (Mobile-Connect) add text left/right spacing?