[Support request] @font-face without child theme

Home Forums Support @font-face without child theme

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #348315
    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,

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #348337
    Tom
    Lead Developer
    Lead Developer

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

    #348349
    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.

    #348526
    Tom
    Lead Developer
    Lead Developer

    That should work as long as those URLs are correct.

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

    #348551
    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,

    #348554
    Sharif

    I also added

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

    But nothing changed.

    #348613
    Tom
    Lead Developer
    Lead Developer

    font-face should be @font-face

    #348621
    Sharif

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

    #348776
    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,

    #348888
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.