Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

@font-face rule in CSS files in Synmfony 2 with Assetic

I'm looking for including fonts from CSS files in Symfony using Assetic. The issue is the browser fails to load these fonts.

@font-face {
font-family: 'Corbert'; /*a name to be used later*/
src:    url('fonts/Corbert-Regular.otf')  format('opentype'),
        url('fonts/Corbert-Regular.woff') format('woff'),
        url('fonts/Corbert-Regular.ttf') format('truetype');
}

My path structure is

...  
+-src/  
| +-MyCompany/  
|   +-MyBundle/  
|     +-Resources/  
|       +-public/  
|         +-css/  
|           +-fonts/  

My path linking the CSS files is

path into css file

enter image description here

enter image description here What am i doing wrong ?

like image 656
Johnrednex Avatar asked Mar 18 '15 09:03

Johnrednex


People also ask

What is CSS font face rule?

The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.

What is the rule for importing font family with CSS?

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.


1 Answers

I found the solution :

Just put in your Document.html.twig where you link your css files:

<style type="text/css">
  @font-face {
  font-family: 'Corbert'; 
  src:    url({{asset('fonts/Corbert-Regular.otf')}}) format('opentype'), 
    url({{asset('fonts/Corbert-Regular.woff')}}) format('woff'),
    url({{asset('fonts/Corbert-Regular.otf')}}) format('truetype');
  }
</style>

Indeed if you put that in the css file, symfony doesn't seem to recognize the code. It's the same for the picture :

<style type="text/css">
  body, html{
    background-image:url({{ asset('images/wallpaper.png') }});
  }
<style>

Nice Week-end !

like image 138
Johnrednex Avatar answered Sep 28 '22 05:09

Johnrednex