Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #767099

    Hello there,

    I would need your help with the following:

    1. I added my .eot, .svg, .ttf, .woff, and .woff2, font files for both fonts akkurat_regular and akkurat_light_regular to mywebhost/vancouverforliving.com/wp-content/uploads/fonts folder.

    2. Then I inserted following code in Enfold Child Theme: Stylesheet (style.css):

    /* — FONT CHANGES — */
    @font-face {
    font-family: ‘akkuratregular’;
    src: url(‘http://vancouverforliving.com/wp-content/uploads/fonts/akkurat_regular-webfont.eot’);
    src: url(‘http://vancouverforliving.com/wp-content/uploads/fonts/akkurat_regular-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘http://vancouverforliving.com/wp-content/uploads/fonts/akkurat_regular-webfont.woff2’) format(‘woff2’),
    url(‘http://vancouverforliving.com/wp-content/uploads/fonts/akkurat_regular-webfont.woff’) format(‘woff’),
    url(‘http://vancouverforliving.com/wp-content/uploads/fonts/akkurat_regular-webfont.ttf’) format(‘truetype’),
    url(‘http://vancouverforliving.com/wp-content/uploads/fonts/akkurat_regular-webfont.svg#akkuratregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘akkurat_lightregular’;
    src: url(‘http://vancouverforliving.com/wp-content/uploads/fonts/akkurat_light_regular-webfont.eot’);
    src: url(‘http://vancouverforliving.com/wp-content/uploads/fonts/akkurat_light_regular-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘http://vancouverforliving.com/wp-content/uploads/fonts/akkurat_light_regular-webfont.woff2’) format(‘woff2’),
    url(‘http://vancouverforliving.com/wp-content/uploads/fonts/akkurat_light_regular-webfont.woff’) format(‘woff’),
    url(‘http://vancouverforliving.com/wp-content/uploads/fonts/akkurat_light_regular-webfont.ttf’) format(‘truetype’),
    url(‘http://vancouverforliving.com/wp-content/uploads/fonts/akkurat_light_regular-webfont.svg#akkurat_lightregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    h1, h2, h3, h4, h5, h6, p, body, a, div {
    font-family: ‘akkurat_lightregular’;
    }

    #avia-menu {
    font-family: ‘akkuratregular’, !important;
    }
    /* — END FONT CHANGES — */

    3. Result is that font change is displaying fine on my iphone and ipad, but not on my pc on IE and Chrome browsers. It’s showing instead Times New Roman font.

    If you could please advise on what I’m doing wrong and how to fix this issue so that my new fonts display correct on any device or browser.

    Thank you kindly,

    Alan

    #767128

    Hey Alan,

    Can you create folder inside your child theme and name it fonts then put the font files there. Then on your css change it to:

    @font-face {
      font-family: 'akkuratregular';
      src: url('fonts/akkurat_regular-webfont.eot');
      src: url('fonts/akkurat_regular-webfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/akkurat_regular-webfont.woff2') format('woff2'),
      url('fonts/akkurat_regular-webfont.woff') format('woff'),
      url('fonts/akkurat_regular-webfont.ttf') format('truetype'),
      url('fonts/akkurat_regular-webfont.svg#akkuratregular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'akkurat_lightregular';
      src: url('fonts/akkurat_light_regular-webfont.eot');
      src: url('fonts/akkurat_light_regular-webfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/akkurat_light_regular-webfont.woff2') format('woff2'),
      url('fonts/akkurat_light_regular-webfont.woff') format('woff'),
      url('fonts/akkurat_light_regular-webfont.ttf') format('truetype'),
      url('fonts/akkurat_light_regular-webfont.svg#akkurat_lightregular') format('svg');
      font-weight: normal;
      font-style: normal;
    }

    Hope this helps :)

    Best regards,
    Nikko

    #767180

    Hello Nikko,

    Thank you for your prompt reply.

    I did everything as you told me, but for some reason akkurat font didn’t show up until I inserted this code underneath your code in my Enfold Child Theme: Stylesheet (style.css):

    h1, h2, h3, h4, h5, h6, p {
    font-family: ‘akkurat_lightregular’;
    }
    #avia-menu {
    font-family: ‘akkuratregular’;
    }
    #mobile-advanced {
    font-family: ‘akkuratregular’;
    }

    1. I wanted whole website to be in ‘akkurat_lightregular’ font.
    I’m not a programmer, so can you please confirm that I’m using the right code with h1, h2, h3, h4, h5, h6, p?

    2. Also, I wanted my main menu + my advanced menu (smart phones and tablets) to be a bit bolder so in ‘akkuratregular’ font.
    Please confirm my code is correct?

    Thank you for your help.

    Alan

    #767217

    Hi,

    1. Yes, you are right, if you want to make it generic, just use the body tag:

    body {
      font-family: 'akkurat_lightregular', sans-serif;
    }

    so it will be applied even it’s not h1-h6 or p.

    2. I think the code is correct but if it’s not working try using this instead:

    #avia-menu a {
      font-family: 'akkuratregular', sans-serif;
    }

    Hope this helps :)

    Best regards,
    Nikko

    #767245

    Hi there,

    Unfortunately generic body code you suggested doesn’t work for me.

    My original codes for replacing whole website font with one font and replacing main menu + mobile hidden menu with another font are working fine.

    If anyone needs it here is the whole code:

    @font-face {
    font-family: ‘akkuratregular’;
    src: url(‘fonts/akkurat_regular-webfont.eot’);
    src: url(‘fonts/akkurat_regular-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘fonts/akkurat_regular-webfont.woff2’) format(‘woff2’),
    url(‘fonts/akkurat_regular-webfont.woff’) format(‘woff’),
    url(‘fonts/akkurat_regular-webfont.ttf’) format(‘truetype’),
    url(‘fonts/akkurat_regular-webfont.svg#akkuratregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘akkurat_lightregular’;
    src: url(‘fonts/akkurat_light_regular-webfont.eot’);
    src: url(‘fonts/akkurat_light_regular-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘fonts/akkurat_light_regular-webfont.woff2’) format(‘woff2’),
    url(‘fonts/akkurat_light_regular-webfont.woff’) format(‘woff’),
    url(‘fonts/akkurat_light_regular-webfont.ttf’) format(‘truetype’),
    url(‘fonts/akkurat_light_regular-webfont.svg#akkurat_lightregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    #avia-menu {
    font-family: ‘akkuratregular’;
    }

    #mobile-advanced {
    font-family: ‘akkuratregular’;
    }

    h1, h2, h3, h4, h5, h6, p {
    font-family: ‘akkurat_lightregular’;
    }

    If anyone can suggest anything to clean up or improve this code don’t be shy and contribute ;)

    Cheers, Alan

    #767253

    Hi Alan,`

    Instead of body, try to use #top instead. Also you can group up css selectors that uses same properties for example this:

    #avia-menu {
    font-family: ‘akkuratregular’;
    }
    
    #mobile-advanced {
    font-family: ‘akkuratregular’;
    }

    can be changed to:

    #avia-menu,
    #mobile-advanced {
    font-family: ‘akkuratregular’;
    }

    :)

    Regards,
    Nikko

    #767264

    Hi Nikko,

    #top doesn’t work and even strangely grouping css selectors which use the same properties don’t work.

    Thanks for your help.

    Cheers, Alan

    #767316

    Hi,

    Sorry I just copied and pasted the code you posted and didn’t realize the ‘ (single quote) is a bit different, which should cause the code not to work:

    #avia-menu,
    #mobile-advanced {
    font-family: 'akkuratregular';
    }

    Also can you use the #top again then dont’ remove it and wait for us to reply here so we can check why it’s not working.

    Best regards,
    Nikko

    #767604

    Hi there,

    1. Yes, the quote for my main and mobile menus was the problem and now works fine. Thanks :)

    2. However #top css selector which should change font on my whole site to akkurat_lightregular:

    #top {
    font-family: 'akkurat_lightregular';
    }

    works fine only my pc on IE and Chrome browsers, but not on my iphone and ipad.

    My website: http://www.vancouverforliving.com

    Thanks, Alan

    #768647

    Hi Alan,

    I’m not really sure why it’s not working on iphone or ipad, does the font apply on iphone or ipad on h1-h6 and p selectors? if yes try using this instead of #top:

    html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
      font-family: 'akkurat_lightregular';
    }

    put this on top of Quick CSS.

    Best regards,
    Nikko

    #769018

    Hi Nikko,

    Your #top css selector did not work because I had another font overwriting it in my Quick CSS.

    Would you mind telling me the difference out of this 3 CSS and which one is the main one that overwrites the rest and which one is the least important that I don’t even should use?

    1. Enfold Child Theme / General Styling / Quick CSS
    2. Appearance / Editor / Enfold Child Theme: Stylesheet (style.css)
    3. Appearance / Simple Custom CSS

    Thank you kindly as my problem was solved, so how do I close this thread?

    Cheers, Alan

    #769145

    Hi Alan,

    Glad that you found that out. :)

    1.) In terms of priority (is same selector is used), Quick CSS is definitely the best choice.
    2.) Best used and efficient when you are using ftp with you text editor (not suggesting editing it via Appearance > Editor). :)
    3.) I don’t have it on my end, perhaps it’s from a plugin, if you are more convenient with this then you can use this otherwise 1 and 2 is better option.

    Moderators closes the threads, if problem is resolved or the thread creator is satisfied with the answer :)

    Regards,
    Nikko

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.