Uploading new Font for my WordPress website

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

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

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

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

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

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