Skip to main content
Main Content

[OUTDATED] ★ Tetra's CSS Guide ★

Posted 2020-11-01 10:23:42
Is there something extra you need to do besides using the import link from google and using "font-family: Font" to get your font rule to work

Nekkoya
#15857

Posted 2020-11-01 11:39:51

@Nekkoya

The @import rule and using font-family: 'Font'; should be enough. If your import isn't working: remember that the @import rule should be at the very top of the css file, separate from any blocks, in order to work. Like so:

@import url('fonturlhere');

body {

   /* all other code below */


*barks at you*
#202

Posted 2020-11-01 12:44:41

Ah! yup that clarifies what i was doing wrong, thank you very much!


Nekkoya
#15857

Posted 2020-11-01 12:50:36

Oh, and since i'm already here is there also a thing I need to pay attention to when putting an image as a background? I've been testing random css things in my den, and the images don't seem to work ^^; sorry i'm asking so many questions haha



Nekkoya
#15857

Posted 2020-11-01 13:04:11

@Nekkoya

It's perfectly fine to ask questions, I'm happy to help! That being said, styling a background image should work this way:

body {

   background-image: url("IMAGEURLHERE");

   /* blah blah other styles */

}

Make sure your code follows this format down to the punctuation - especially with the quotation marks, leaving out the end quotation/parenthesis can damage the rest of your code.

Also make sure that your image url:

  1. Actually works - you can test this by pasting the url in your search bar and seeing if that leads to your image or an invalid page. If it's the latter, then the url is definitely faulty.
  2. Ends with .png, .jpg, or .gif, which are proper file formats for displaying an image.

*barks at you*
#202

Posted 2020-11-01 13:05:19

Again, thank you so much for your help! Definitely fixes the problems :)


Nekkoya
#15857

Posted 2020-11-01 16:07:48 (edited)

I knew I was missing something I was running around all my css that I had made before this came out before I found this only to read 'make sure to replace "www." with "dl." ' thank you for this.
Edit: I just saw the post date

Sokaren
#22774

Posted 2020-11-01 19:43:35

I'm definitely saving this to try out later 💕 Thank you for sharing!

Ohey-itsPaige
#12122

Posted 2020-11-02 14:08:08

I'm so so sorry I keep being such a bother, but my font and background still aren't working ^^;

Here's the blocks to help spot any errors:

background image block: 
background-image: url("https://i.imgur.com/bskrhMw.jpg"); 

and the font thing: 

<style> 

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');

body{


font-family: 'Caveat', cursive; 


Nekkoya
#15857

Posted 2020-11-02 14:17:48

@Nekkoya

I couldn't diagnose your errors with the blocks you provided so I took a peek at your source code and noticed that your .css file has <style> tags written into it. <style> is part of HTML and should not be included in a pure .css file. Removing the <style> </style> tags should make your background work again, as well as other styles that were not working before.

As for your font, the @import statement won't work with !important at the end, so be sure to omit that too!


*barks at you*
#202

Search Topic