October 14, 201312 yr I have been asked to make a type family demonstration where I show examples of different font families. I have been asked to use google fonts to do this. My problem is that when I link to the font it is not working. It keeps just using the default font rather than the one on google. Do I need to download the font and use @font-face or can I simply link to it in a different way than I have been doing? i am new to all of this so any help would be much appreciated. Thanks
October 14, 201312 yr You need to do things to use a font straight from Google: 1) Include the font stylesheet: <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Englebert" /> 2) Call the font in your CSS: font-family: 'Bigelow Rules', cursive; Here's the page that I took the example from: http://www.google.com/fonts#UsePlace:use Hope this helps.
October 14, 201312 yr Author from what I can tell that's what I have been doing yet it seems to revert into the default font
October 14, 201312 yr Author I am new at this so this may be a dumb question but is it possible that it;s not working because the fonts arn't directly on my computer and I am viewing it on an explorer page and not a real site?
October 14, 201312 yr No it should be fine unless you are not connected to the internet. If you post up the code you have it will be easier to de-bug.
October 14, 201312 yr Author Here is what I have so far the html and the css: assignment.html fontfamilies.css
October 14, 201312 yr 1) The google URL you used for the fonts returned a 404 error code because you put the font names all in lowercase 2) You are using <p1>, <p2> etc this is an invalid markup plus your code is incomplete (missing </body></html>) Try something like <!doctype html> <!doctype html> <html> <head> <link href="fontfamilies.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Arapey|Allerta|Bonbon' rel='stylesheet' type='text/css'> </head> <body> <p class="p1">Sample Text</p> <p class="p2">Sample Text</p> <p class="p3">Sample Text</p> <p class="p4">Sample Text</p> <p class="p5">Sample Text</p> </body> </html>And for your CSS@font-face { font-family: "STENCIL"; src: local ("STENCIL"), local (STENCIL), url ("C:\Users\Nicole\Downloads\STENCIL\fonts\STENCIL.otf") format("opentype"); font-weight: bold;} .p1 {font-family: "STENCIL", stencil;} .p2 {font-family: "allerta";} .p3 {font-family: "arapey";} .p4 {font-family: "bonbon", sans-serif;} .p5 {font-family: "lucida handwriting";}your "STENCIL" font will only work on your computer when you have permission for that specific file path Edited October 14, 201312 yr by D4Y0
October 14, 201312 yr Author Thanks so much for your help as you can see I am very new to this. I really appreciate your help.
Create an account or sign in to comment