issue with custom font

  • Hi! I’m having some issues trying to use a custom font on my site. It’s the first time I do this so problably I’m doing something wrong. I’ve been trying to fix it by myself for a couple of days but nothing seems to work.

    1. I converted the font all the needed formats using FontSquirrel Webfont Generator.
    2. I uploaded the fonts using FTP to the folder /public_html/wp-content/themes/stockholm/fonts
    3. In the theme editor located in Dashboard>Appearence I wrote the following code:

    @font-face {
    font-family: ‘fixture’;
    src: url(‘/public_html/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.eot’);
    src: url(‘/public_html/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘/public_html/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.woff2’) format(‘woff2’),
    url(‘/public_html/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.woff’) format(‘woff’),
    url(‘/public_html/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.ttf’) format(‘truetype’),
    url(‘/public_html/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.svg#fixtureexpanded_black’) format(‘svg’);
    font-weight: 900;
    font-style: normal;
    font-stretch: expanded;
    }

    4. In my theme’s custom css code I wrote the following:

    nav.vertical_menu > ul > li > a {
    font-family: ‘fixture’;
    font-weight: 900;
    font-stretch: expanded;
    font-style: normal;
    }

    I can see it perfectly in my computer on chrome, firefox and edge but in other devices it doesn’t display correctly.

    Any idea what may be wrong?

    Thank you so much!!

    The page I need help with: [log in to see the link]

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

  • Hi @dmwix,

    You are very close! Try changing your CSS to the below, that should do it.

    @font-face {
font-family: 'fixture';
src: url('/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.eot');
src: url('/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.eot?#iefix') format('embedded-opentype'),
url('/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.woff2') format('woff2'),
url('/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.woff') format('woff'),
url('/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.ttf') format('truetype'),
url('/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.svg#fixtureexpanded_black') format('svg');
font-weight: 900;
font-style: normal;
font-stretch: expanded;
}

    Hope this helps. ??

    Kind Regards,
    Tim

    • This reply was modified 3 years, 7 months ago by Tim. Reason: Corrected mistake

    Hi @dmwix,

    You need to change the font path to this

    @font-face {
font-family: 'fixture';
src: url('/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.eot');
src: url('/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.eot?#iefix') format('embedded-opentype'),
url('/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.woff2') format('woff2'),
url('/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.woff') format('woff'),
url('/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.ttf') format('truetype'),
url('/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.svg#fixtureexpanded_black') format('svg');
font-weight: 900;
font-style: normal;
font-stretch: expanded;
}

    remove “/public_html” from the path

    Thanks!

    • This reply was modified 3 years, 7 months ago by Arul Prasad J.
    Thread Starter dmwix

    (@dmwix)

    It worked!!! Thank you so much Tim for the quick reply!!!

    Kind regards from Argentina,

    Diego

    Hi Diego,

    Great! Your issue, in case you are interested, was that your site was looking at https://example.com/public_html/wp-content/themes/stockholm/fonts/fixture-expandedblack-webfont.svg#fixtureexpanded_black. By removing /public_html/ from the CSS, the site is able to find the font files properly and load them in.

    All the best. ??

    Kind Regards,
    Tim

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘issue with custom font’ is closed to new replies.