Google Fonts cross browser issue

502 views
Skip to first unread message

Raphael

unread,
Sep 23, 2015, 10:03:03 AM9/23/15
to Google Web Designer beta
Hi there, 

I'm trying to make an html5 banner using GWD and Roboto font. 
I added the font family but the thing is that when I publish the banner localy, only Chrome and Safari use the appropriate font. Firefox and IE substitute it with Times new roman. 

Is there a fix on this?

This is the code that links the font, generated by GWD.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">


San Khong

unread,
Sep 23, 2015, 5:06:50 PM9/23/15
to Google Web Designer beta
Hi Raphael,

I'm having a problem reproducing the issue.  Attached is the author file and the published file (index.html) and I could not reproduce this issue on Windows 7.

Thanks,
San
GWD Team


testWebFont.zip
index.html

dig...@cinema.com.my

unread,
Sep 30, 2015, 3:39:06 AM9/30/15
to Google Web Designer beta
Hi,
I'm having the same issue. Chrome is able to display the correct font type but Firefox shows it as Times New Roman.
Below is a mock page and attached is also a screenshot. It's the "X" (or close button) on the eyeblaster that is having the issue.
http://www.cinema.com.my/Default_eyeblastermock_v1.aspx
font.jpg

j...@desertdigital.com.au

unread,
Sep 30, 2015, 3:45:32 AM9/30/15
to Google Web Designer beta
I have noticed that GWD sometimes strips the single quote marks out of @font-face declarations (around the "format" declaration), which can cause this behaviour. It wouldn't affect Google Fonts though.

Raphael

unread,
Sep 30, 2015, 5:00:24 AM9/30/15
to Google Web Designer beta
Hi all, 

The solution that worked for us was to add the font manually. We generated the font with the subsets and attributes we wanted from here https://www.google.com/fonts#UsePlace:use/Collection:Roboto and the final result looked like the following: 


After replacing that to the html5 code the font appeared correctly on all browsers!!

dig...@cinema.com.my

unread,
Sep 30, 2015, 11:18:17 PM9/30/15
to Google Web Designer beta
Yeah just noticed this seems to happen for some fonts under "Generic Font Families" and "Common Fonts" (for example, Arial displays ok but not Arial Black) but not those under "Google Fonts/Web Fonts". Anyone knows if its ok for us to just use Google Fonts instead since those fonts are not affected? Its a bit inconvenient to be manually adding in the fonts and all. Will using Google Fonts make the file size bigger?
Reply all
Reply to author
Forward
0 new messages