Adding more than one custom font

  • Resolved khrisme

    (@khrisme)


    2 years ago

    Hi there,

    Can you tell me how to change these two codes if I want to add more than one custom font, please?
    https://docs.oceanwp.org/article/128-how-to-add-custom-fonts

    Thank you!

    @font-face {
    font-family: ‘TitilliumText22L-600wt’;
    src: url(‘fonts/TitilliumText22L-600wt.ttf’) format(‘truetype’);
    }

    and

    // Add custom font to font settings
    function ocean_add_custom_fonts() {
    return array( ‘TitilliumText22L-600wt’ ); // You can add more than 1 font to the array!
    }

Viewing 3 replies - 1 through 3 (of 3 total)
  • Shahin

    (@skalanter)

    Hello @khrisme,

    You can use these structures:

    For CSS:

    @font-face {
    font-family: 'font-1';
    src: url('fonts/webfont-1.eot'); /* IE9 Compat Modes */
    src: url('fonts/webfont-1.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/webfont-1.woff') format('woff'), /* Modern Browsers */
         url('fonts/webfont-1.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/webfont-1.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'font-2';
    src: url('fonts/webfont-2.eot'); /* IE9 Compat Modes */
    src: url('fonts/webfont-2.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/webfont-2.woff') format('woff'), /* Modern Browsers */
         url('fonts/webfont-2.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/webfont-2.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'font-3';
    src: url('fonts/webfont-3.eot'); /* IE9 Compat Modes */
    src: url('fonts/webfont-3.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/webfont-3.woff') format('woff'), /* Modern Browsers */
         url('fonts/webfont-3.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/webfont-3.svg#svgFontName') format('svg'); /* Legacy iOS */
}

    For PHP:

    function ocean_add_custom_fonts() {
	return array( 'my-font-1', 'my-font-2', 'my-font-3' );
}

    I hope it helps,
    Best Regards

    Thread Starter khrisme

    (@khrisme)

    Many thanks, @skalanter !

    Shahin

    (@skalanter)

    You’re very welcome. Glad I could help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding more than one custom font’ is closed to new replies.