Using font-face definition received via API as a string in frontend

Question

I am getting custom font via API as a String given below,

"@font-face {
  font - family: 'Custom Font Name';
  src: url('https://base_url/fonts/pGdyQlal_QW0WERKk_405638ad.eot');
  src: url('https://base_url/fonts/pGdyQlal_QW0WERKk_405638ad.eot?#iefix') format('embedded-opentype'),
  url('https://base_url/fonts/pGdyQlal_QW0WERKk_405638ad.ttf') format('opentype'),
  url('https://base_url/fonts/pGdyQlal_QW0WERKk_405638ad.woff') format('woff');
  font - weight: normal;
  font - style: normal;
}
"

I need to put this font-family definition in style tag of a php/html file or write/append in an existing CSS file so that I can use the Custom Font Name as a value for font-family property. I have to populate select dropdown for selecting these custom fonts received in API. I am using Javascript, jQuery for Scripting.

Please guide for the way out, as what is getting received is a string and not getting recognised as css.

Please show some code you've already tried and describe how it didnt work for you. — Fabian S., Jun 27 '19 at 05:27

score 2 · Accepted Answer · answered Jun 27 '19 at 05:43

Stylesheet Injection?

This ought to do it. Creating a stylesheet and setting its innerHTML to your CSS String. Enjoy!

function injectCSS( str ) {
    const style = document.createElement( 'style' );
    style.innerHTML = str;
    document.body.appendChild( style );
}

injectCSS( cssStr );

const cssStr = `@font-face {
  font - family: 'Custom Font Name';
  src: url('https://base_url/fonts/pGdyQlal_QW0WERKk_405638ad.eot');
  src: url('https://base_url/fonts/pGdyQlal_QW0WERKk_405638ad.eot?#iefix') format('embedded-opentype'),
  url('https://base_url/fonts/pGdyQlal_QW0WERKk_405638ad.ttf') format('opentype'),
  url('https://base_url/fonts/pGdyQlal_QW0WERKk_405638ad.woff') format('woff');
  font - weight: normal;
  font - style: normal;
}`;

score 1 · Answer 2 · answered Jun 27 '19 at 05:42

1

You don't have to. Please check the documentation of your webfont provider. You will find a script which when put in side your html makes the font automatically available to your page.

answered Jun 27 '19 at 05:42

Aditya

771
5
11

Using font-face definition received via API as a string in frontend

2 Answers2