Using web font in portal_normal.vm

Fórum

Raymond Gardner, modificado 12 Anos atrás.

Using web font in portal_normal.vm

Regular Member Postagens: 118 Data de Entrada: 15/07/11 Postagens Recentes

Hello friendly Liferay contributors/apprentices,

I'm trying to add a web font to my Liferay site. We have examples of doing this in our mockups/static pages.
It works.

I tried putting the <link> tag in the portal_normal.vm as such:


	<title>$the_title - $company_name</title>

	#js ("$javascript_folder/jquery-1.6.4.min.js")
                     ...
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu">
        @font-face {
            font-family: 'Ubuntu';
            font-style: normal;
            font-weight: normal;
            src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v3/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
        }
    
	$theme.include($top_head_include)

The <link> tag appears in the html source within the <head> section as expected. It seems to be processed by the browser and pick up the font.
However, velocity is duplicating the @font-face { ... } in the body of my page and at the very top.
Any reason why this is happening?

So now the @font-face { ... } text shows up as html text on my web page. And, it appears just above the Dockbar.

wasim shaikh, modificado 12 Anos atrás.

RE: Using web font in portal_normal.vm

Junior Member Postagens: 92 Data de Entrada: 16/07/09 Postagens Recentes

Adding google font should be as below.


<link href="http://fonts.googleapis.com/css?family=Fascinate+Inline" rel="stylesheet" type="text/css">
<style type="text/css">
body{
font-family: 'Fascinate Inline', cursive;
}
</style>

Raymond Gardner, modificado 12 Anos atrás.

RE: Using web font in portal_normal.vm

Regular Member Postagens: 118 Data de Entrada: 15/07/11 Postagens Recentes

Thanks for the tip. It works.

That's interesting. Why do our mockups/static pages work when using the @font-face { ... }?

I removed the @font-fact { ... } completely and it still works.

Richard Lee, modificado 10 Anos atrás.

RE: Using web font in portal_normal.vm

Junior Member Postagens: 28 Data de Entrada: 19/01/11 Postagens Recentes

Hi Raymond,

old post , but thought I would comment in case anyone else stumbles upon this. Liferay compressor does some issues compressing CSS rules, especially the more modern HTML 5 CSS such as fontface and media queries. I'm betting if you turn off the compressor (fast load) by adding ?css_fast_load=0 to the URL your webfont will work. If thats the case then you know its the compressor. Best thing to do is keep all your CSS in a separate file and make sure the syntax use for @fontface is correct and you dont have any extraneous curly braces { } or empty rules