Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1060326

    Hi.

    I’m creating a website for our wedding, and need it in two languages. I opted for the polylang plugin since it provides a free version. However, I need to use a different font for one of the languages, but cant figure out how to enable this.

    Please advise.

    #1060346

    I’ve done the following:

    Downloaded the ttf file from http://allfont.net/download/alexandra-zeferino-three/

    Used https://www.fontsquirrel.com/tools/webfont-generator with expert settings, changing only the subsetting to include cyrillic and keep existing TTF hinting.

    Uploaded the eot, ttf woff and woff2 files to the enfold-chiled/fonts folder on the server.

    Added the following to my quickcss:

    @font-face {
        font-family: 'alexandra_zeferino_threeRg';
        src: url('fonts/alexandra-zeferino-three_allfont.net-webfont.eot');
        src: url('fonts/alexandra-zeferino-three_allfont.net-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/alexandra-zeferino-three_allfont.net-webfont.woff2') format('woff2'),
             url('fonts/alexandra-zeferino-three_allfont.net-webfont.woff') format('woff'),
             url('fonts/alexandra-zeferino-three_allfont.net-webfont.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    h1:lang(ru) {
      font-family: "alexandra_zeferino_threeRg" !important;}
    
    h2:lang(ru) {
      font-family: "alexandra_zeferino_threeRg" !important;}
    
    h3:lang(ru) {
      font-family: "alexandra_zeferino_threeRg" !important;}
    
    h4:lang(ru) {
      font-family: "alexandra_zeferino_threeRg" !important;}

    However, the text is rendered using regular arial or something, at least its not the script font i specified(neither is it Tangerine and Lato fonts that are set in the enfold theme settings).

    I’ve also tried to use this instead of the @font-face

    @import url(https://allfont.net/allfont.css?fonts=alexandra-zeferino-three);

    but the results are the same.

    Please advise!

    • This reply was modified 1 year, 5 months ago by  jadesoturi.
    • This reply was modified 1 year, 5 months ago by  jadesoturi. Reason: add code tags
    #1060349

    Nevermind. Seems like there was some issues on the server – after rebooting apache things are now working! case closed!

    UPDATE: works in firefox and chromium, not in qutebrowser or chrome and not on mobile. I dont get this. Please help!

    • This reply was modified 1 year, 5 months ago by  jadesoturi. Reason: new info
    #1062003

    Hi,

    Thank you for sharing the details.

    I checked your site on chrome and the font seems to be correctly applied. Please check the below screenshot.

    https://snag.gy/ljhvAJ.jpg

    The font family in your CSS is different tho.

    Also when you view the page source the language is “ru-RU”. If you still have an issue please try the combination of the language and font family to see if that makes a difference.

    You may not see the changes until the cached files are cleared in your browser.

    Please perform the below steps to clear the browser cache:

    1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
    2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
    3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

    Also check this jQuery solution.
    https://wordpress.stackexchange.com/questions/305695/how-to-set-different-font-family-based-on-text-language

    Best regards,
    Vinay

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.