Navigation
Archive / Installing Custom Font (MyFonts) (Page 2)
This is archived content. Visit our new forum.

Tagged: 

1 2
  • Author
    Posts
  • January 25, 2017 at 8:06 am #1344699

    Edward Williams
    Participant
    This reply has been marked as private.
    January 25, 2017 at 8:11 am #1344701

    Edward Williams
    Participant
    This reply has been marked as private.
    January 25, 2017 at 10:16 am #1344893

    Jade
    Moderator

    Hi Edward,

    The font seems to be working fine on the text on the site except the menu items that render as Times New Romans.

    To solve that, please try to update this code:

    p, h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "Volte-Regular" !important;
}

    to

    .x-navbar .desktop .x-nav > li > a, p, h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "Volte-Regular" !important;
}

    Hope this helps.

    January 25, 2017 at 10:47 am #1344936

    Edward Williams
    Participant

    That worked. Thank you! The only other issue is buttons and sub-menu items.

    Would I use .x-btn or a.x-btn to solve the buttons?

    January 25, 2017 at 12:41 pm #1345076

    Jade
    Moderator

    Hi Edwards,

    Please use this selector: .x-navbar .desktop .sub-menu a

    Hope this helps.

    January 25, 2017 at 2:57 pm #1345233

    Edward Williams
    Participant

    I see what had to happen.

    I was trying to put it all in this line:

    .x-navbar .desktop .x-nav > li > a, p, h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "Volte-Regular" !important;
}

    When they needed to be in their own separate lines.

    Soon as I did that, cleared the cache and refreshed the page all is now well.

    Thank you so much for being patient with me y’all! Appreciate it!

    January 25, 2017 at 3:41 pm #1345309

    Edward Williams
    Participant

    One last thing.

    I noticed that I cannot get heavier font weights. I figure this is because all fonts are being controlled through Volte-Regular.

    In order to get the other 5 weights available, will I need to do the following for each font:

    .x-navbar .desktop .x-nav > li > a, p, h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "Volte-Light" !important;
}
    .x-navbar .desktop .x-nav > li > a, p, h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "Volte-Bold" !important;
}
    January 25, 2017 at 4:42 pm #1345385

    Jade
    Moderator

    Hi there,

    Yes that is correct. In some fonts, you will have to load the actual font weight through the font file when the font weight are not working.

    January 25, 2017 at 4:51 pm #1345393

    Edward Williams
    Participant

    So this is in the FTP in the style.css sheet:

    @font-face {
  font-family: 'Volte-Regular';
  src: url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_0_0.eot');
  src: url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_0_0.eot?#iefix') format('embedded-opentype'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_0_0.woff2') format('woff2'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_0_0.woff') format('woff'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_0_0.ttf') format('truetype'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_0_0.svg#wf') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Volte-Light';
  src: url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_1_0.eot');
  src: url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_1_0.eot?#iefix') format('embedded-opentype'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_1_0.woff2') format('woff2'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_1_0.woff') format('woff'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_1_0.ttf') format('truetype'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_1_0.svg#wf') format('svg');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Volte-Bold';
  src: url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_2_0.eot');
  src: url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_2_0.eot?#iefix') format('embedded-opentype'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_2_0.woff2') format('woff2'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_2_0.woff') format('woff'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_2_0.ttf') format('truetype'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_2_0.svg#wf') format('svg');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Volte-LightItalic';
  src: url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_3_0.eot');
  src: url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_3_0.eot?#iefix') format('embedded-opentype'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_3_0.woff2') format('woff2'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_3_0.woff') format('woff'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_3_0.ttf') format('truetype'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_3_0.svg#wf') format('svg');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Volte-BoldItalic';
  src: url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_4_0.eot');
  src: url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_4_0.eot?#iefix') format('embedded-opentype'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_4_0.woff2') format('woff2'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_4_0.woff') format('woff'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_4_0.ttf') format('truetype'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_4_0.svg#wf') format('svg');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Volte-RegularItalic';
  src: url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_5_0.eot');
  src: url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_5_0.eot?#iefix') format('embedded-opentype'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_5_0.woff2') format('woff2'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_5_0.woff') format('woff'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_5_0.ttf') format('truetype'),
  url('http://development.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_5_0.svg#wf') format('svg');
  font-weight: normal;
  font-style: italic;
}

