[Support request] @font-face without child theme

[Sharif]

Hello there;
Is it possible to add @font-face for custom fonts without using child theme? I have uploaded custom fonts to wp-content folder. How Can I add @font-face?
I saw in another topic that following code is for child theme.

@font-face {
  font-family: 'Your Font Name';
  src: url('font-file-name.eot'); /* IE9 Compat Modes */
  src: url('font-file-name.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-file-name.woff2') format('woff2'), /* Super Modern Browsers */
       url('font-file-name.woff') format('woff'), /* Pretty Modern Browsers */
       url('font-file-name.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('font-file-name.svg#svgFontName') format('svg'); /* Legacy iOS */
}

What should I write in url if custom fonts are in wp-content?
Regards,

[Tom]

Just replace the file name with the full URL: http://yoursite.com/wp-content/font-file-name.eot

[Sharif]

Hi Tom,
Is something like this OK?

font-face {
    font-family: 'hanis';
    src: url('http://www.anis.af/wp-content/fonts/hanis.eot');
    src: url('http://www.anis.af/wp-content/fonts/hanis.eot?#iefix') format('embedded-opentype'),
         url('http://www.anis.af/wp-content/fonts/hanis.woff2') format('woff2'),
         url('http://www.anis.af/wp-content/fonts/hanis.woff') format('woff'),
         url('http://www.anis.af/wp-content/fonts/hanis.ttf') format('truetype'),
         url('http://www.anis.af/wp-content/fonts/hanis.svg#hanis') format('svg');
}

BTW I thinks it is worth-mentioning that Simple CSS plugin is not compatible with RTL language. In RTL language Simple CSS is also converted to RTL which is not what should be. It does not matter whether language is RTL or LTR, Simple CSS should be always LRT because we write css from left to right.
Hope I had been able to write what I mean.

[Tom]

That should work as long as those URLs are correct.

Thanks for letting me know about Simple CSS – I’ll take a look 🙂

[Sharif]

Hi Tom,
I added

font-face {
    font-family: 'hanis';
    src: url('http://www.anis.af/wp-content/fonts/hanis.eot');
    src: url('http://www.anis.af/wp-content/fonts/hanis.eot?#iefix') format('embedded-opentype'),
         url('http://www.anis.af/wp-content/fonts/hanis.woff2') format('woff2'),
         url('http://www.anis.af/wp-content/fonts/hanis.woff') format('woff'),
         url('http://www.anis.af/wp-content/fonts/hanis.ttf') format('truetype'),
         url('http://www.anis.af/wp-content/fonts/hanis.svg#hanis') format('svg');
}

to Simple CSS and then added
`
p{
font-family:”hanis”;
}
but paragraph font did not change. It means that ulrs are incorrect but I was not able to find what is wrong with those ulrs. can you guide me please to find the correct urls? also can you tell me should I use http or https for urls?
Regards,

[Sharif]

I also added

html{
    font-family:"hanis"
}
body{
    font-family:"hanis"
}
a{
    font-family:"hanis"
}

But nothing changed.

[Tom]

font-face should be @font-face

[Sharif]

Thanks Tom,
I changed font-face to @font-face but still nothing happened.

[Sharif]

Hi Tom,
Finally I found correct urls but how to use this function to integrate two fonts:

add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
    $fonts[] = 'font-name';
    return $fonts;
}

Regards,

[Tom]

Like this:

add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
    $fonts[] = 'font-name';
    $fonts[] = 'second-font-name';
    return $fonts;
}

This will add those two fonts to the Customizer dropdown lists of fonts.

[Author]

Posts