Support Center Visit Demo License manager Buy @ envato

Custom font problem

piraderspiraders
in Fonts
Hi.

I use two fonts on my site montserrat and lato. They're working for almost everything but not menu and buttons. For buttons the font is crippled. If I write in my language letters āšž etc I get different font for them although I entered Google Font Subset - Latin Extended.

Here are few examples -

 image

image

But for custom font those letter work. 

I would like to change menu and btn font to Lato with Latin extended character so it would look good.

My website - www.digitalbrand.lv

Comments

  • piraderspiraders
    Actually font also doesn't work for text. Maybe Lato font is not working because montserrat font all letters ar ok.
  • piraderspiraders
    edited December 2015
    Also I wanted to know how can I change font weight for content and for menu ?
  • piraderspiraders
    edited December 2015
    Also how can I fix this issue with header (blue field and bad quality) on mobile ?

    image

    image



  • piraderspiraders
    edited December 2015
    Also where can I change height of the menu because it's unnecessarily too high - 

    image
  • AlbertAlbert
    1. Are you sure the font you are trying to use support special signs in your language?

    2. Font weight can be changed with custom css only but this weight must be of course supported by font and must be included under Fonts > Family section.

    3. Header background is not tall enough and that's why you got this blue background behind the image. Can you explain what exactly you want to do then? Decrease height of this background on mobile devices or what?

    4. You got top bar right activated and that's why you have this space below the logo. Looks like one of your options is active in the back-end. If you don't know which, you can always use the following css to remove that section: 
    #Header .top_bar_right { display: none !important; }
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • piraderspiraders
    1. Yes I'm sure. Double checked here http://www.fontsquirrel.com/fonts/lato

    2. Understood

    3. Look at the desktop version image - the glasses are on the bottom, there are pencils on the top. So the image somehow is pushed up on mobile version.

    4. Thanks. It worked.
  • AlbertAlbert
    1. You are checking it wrong. You are using Google font, NOT custom font and all styles you supposed to check on https://www.google.com/fonts - if you look at http://pasteboard.co/rvgTkJZ.png you see that you did mistakes somewhere because the fonts can not be loaded. The mistake is for sure with subset because it's wrong. Check on Google Fonts page how subset looks like. More details about that you can see on http://forum.muffingroup.com/betheme/discussion/7/how-to-use-fonts-with-special-characters-like-cyrilic-or-polish as well.

    3. Your thinking is wrong because on desktop, your header height is 250px while on mobile it's 350px. It's because header on desktop is different than on mobile. What you can do is set fixed height of header for all versions with the following css: 
    body:not(.template-slider):not(.header-simple) #Header { min-height: 250px !important; }
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • piraderspiraders
    1. Used different font, I think Latin Extended glyphs now works

    3. Looks good now


    Thanks for help. 
    Really appreciate.


  • AlbertAlbert
    You are welcome! :)
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.