Google Fonts API usage in an ASP.NET Core web app

Question

Google Fonts API usage in an ASP.NET Core web app

100 views Asked by Mohammad Radwan At 15 February 2024 at 16:43

I'm building a web application using ASP.NET Core. For font styling I used the Google Fonts API. I included some code in the head section of the _layout.cshtml file.

Locally the API is working perfectly, I know this because I tried fonts which are not installed on my machine. However when I publish my app to Hosting website, the default font is rendered

How can I solve this issue?

This is what I've tried

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:[email protected]&display=swap" rel="stylesheet">
<style type="text/css">
    body {
        font-family: "Cairo", sans-serif;
    }
</style>

Original Q&A

There are 1 answers

**BlackSD** · Answer 1 · 2024-02-15T17:15:48+00:00

Try this code. When publish this code on IIS site works.

Check if your server accept googleapis and gstatic request.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:[email protected]&display=swap" rel="stylesheet">
    <style type="text/css">
        body {
            font-family: "Cairo", sans-serif;
        }
    </style>
</head>
<body>
    <h1>Cairo Test</h1>
    <p>Hello world.</p>
</body>
</html>

Edit 2:

Comments:

Remove <link rel="preconnect" href="https://fonts.googleapis.com">, <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> I recommend to delete ":[email protected]" because in body section you can setup the font width .

Also, try using font-family with single single quote

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet">
    <title>Title</title>
    <style type="text/css">
        body {
            font-family: 'Cairo',sans-serif;
        }
    </style>
</head>
<body>
    <h1>Cairo Test</h1>
    <p>Hello world.</p>
</body>
</html>

Edit 3

Just for discard default style on Plesk/Net Core/CSS Boostrap add !important.

body 
{
   font-family: 'Cairo',sans-serif !important;
}

TechQA.

Google Fonts API usage in an ASP.NET Core web app

There are 1 answers

Related Questions in C#

Related Questions in CSS

Related Questions in ASP.NET-CORE

Related Questions in GOOGLE-FONTS

Popular Questions

Popular Tags

Trending Questions