mobile nav won't load custom font

I have a custom font uploaded for almost all the copy on my site thusssss far but one problem is the navigation as well as the text overlay on thumbnail page images.

Screen 1: "work, about contact" are supposed to be the same font as the name "emily r kemp and nav links about, contact, etc"

Screen 2: ref for correct fonts

Screen 3: "chotto motto" and all copy overlaying images needs to be font mirroring those in screen 2

My site isn't live so I can't share the URL but here are two images to show one desktop, one mobile:  

Any help is very much appreciated! 

You can setup password & share url. We can check easier.

@tuanphan my site url is http://www.missemilykemp.com and my password is "emilyrkemp"

My other question is how to customize the portfolio thumbnails to have a block of color over them instead of the image, then when you hover over the image reveals. I'm not sure if this is something that's possible, but I'd love to customize the portfolio thumbnails more 🙂

Thank you so much for your help, I really appreciate it!

Add to Home > design > Custom CSS

.header-menu-nav-item a {
    font-family: 'Clearface' !important;
}
h3.portfolio-title {
    font-family: 'Clearface' !important;
}

Same color for all projects, or different color?