The post displays squares

Soweic · August 2014

I thought it was because of the mobile devices, but I can see the Khmer fonts are just right with this site in my Tab 2: http://www.postkhmer.com/

whereas mine is just squares: http://soweic.com/understanding-monitor-printers-profiles/

I am using @import from Google Fonts. Did I miss something?

Albert · August 2014

Until you use cache, we are not able to check it because everything is minified.

Soweic · August 2014

You meant, I have to disable W3 cache for checking? I am also using Cloudflare in conjunction as W3 will break my 'Shop' page layout, so I am using Cloudflare to Minify HTML instead.

What do you suggest I need to do so to get to fixing this font display?

Albert · August 2014

Yes, you should turn off W3 cache so we can check it. Because now we don`t see anything in code and all has been cached.

Soweic · August 2014

So I don't need to disable the plugin, just at 'Page Cache' uncheck to disable? Or should I check this 'Toggle all caching types on or off (at once)'?

I already disable the Minify CSS and JS.

Albert · August 2014

Ok we checked now and as we see this @import does not work because font can`t be imported. We recommend to read this article http://webdesign.about.com/cs/css/qt/tipcssatimport.htm and or you need to move this import into head or wrap into "..." or we have no idea what else could be the problem because so far we don`t see anything else.

Soweic · August 2014

Thank you for the link. I read, but it says nothing about font.

If the font cannot be imported, what do you recommend to get the font in?

I would be really grateful if you can help with this as I also bought WPML from your recommendation to make multi-language site, and if my site cannot display the Khmer language properly, it would be a bit useless to the readers.

I also tried contacting the WPML support, but they said styling to display correctly is not within their help

I ready one here: http://wordpress.org/support/topic/custom-css-not-importing-google-fonts-api

Do you think I got Jetpack and enable Custom CSS, use the @import there and it will move to the head? I am asking cz' I don't know how to put in the head or into "..." as you described.

I am also looking at this: http://www.fontsquirrel.com/tools/webfont-generator

But I got lost now how do ppl get the fonts displayed correctly to someone without the font installed? Aren't Google fonts the answer?

Albert · August 2014

To be honest we have no idea what else could be wrong, because as we wrote above, we don`t see anything wrong and also there is no issues between theme and this import. Sorry!

Soweic · August 2014

Update:

Hrm, I got answer from WPML again:

"Sorry this is something related to theme, This is not covered under WPML support policy. which is beyond the scope of our support.

Sorry but this is something theme related, displaying content on your site using fonts is not a WPML issue, WPML only connects your site content with two or more languages installed.

All the display features are theme related."

Soweic · August 2014

What does the font section in theme option do? Can we do anything there? I can see Hanuman khmer font is available in the list.

Update:

Bam!!! I choose Hanuman there as the 'Content Font', now it is working!!!

Look like the @import is not playing nice.

Now only one issue left, how do I get the English font like before 'Roboto' to show along for Content Font?

Albert · August 2014

Font for content can be chosen only one. So if you selected Hanuman, then this font will be applied for content. It is not possible to setup 2 different fonts for content.

Soweic · August 2014

I got the code from WMPL:

You can change the styles.css according to language code in header.php file

<?php if (ICL_LANGUAGE_CODE == 'en'){ ?>

<?php }elseif(ICL_LANGUAGE_CODE == 'th'){ ?>

<?php } ?>

but the code above will switch the font face only when the language for translation is selected. For my case, my site is displaying both Khmer and English, so how do I set font family, so Khmer use Hanuman and English use Roboto font?

Soweic · August 2014

Update: I can see the Be updates include second font!!!

I am so excited about the many useful features added eps Fancy divider and Header menu style

Will install the update asap.

Thank you so much Be.

Updated: Got the update now; and I got my reviews as below:

1. The subheader image is now fixed and don't need css as below anymore:

/* Style header image to single portfolio and post */

.single-portfolio #Subheader { background: url('http://soweic.com/wp-content/uploads/2014/08/splash_section_10.jpg') !important; }

.single-post #Subheader { background: url('http://soweic.com/wp-content/uploads/2014/08/splash_section_10.jpg') !important; }

And look like the subheader image will inherit from its parent page too? http://soweic.com/product/minicards/

2. Custom JS is added, but you have not changed the title of that section to Custom CSS & JS yet

3. Custom fonts allows us to upload fonts allowing those who want to get their fonts display correctly to anyone in the world though they don't have those fonts installed. It helps a lot with multi-lingual site.

Anyway, for Custom font 1 and 2, rather than upload them and assign to the respective sections from drop down menu, how can we also use it as inline style to specific contents in WP editor or even add it to Custom CSS so we can assign them to other areas like widget, footer etc?

Be | Theme will rule!

Albert · August 2014

1) Yes, this one is true.

2) We forgot about it. Already changed and will be changed with next update.

3) For that you probably need to use html or css code where you will define font-family. When you have for example on page h3 tag and want to get different font, then you probably need to use something like:

<h3 style="font-family: 'Font-Name';">text</h3>

The post displays squares

Comments