Home/ Questions/Q 6933931
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:53:44+00:00

This is my first question here so if I’m missing something necessary just reply

  • 0

This is my first question here so if I’m missing something necessary just reply and I’ll add the info 🙂

OK, so my issue comes from importing fonts from google. On my main page the font works properly and looks good doing so, but when I try to put it on another page on my site it no longer works. Any help is greatly appreciated. Here is the code I think is needed to solve this issue, I’ve tried a few things, but I’m stumped and I could just be missing something completely simple:

Works:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Steven Lambe -- Main</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="description" content="Steven Lambe - Who I am, and what I do." />
    <meta name="keywords" content="programmer, gamer, computer enthusiast, developer, designer, video games" />
    <meta name="author" content="Steven Lambe" />
    <link rel="shortcut icon" href="../favicon.ico" /> 
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="text/css" href="css/main-menu.css" />
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/styleIE.css" />
    <![endif]-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
</head>

Doesn’t work:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Steven Lambe -- Who Am I?</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="Steven Lambe - Who I am, and what I do." />
    <meta name="keywords" content="programmer, gamer, computer enthusiast, developer, designer, video games" />
    <meta name="author" content="Steven Lambe" />
    <link rel="shortcut icon" href="../favicon.ico"> 
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
    <link rel="stylesheet" type="text/css" href="../css/menu.css" />
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="../css/styleIE.css" />
    <![endif]-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
</head>

Any help or pointers are highly appreciated 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The file name to the font is not the issue since it is an absolute path (the same in both pages: http://fonts.googleapis.com/css?family=Josefin+Slab).

    I’m sure the problem resides in your path to your css.
    This

    <link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/main-menu.css" />

    compared to this

    <link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="../css/menu.css" />

    Those would include changing for your IE implementation as well. As Kai Qing said in his comment to you, I cannot help you get the right path because I don’t know your file structure. If the second (non-working) page is in the same place as the first (working) page then the files should match. If the “css” folder is a subfolder of your root directory, then the path should be /css/main.css etc. That’s about the best I can say for you to try without knowing more.

    • 0