How can I customise the Header like the attached file?

I am having a hard time in replicating such headers and sub menus even the color scheme and the fonts also.
I tried what the documentation said on using the fonts, wherein i use the font.css and change the font-family to the font I want to use then included in the head tag the css/font.css also added the font in the google api.
Even after trying that the font in not changing, when I inspect it on google chrome it tells me that it is using the Source Sans Serif font!

Please help me.

I think the google api thing I have not configured properly.

Although on my pc when I open the file font.css I have the font-family changed and saved, which then is being uploaded to the server but when I inspect it shows the other.

body,
small,
.sub-menu-container .menu-item > .menu-link,
.wp-caption,
.fbox-center.fbox-italic p,
.skills li .progress-percent .counter,
.nav-tree ul ul a,
.font-body { font-family: 'Yanone Kaffeesatz', sans-serif !important; }

h1,
h2,
h3,
h4,
h5,
h6,
#logo a,
.menu-link,
.mega-menu-style-2 .mega-menu-title > .menu-link,
.top-search-form input,
.entry-link,
.entry.entry-date-section span,
.button.button-desc,
.fbox-content h3,
.tab-nav-lg li a,
.counter,
label,
.widget-filter-links li a,
.nav-tree li a,
.wedding-head,
.font-primary { font-family: 'Yanone Kaffeesatz' !important; }

http://labourlawnews.epizy.com/index.html

Also please help me customising the headers as I had mentioned in my first post above !