Font problem

  • Resolved vipteam

    (@vipteam)


    8 years, 3 months ago

    Vega (font) does not support Eastern European languages (Croatian: ??????????). Instead I see the deformed letters. I would like to Vega has a universal font such as Open Sans. And it should be the default. Even, it looks nice.

    So, this is my suggestion for a future version.

    In the meantime, is there any easy way to change the font in the Open Sans?

    Thanks in advance. Regards,

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hello vipteam,

    You can try Use Any Font plugin.

    Hope this will helps you.

    Thread Starter vipteam

    (@vipteam)

    Hi @saurabhdhariwal,

    Thanks, I know. But I do not want to use the plugin. I love minimalism.

    Regards,

    Thread Starter vipteam

    (@vipteam)

    UPDATE:

    Open Sans font can be used for all. Headings and body, both. The style is also available through the font-weight. It is thus solved in many WP themes. For example, Porto Theme (themeforest) used Open Sans only and this WP theme looks gorgeous!

    Regards,

    Theme Author lyrathemes

    (@lyrathemes)

    @vipteam – I don’t think we’ll be changing the font in the coming releases though I will bring this up with my designer. I would suggest loading up the Open Sans font in a child theme and use that as needed. Let me know if you need anything.

    Thread Starter vipteam

    (@vipteam)

    I see. Not urgent. I would love if you implement this at some point. Vega Theme is my favorite theme. I love working with Child Themes, custom css, and functions snippets. This is not a problem for me.

    I’m already looking on the Internet how to load a font in Vega Child Theme. But I do not know how to achieve this. Can you help me. Thanks in advance.

    Regards,

    Thread Starter vipteam

    (@vipteam)

    UPDATE:

    Vega-Child Theme:

    Vega Child Theme

    fonts (map):

    Fonts Map

    style.css (custom css, child theme):

    /* ---------- Custom Font - Open Sans ---------- */
@font-face {
          font-family: 'OpenSans';
          src: url('fonts/OpenSans-Regular.ttf');
          font-weight: regular;
}

@font-face {
          font-family: 'OpenSans';
          src: url('fonts/OpenSans-Bold.ttf');
          font-weight: bold;
}

@font-face {
          font-family: 'OpenSans';
          src: url('fonts/OpenSans-ExtraBold.ttf');
          font-weight: extrabold;
}

/* ---------- Call the font - Open Sans ---------- */
body {font-family: 'OpenSans', sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family: 'OpenSans', sans-serif; font-weight: 600;}
.block-title {font-family: 'OpenSans', sans-serif;}
.home .block-title {font-family: 'OpenSans', sans-serif; font-weight:900}
.btn {font-family: 'OpenSans', sans-serif;}
.light {font-family: 'OpenSans', font-weight:300; }
.navbar-custom .navbar-nav > li > a {font-family:'OpenSans', sans-serif;}
.blog-feed .entry .entry-meta {font-family: 'OpenSans', sans-serif; font-weight:600;}
.post-content .post .entry-meta {font-family:'OpenSans', sans-serif; font-weight:600;}
.post-content .type-attachment .entry-meta {font-family:'OpenSans', sans-serif; font-weight:600;}
.frontpage-cta p {font-family: 'OpenSans', sans-serif;}
.recent-entry .recent-entry-meta {font-family:'OpenSans', sans-serif; font-weight:600;}
h3#comments {font-family: "Lato", sans-serif; font-weight: 400;}
#respond h3 {font-family: "Lato", sans-serif; font-weight: 400;}

    I’m not sure how to enter the font-weight. It seems that I’m wrong somewhere …

    Thread Starter vipteam

    (@vipteam)

    No, this is wrong above. All letters are bold.

    This below makes sense:

    /* ---------- Custom Font - Open Sans ---------- */
@font-face {
          font-family: 'OpenSans';
          src: url('fonts/OpenSans-Regular.ttf');
}

