get fonts in css from firebase storage link?

[Arnau Guell]

I want to use a font that I uploaded in the firebase storage, (I use angular ionic firestore)

orginal font name:'Pacifico.ttf'

firebase font download link: https://firebasestorage.googleapis.com/v0/b/questions-21b31.appspot.com/o/fonts%2Fgp6tcr9jkw4qo9mx?alt=media&token=9b62f1d0-2b22-40d7-8a72-1300ca5e3503.

my try in css dosen't work:

@font-face {
    font-family: myFirstFont;
    src: url(https://firebasestorage.googleapis.com/v0/b/questions-21b31.appspot.com/o/fonts%2Fgp6tcr9jkw4qo9mx?alt=media&token=9b62f1d0-2b22-40d7-8a72-1300ca5e3503) format('ttf');
}  

.testF{    
    font-family: myFirstFont;
}

any idea?

thanks

[Mike Ciote]

u forgot quotes

src: url('webfont.eot');

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Arnau Guell]

thanks for answering Mike, but i tried both ways with no success

Missatge de Mike Ciote <mike...@gmail.com> del dia dc., 18 de jul. 2018 a les 0:16:

u forgot quotes

src: url('webfont.eot');

On Tue, Jul 17, 2018 at 12:19 PM, Arnau Guell <arnau...@gmail.com> wrote:

I want to use a font that I uploaded in the firebase storage, (I use angular ionic firestore)

orginal font name:'Pacifico.ttf'

firebase font download link: https://firebasestorage.googleapis.com/v0/b/questions-21b31.appspot.com/o/fonts%2Fgp6tcr9jkw4qo9mx?alt=media&token=9b62f1d0-2b22-40d7-8a72-1300ca5e3503.

my try in css dosen't work:

@font-face {
    font-family: myFirstFont;
    src: url(https://firebasestorage.googleapis.com/v0/b/questions-21b31.appspot.com/o/fonts%2Fgp6tcr9jkw4qo9mx?alt=media&token=9b62f1d0-2b22-40d7-8a72-1300ca5e3503) format('ttf');
}  

.testF{    
    font-family: myFirstFont;
}

any idea?

thanks

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/n8VAy93RTtk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Salutacions

Arnau

[Sander Elias]

Hi Arnau,

The problem is timing. Your users are not logged in yet at the moment you load the font. At that time firebase will give you a 403. 
The only solution is to configure firebase so, that the font can be loaded without auth. Be careful with this, as it enables anyone to load the font from your hosting. (you are picking up the bill for that)

Regards

Sander

[Arnau Guell]

Hello Sander,

I done applying this to the storage rules but still don't work :

service firebase.storage {

  match /b/{bucket}/o {

    match /{allPaths=**} {

      allow read, write;

    }

  }

}

Missatge de Sander Elias <sande...@gmail.com> del dia dc., 18 de jul. 2018 a les 12:03:

--

You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/n8VAy93RTtk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Salutacions

Arnau

[Sander Elias]

Hi Arnau,

If I try to open your link, I now get a 'key not found'. As soon as you can just open your link from a browser, it will start to work.

Regards

Sander

[Arnau Guell]

Hi Sander,

maybe i deleted it by mistake

there is another font link:

https://firebasestorage.googleapis.com/v0/b/questions-21b31.appspot.com/o/fonts%2F2af7vlhun149cces?alt=media&token=e3a2c0d4-a05b-45ff-a8f5-f57b2b785b01

Missatge de Sander Elias <sande...@gmail.com> del dia dl., 23 de jul. 2018 a les 12:46:

--

You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/n8VAy93RTtk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Salutacions

Arnau

[Sander Elias]

Hi Arnau,

I now have a font on my HD, so that link works. Are you still having the issue? If so, add the part where you try to load the font.

Regards

Sander

[Arnau Guell]

Hi sanders,

Still doesn't work,

this is my scss:

@font-face {

font-family: myFirstFont;

src: url('https://firebasestorage.googleapis.com/v0/b/questions-21b31.appspot.com/o/fonts%2F2af7vlhun149cces?alt=media&token=e3a2c0d4-a05b-45ff-a8f5-f57b2b785b01')format('ttf');

}

.testF{

font-family: myFirstFont;

}

my html

<ion-content padding class="testF">

The world is your oyster.

</ion-content>

Missatge de Sander Elias <sande...@gmail.com> del dia dv., 27 de jul. 2018 a les 15:10:

--

You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/n8VAy93RTtk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Salutacions

Arnau