#font-face and Google Translate - css

I have an annoying problem with #font-face fonts/code and Google Translate. It seems that Google Translate block display/usage of external fonts.
The script itself is nothing special - just a code generated by Font Squirrel, which works fine, except when Google Translate is used.
Can you please give me info how can I diagnose and/or fix this?
Or maybe is there any known issue with custom font display with Google Translate.
Thanks!

Related

Wordpress Issue - Google Font Renders Differently

Hoping someone may be able to help. I'm using source sans pro from google and have loaded it in a static html file and wordpress. The font rendering looks different between the two with the static font looked better and slightly more bold.
Has anybody come across this issue?

Google Font similar to Blippo

Im looking for a font family on google fonts that is similar to Blippo-black or Bauhaus 93. Does anyone know the name of a similar font. It must be available on google fonts. Thanks!
You want this. It's similar, isn't any the same.
http://google.com/fonts/specimen/Erica+One

Is it possible to disable loaded fonts for a website directly from the browser?

I want to quickly see how the fallback-fonts is working for a website by excluding one or more specific fonts. Is this possible in Chrome? How?
Have searched for it with no luck.
It's quite easy with the Chrome Inspector. You just have to find the HTML lines which include your custom font (Or in your CSS) and delete it.
Of course you can just modifiy your css directly in Chrome to see what happens.
UPDATE: Delete directly the font in the sources tab in you Chrome Inspector.

change font size after using google translate

I am using a WordPress theme and i have installed the Google translate plugin.
I'm having an issue after I translate the language. The font size is entirely to large after the change from English to any language. I have researched and found that I could use :lang pseudo tag, however when i inspect with firebug the html class of my page is still "en-US" so would the :lang pseudo tag work?
If so how do i know what to call when i switch it to french? I have been researching this for hours and have yet to find a solution. Here is a link to the website, any help would be greatly appreciated
http://rightbrainmediaanddesign.com/wordpress_jinja/
///update 1:09am ET///
I found that after translation it was wrapping my text in <font> tags so if i call that in the css it allows me to change it universally for any translation, however I still cannot target a specific language. Here is what i did. #primary-menu font {
font-size: 11px !important;
} Now that did the trick, but as i said it is universal for any translation i.e. from english to any language. Now the challange is to be able to change just french or just spanish.
(Answered in a question edit. Converted to a community wiki answer. See What is the appropriate action when the answer to a question is added to the question itself? )
The OP wrote:
Okay, ISSUE SOLVED!! I downloaded a different wordpress plugin here it is.
http://transposh.org/
Now this plugin ties into the Google Translate API, however unlike the google plugin this one actually changes the lang="" in the <html> section above the header. So, in your css, to reference a specific language in the css it would look like this(for those that dont know) html:lang(es) That would be for spanish, to reference a specific div it would look like html:lang(es) #primary-menu {}. To locate your language abbreviation, just inspect your document and you will see it located at the very top of the html in this case it says lang="es". I sure hope this helps someone out there, because it just did wonders for me.

Google Fonts Flash in Internet Explorer

I just set up Google Fonts API on my site. Internet Explorer, whenever I refresh the page, a default font flashes before the Google Font 'Reenie Beanie' loads. But shouldn't this be sticking in the cache or something so that once it loads once, it's there and no longer should default fonts show up?
I'm using the WebLoader version to call the fonts. I originally just used the <link> call to the fonts, but the problem there was switching to an https page - I had to use the https link, but then I think that stopped the fonts from caching too. Everything is fine in Firefox (no flashing).
Any suggestions on this?
www.n-styleid.com
Everything is working as it should (In the worst sense of the words)
This is just a problem IE is having with its rendering engine. It cannot download/retrieve the fonts and render them as fast as the basic built-in fonts that the OS has.
There really is no good way to fix this as it is not something that you broke. The best advice that I can give you is to find a font in the system that looks closest to it (Not many handwritten in the system but better than arial) and use that in your font stack.
Hope that helps.
A work around is to hide the element with css and fade it in with jquery. This will give your font time to load. Its a good idea to use a decent fallback if the content is vital.

Resources