/* ---------- Call the font - Open Sans ---------- */
body {font-family: 'OpenSans', sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family: 'OpenSans', sans-serif; font-weight: 600;}
.block-title {font-family: 'OpenSans', sans-serif;}
.home .block-title {font-family: 'OpenSans', sans-serif; font-weight:900}
.btn {font-family: 'OpenSans', sans-serif;}
.light {font-family: 'OpenSans', font-weight:300; }
.navbar-custom .navbar-nav > li > a {font-family:'OpenSans', sans-serif;}
.blog-feed .entry .entry-meta {font-family: 'OpenSans', sans-serif; font-weight:600;}
.post-content .post .entry-meta {font-family:'OpenSans', sans-serif; font-weight:600;}
.post-content .type-attachment .entry-meta {font-family:'OpenSans', sans-serif; font-weight:600;}
.frontpage-cta p {font-family: 'OpenSans', sans-serif;}
.recent-entry .recent-entry-meta {font-family:'OpenSans', sans-serif; font-weight:600;}
h3#comments {font-family: "OpenSans", sans-serif; font-weight: 400;}
#respond h3 {font-family: "OpenSans", sans-serif; font-weight: 400;}

    I’ve now got the Open Sans but I have no font-weight. This goes beyond my knowledge. This can not be solved without your help. I’m stuck here.

    Please, can you help me. Thanks in advance.

    Regards,

    Theme Author lyrathemes

    (@lyrathemes)

    I would recommend loading the font in the child theme via Google Fonts. Here is a sample child theme that does that: https://we.tl/CdWhNR2yft See functions.php line 12.

    Thread Starter vipteam

    (@vipteam)

    Thank you. It works!

    I have finally found a solution!

    The problem is with the homepage Banner Text. Bigger font always creates a problem. No matter which font. This works well:

    /* ---------- Homepage Banner Text ---------- */
.frontpage-banner.image-banner.frontpage-banner .block-title {font-size: 46px; font-weight: 700;}

    I was persistent and I wanted to work with self-hosted font. Here’s how.

    I have made a download of Open Sans font on https://www.fontsquirrel.com/. All I need is Open Sans Regular. Other I’m deleted (Bold, BoldItalic, ExtraBold, etc.).

    Then I fine-tuned font with Webfont Generator: https://www.fontsquirrel.com/tools/webfont-generator

    This is how to properly call a self-hosted font (custom style.css):

    /* ---------- Custom Font - Open Sans ---------- */
@font-face {
          font-family: 'OpenSans';
          src: url('fonts/OpenSans-Regular.ttf');
}

/* ---------- Call the font - Open Sans ---------- */
body {font-family: 'OpenSans-Regular', sans-serif; font-size:14px; line-height:24px; color:#212121;}
h1,h2,h3,h4,h5,h6 {font-family: 'OpenSans-Regular', sans-serif; line-height:1.36; font-weight: 600;}
.block-title {font-family: 'OpenSans-Regular', sans-serif; font-weight: 100; margin:0 0 25px; /* text-transform:uppercase; */ position:relative; text-align:center; line-height:1.2; padding-bottom:10px; color:#3f3f3f; }
.home.block-title {font-family: 'OpenSans-Regular', sans-serif; font-weight: 500}
.btn {font-family: 'OpenSans-Regular', sans-serif; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; font-size:13px; padding:12px 20px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
.light {font-family: 'OpenSans-Regular', font-weight:300; }
.navbar-custom.navbar-nav > li > a {font-family:'OpenSans-Regular', sans-serif; font-size:12px; font-weight:bold; font-weight:600; padding: 25px 12px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; text-transform: uppercase; color:#010101;}
.blog-feed.entry.entry-meta {font-family: 'OpenSans-Regular', sans-serif; font-weight:600; font-size:12px; margin-bottom:15px;}
.post-content.post.entry-meta {font-family:'OpenSans-Regular', sans-serif; font-weight:600; font-size:12px; margin-bottom:15px; margin-top:20px;}
.post-content.type-attachment.entry-meta {font-family:'OpenSans-Regular', sans-serif; font-weight:600; font-size:12px; margin-bottom:15px; margin-top:20px;}
.frontpage-cta p {font-family: 'OpenSans-Regular', sans-serif; text-align:center; line-height: 1.36; font-size:22px; font-weight:bold;  /*letter-spacing:-1px*/}
.recent-entry.recent-entry-meta {font-family:'OpenSans-Regular', sans-serif; font-weight:600; font-size:12px; margin-bottom:15px;}
h3#comments {font-family: "OpenSans-Regular", sans-serif; font-weight: 400; margin: 0 0 20px; color: #F55145;}
#respond h3 {font-family: "OpenSans-Regular", sans-serif; font-weight: 400; margin: 20px 0 20px;font-size: 20px; text-transform:uppercase; color: #F55145;}

    Problem resolved. I hope that this will help someone.

    Regards,

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Font problem’ is closed to new replies.