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 best solutions below

BlackSD On 15 February 2024 at 17:15

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;
}

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

There are 1 best solutions below

Related Questions in C#

Related Questions in CSS

Related Questions in ASP.NET-CORE

Related Questions in GOOGLE-FONTS

Trending Questions

Popular # Hahtags

Popular Questions