Okay
  Public Ticket #466248
Issue with custom @font-face
Closed

Comments

  • Erin started the conversation

    I'm having issues with a custom font that has been loaded into the custom CSS section, per the recommendation on a previous ticket, particularly in mobile browsers. Here is the code that has been added to the custom CSS section:

    @font-face {

    font-family: 'MrSheffield';

    src: url('../wp-content/themes/salient/2E7913_0_0.eot');

    src: url('../wp-content/themes/salient/2E7913_0_0.eot?#iefix') format('embedded-opentype'),

    url('../wp-content/themes/salient/2E7913_0_0.woff2') format('woff2'),

    url('../wp-content/themes/salient/2E7913_0_0.woff') format('woff'),

    url('../wp-content/themes/salient/2E7913_0_0.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

    }

    I've tried uploading these files into the Salient theme CSS>Fonts folder, the Salient CSS folder, the Salient folder, the Salient Child Theme folder and subfolders via FTP, and have had issues regardless of the location and file paths used for the source URLs in the CSS. Am I missing something?

  •  8,851
    Tahir replied

    Hey ,

    You\'re going to have to use css font-face to load the font in and assign it - you can actually see an example of this near the top of the style.css stylesheet in the theme (where open sans is loaded). Here\'s an in depth tutorial to explain it as well :)

    http://zoerooney.com/blog/tutorials/installing-web-fonts-start-to-finish/

    Cheers


    ThemeNectar Support Team