p, h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "Volte-Regular" !important;
}

    This is in X-Theme customizer:

    .v400 {
   font-family: 'Volte-Regular', sans-serif;
   font-weight: normal;
   font-style: normal;
}

.v400i {
   font-family: 'Volte-RegularItalic', sans-serif;
   font-weight: normal;
   font-style: italic;
}

.v100 {
   font-family: 'Volte-Light', sans-serif;
   font-weight: 100;
   font-style: normal;
}

.v100i {
   font-family: 'Volte-LightItalic', sans-serif;
   font-weight: 100;
   font-style: italic;
}

.v700 {
   font-family: 'Volte-Bold', sans-serif;
   font-weight: 700;
   font-style: normal;
}

.v700i {
   font-family: 'Volte-BoldItalic', sans-serif;
   font-weight: 700;
   font-style: italic;
}

    Something tells me, however, that this isn’t right.

    January 25, 2017 at 10:24 pm #1345799

    Rue Nel
    Moderator

    Hello There,

    Thanks for updating in! Since you already have loaded the custom font, you can apply it to other elements on the page like this:

    element-1 {
  font-family: 'Volte-Light', sans-serif;
}

element-2 {
  font-family: 'Volte-Regular', sans-serif;
}

element-2 {
  font-family: 'Volte-Bold', sans-serif;
}

    In real applications, it may look like this:

    .x-btn {
  font-family: 'Volte-Light', sans-serif;
}

body, p {
  font-family: 'Volte-Regular', sans-serif;
}

h1, .h1,
h2, .h2,
h3, .h3 {
  font-family: 'Volte-Bold', sans-serif;
}

    Hope this helps.

    January 27, 2017 at 3:20 pm #1348215

    Edward Williams
    Participant

    That doesn’t work.

    Everything stays in Volte-Regular.

    January 28, 2017 at 12:57 am #1348631

    Friech
    Moderator

    Hi There,

    I did check the site specifically how did you apply the font. You said above that there is something wrong with this classes, right?

    .v400 {
   font-family: 'Volte-Regular', sans-serif;
   font-weight: normal;
   font-style: normal;
}

.v400i {
   font-family: 'Volte-RegularItalic', sans-serif;
   font-weight: normal;
   font-style: italic;
}

.v100 {
   font-family: 'Volte-Light', sans-serif;
   font-weight: 100;
   font-style: normal;
}

.v100i {
   font-family: 'Volte-LightItalic', sans-serif;
   font-weight: 100;
   font-style: italic;
}

.v700 {
   font-family: 'Volte-Bold', sans-serif;
   font-weight: 700;
   font-style: normal;
}

.v700i {
   font-family: 'Volte-BoldItalic', sans-serif;
   font-weight: 700;
   font-style: italic;
}

    Well that classes is not strong (specific) enough to over rule this:

    .x-navbar .desktop .x-nav > li > a, p, h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "Volte-Regular" !important;
}

    You see that rule is declared as !important you can’t over rule that unless you declare your custom classes property as !important as well.

    Update your code to this and add it on your child theme’s style.css file.

    .v400 {
   font-family: 'Volte-Regular', sans-serif !important;
   font-weight: normal !important;
   font-style: normal !important;
}

.v400i {
   font-family: 'Volte-RegularItalic', sans-serif !important;
   font-weight: normal !important;
   font-style: italic !important;
}

.v100 {
   font-family: 'Volte-Light', sans-serif !important;
   font-weight: 100 !important;
   font-style: normal !important;
}

.v100i {
   font-family: 'Volte-LightItalic', sans-serif !important;
   font-weight: 100 !important;
   font-style: italic !important;
}

.v700 {
   font-family: 'Volte-Bold', sans-serif !important;
   font-weight: 700 !important;
   font-style: normal !important;
}

.v700i {
   font-family: 'Volte-BoldItalic', sans-serif !important;
   font-weight: 700 !important;
   font-style: italic !important;
}

    I read the whole thread and I notice that some of your changes did not take effect immediately. So make sure you clear your browser’s cache before you preview a page.

    Cheers!

    February 1, 2017 at 5:50 pm #1354425

    Edward Williams
    Participant

    Fixed!

    Thank you everyone who contributed to this madhouse!

    February 1, 2017 at 7:12 pm #1354568

    Nico
    Moderator

    Happy to hear that.

    Feel free to ask us again.

    Thanks.

  • Author
    Posts
1 2