Why google fonts not working after uploading site?

Question

Why google fonts not working after uploading site?

1k Views Asked by Lucia Vavrova At 10 April 2025 at 20:00

Google fonts on my website are working as expected only if I open the index file from my compuer. When I upload it on internet, font does not work properly (see the pictures and code below). Thanks for the help! :)

URL: http://veganrecipes.clanweb.eu/

fonts working

fonts does not work

html code:

<head>
<title>Krajčírstvo Jana Fürhofferová</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Dancing+Script&display=swap" rel="stylesheet">

css code:

    .navbar-brand {
    font-size: 4vw;
    text-align: center;
    font-family: 'Dancing Script', cursive;
}

.nav-item {
    font-size: 25px;
    font-family: 'Comfortaa', cursive;
    padding: 15px;
}

.heading {
    font-size: 30px;
    font-family: 'Comfortaa', cursive;
    text-align: left;
    font-weight: bold;
}

p {
    font-size: 20px;
    font-family: 'Comfortaa', cursive;
    text-align: left;
    line-height: 160%;
}

.text {
    line-height: 200%;
}

Original Q&A

There are 3 best solutions below

**codeHysteria** · Answer 1

codeHysteria On 27 November 2020 at 10:59

For the start you can try setting meta tag:

<meta charset="UTF-8">

**Kazimierz Niewielki** · Answer 2

Add charset metatag in your head section

<meta charset="utf-8">

From w3:

One advantage of using the HTTP header is that user agents can find the character encoding information sooner when it is sent in the HTTP header.

The HTTP header information has the highest priority when it conflicts with in-document declarations other than the byte-order mark. Intermediate servers that transcode the data (ie. convert to a different encoding) could take advantage of this to change the encoding of a document before sending it on to small devices that only recognize a few encodings. It is not clear that this transcoding is much used nowadays. If it is, and it is converting content to non-UTF-8 encodings, it runs a high risk of loss of data, and so is not good practice.

On the other hand, there are a number of potential disadvantages:

It may be difficult for content authors to change the encoding information for static files on the server – especially when dealing with an ISP. Authors will need knowledge of and access to the server settings.

Server settings may get out of synchronization with the document for one reason or another. This may happen, for example, if you rely on the server default, and that default is changed. This is a very bad situation, since the higher precedence of the HTTP information versus the in-document declaration may cause the document to become unreadable.

There are potential problems for both static and dynamic documents if they are not read from a server; for example, if they are saved to a location such as a CD or hard disk. In these cases any encoding information from an HTTP header is not available.

Similarly, if the character encoding is only declared in the HTTP header, this information is no longer available for files during editing, or when they are processed by such things as XSLT or scripts, or when they are sent for translation, etc.

**AudioBubble** · Answer 3

AudioBubble On 27 November 2020 at 11:05

Describe metadata within an HTML document: charset="UTF-8"

Why google fonts not working after uploading site?

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in GOOGLE-FONTS

Trending Questions

Popular # Hahtags

Popular Questions