Custom fonts not loading

  • Resolved erinstruble

    (@erinstruble)


    6 years, 2 months ago

    I am running the Joints-WP-CSS version 6 theme which uses Foundation.

    I have @font-face’d the following fonts in my style.css file like below. However, I am the only person who can see the proper fonts (here is a screenshot: http://erinstruble.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-09-at-13.16.36.png). Other people are getting the fallbacks. Someone at Go-Daddy said they saw this error “DevTools failed to parse SourceMap: http://erinstruble.com/wp-content/themes/JointsWP-CSS-master/assets/styles/style.css.map”. How can I get these fonts to work properly for others?

    @font-face {
    font-family: "StudioFeixenSans-Book" !important;
    src: url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.eot")!important;
    src: url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.eot") format("embedded-opentype"),
    url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.woff2") format("woff2"),
    url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.woff") format("woff"),
    url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSans-Book.ttf") format("truetype")!important;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "StudioFeixenSerif-Regular"!important;
    src: url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.eot")!important;
    src: url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.eot") format("embedded-opentype"),
    url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.woff2") format("woff2"),
    url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.woff") format("woff"),
    url("http://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-admin/css/webfont/StudioFeixenSerif-Regular.ttf") format("truetype")!important;
    font-weight: normal;
    font-style: normal;
}
    • This topic was modified 6 years, 2 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Carike

    (@carike)

    6 years, 2 months ago

    Are you sure Studio Feixen fonts are web safe / compatible with the various browsers / browser versions being used?

    You may want to consider using Google Fonts, if you do not want to use a font being bundled in WordPress.
    Here are some plugins that may be able to help: https://ww.wp.xz.cn/plugins/search/google+fonts/

    Thread Starter erinstruble

    (@erinstruble)

    6 years, 2 months ago

    Hi @carike! These files I got when I purchased them say they are: sftp://miyfood.com/home/erinstruble/public_html/erinstruble.com/wp-content/themes/JointsWP-CSS-master/assets/styles/1%20How%20to%20webfont.html. I have to use these ones. They’re my entire brand, and I bought them under the impression I could use them.

    Carike

    (@carike)

    6 years, 2 months ago

    The good news for you is that it appears that Studio Feixen website currently runs on WordPress. 🙂
    Asking them would be the most efficient way of solving your issue.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    6 years, 2 months ago

    You’re loading your fonts from a directory in wp-admin. Things in wp-admin are not available to end-users. The font file(s) should be in the theme directory (if part of a theme) or in wp-content/someplace.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    6 years, 2 months ago

    Also, the URL is just plain wrong, as it includes the full file path, not a valid URL. You need to fix your URLs.

    Thread Starter erinstruble

    (@erinstruble)

    6 years, 2 months ago

    @sterndata I ended up putting them way outside of my theme by creating a new CSS and webfonts folder just under erinstruble.com and they now appear to be working! Well they’re working on my phone which they weren’t before.

    This is the path: http://erinstruble.com/css/webfont/StudioFeixenSans-Book.eot. Just a bit confusing as they’re nowhere near my theme or other uploads. But I guess that’s just what works.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    6 years, 2 months ago

    More importantly, that path makes sense so in a year from now, when you want to change the fonts again, it will be easier to find them. 🙂

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

The topic ‘Custom fonts not loading’ is closed to new replies.