Help poor hobo learn to code - [PAYING FOR SOLUTION]

[pogosan]

[pogosan]

[Leshma]

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

[pogosan]

[Tibes]

Im actually work as a front-end developer. I think I could help you with that. I generally download the fonts I need from here:

https://www.fontsquirrel.com/

Rest of my office developers use this site too. Because once you download it, you stick the ones you need into the generator on this site and optimize it according to your needs. And before you ask, the font formats should be eot, woff and truetype. One other thing on this page is that after generating the fonts it also gives you the css, on how to correctly add them(the path however still might be different).

[Rhekimos]

I tried that as I mentioned above, thanks anyway.

Also, when inspecting element font is name is correct, but it still shows incorrect one. For some weird reason it also shows different font in Internet Explorer than in Firefox and Opera. Not correct though.

Internet Explorer has always been the bane of web due to their innovative ways to fuck things up and disregard all sense.

Try adding !important to the end.

(click to show/hide)

.portable-infobox .pi-title {
   font-family: "YOUR FONT" !important;
}

With your font in there.

[Tibes]

Nevermind what I said. I think I misunderstood the prob and gave unneeded info.

[pogosan]

[LordBerenger]

https://www.codecademy.com/learn


HTML & CSS

[pogosan]

[Tibes]

Nope, didn't work either. I can see font being applied through "inspect element", but it shows just default one in every browser I tried.

Is something overwriting it? If not you might have just wrote it wrong and its not being applied. Tried it myself just now. And works. The importingmethod(number 1) you used was correct, just stick it in the css and you got it. To use it on an element you have to write the font-family correctly : 'Eagle Lake'. You type in Eagle_Lake or EagleLake and it wont be applied. And if thats not the case either you didnt apply it to the correct element.

Pretty hard to say, if I dont see the code. You got it on live site so I can inspect it?

[Leshma]

I tried that as I mentioned above, thanks anyway.

Also, when inspecting element font is name is correct, but it still shows incorrect one. For some weird reason it also shows different font in Internet Explorer than in Firefox and Opera. Not correct though.

Reason isn't weird, IE is garbage but still popular browser so you have to support it... you see, Microsoft have a nasty habit of forcing its own standards on everything. Web is Google's territory and they use open standards. Microsoft made their own...

@font-face defines specific font you want to you use. You have to define same font twice in case you want second one to have different properties eg. bold, italic etc. Try these exercises first: 1, 2 (http://www.w3schools.com/css/css3_fonts.asp)

This is how Google does it: https://fonts.googleapis.com/css?family=Open+Sans. Make sure you specify format as well, woff2 doesn't work by default in Firefox and at all in IE 8.0 and older.

You'll have to specify different font for each element in div {} as explained above.

[pogosan]

[Tibes]

According to api link, it gives you nothing but woff2. Which, like Leshma said, has crap support.

One guy suggested this:

You have to download the font using different browsers and watching the web inspector, thats because google detects which font type needs your browser.

So the solution to your browsersupport problem is that you need to go to firefox stick this adress in there https://fonts.googleapis.com/css?family=Eagle+Lake. Get the src line and stick it in your css. You can, mybe, not 100% sure how this works with font urls(I generally work with filepaths when I add fonts), have multiple src-s, inside one @font-face to make sure you have full browser support. Like src-s to eot and truetype url-s. You could just replace the entire woff2 src with the woff src you got from firefox. Because woff works with more browsers.

[Leshma]

It says woff, not woff2. Older format should be supported in Firefox by default. Think Firefox is blocking fonts for security reasons, because they aren't under same domain as site.

Edit: This could be solution.