Alaoğlu Tasarım | Google fontları kullanımı CSS ile belirli font stilleri nasıl kullanılır?

Montserrat gibi Google tarafından sunulan yazı tipinin birçok farklı stili vardır: İnce, Ekstra Hafif, Hafif, Normal, vb…

CSS ile bir stil belirlemenin bir yolunu bulamadım. Yazı tipi ağırlığını kullanmak, bu CodePen’de görülebileceği gibi yalnızca bazılarına erişebilir.

&lt;link href='//fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800' 
rel='stylesheet' type='text/css'&gt;

rel='stylesheet' type='text/css'>

<p class="w100">This is 100 weight</p>

1	<p class="w100">This is 100 weight</p>

body {
 padding: 0 20px;
 font-family: 'Montserrat';
 font-size:40px;
}

.w100 {
 font-weight: 100;
}

body {

padding: 0 20px;

font-family: 'Montserrat';

font-size:40px;

}

.w100 {

font-weight: 100;

}

Extra-Light stilini kullanmak istiyorum ama normal, aldığım en hafif stil.

Google yazı tipleri sayfası aslında size bunu nasıl yapacağınızı söyleyecektir ve bir ağırlık seçme yardımcı programı içerir. En ince stili istiyorsanız, Montserrat için budur (farklı yazı tiplerinin farklı ağırlıkları vardır):

HTML:

&lt;link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet"&gt;

1 2	<link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet">

Bunu sizinkiyle karşılaştırın, fazladan ağırlıkları ve iki hatası var ( href='//yerine href="https://ve hinyerine thin)

CSS:

font-family: 'Montserrat', sans-serif;
font-weight: 100;

font-family: 'Montserrat', sans-serif;

font-weight: 100;

Ek ağırlıklar istiyorsanız, bunları şu şekilde ekleyin:

&lt;link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300" rel="stylesheet"&gt;

1 2	<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300" rel="stylesheet">

İndirmeleri gerekeceğinden, yalnızca gerçekten kullanacaklarınızı belirtmek istediğinizi unutmayın, dolayısıyla sayfanızın yükleme süresi artar.

İşte Montserrat için çalışan bir örnek . Sizin için yeterince ince değilse 100, şansınız kalmaz.

* {
  font-family: 'Montserrat', sans-serif;
}
.w100 {
  font-weight: 100;
}
.w200 {
  font-weight: 200;
}
.w300 {
  font-weight: 300;
}
.w400 {
  font-weight: 400;
}

* {

font-family: 'Montserrat', sans-serif;

}

.w100 {

font-weight: 100;

}

.w200 {

font-weight: 200;

}

.w300 {

font-weight: 300;

}

.w400 {

font-weight: 400;

}

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p class="w100"&gt;This is 100 weight&lt;/p&gt;
    &lt;p class="w200"&gt;This is 200 weight&lt;/p&gt;
    &lt;p class="w300"&gt;This is 300 weight&lt;/p&gt;
    &lt;p class="w400"&gt;This is 400 weight&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p class="w100">This is 100 weight</p>

<p class="w200">This is 200 weight</p>

<p class="w300">This is 300 weight</p>

<p class="w400">This is 400 weight</p>

</body>

</html>

Google yazı tiplerinden yazı tipi bağlantısını index.html dosyanıza aktardıktan sonra. Farklı yazı tipi ağırlıklarına sahip Montserrat yazı tipi ailesinin css kodunu içeren bir global.css dosyası oluşturun.

Bu yazı tipini tepki projemde kullanıyorum.

google yazı tiplerinden yazı tipini içe aktarın veya bağlayın. benimki buna benziyor

    &lt;style&gt;
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap');
      &lt;/style&gt;

<style>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

</style>

Font ailesindeki her değişkeni kullanmak için css dosyasını incelemenizde çok fayda var.

   .thin {
        /* Montserrat Thin = 100 */
        font-weight: 100;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    .extralight {
        /* Montserrat Extra Light = 200 */
        font-weight: 200;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .light {
        /* Montserrat Light = 300 */
        font-weight: 300;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .regular {
        /* Montserrat Regular = 400 */
        font-weight: 400;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .medium {
        /* Montserrat Medium = 500 */
        font-weight: 500;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .semibold {
        /* Montserrat Semi-bold = 600 */
        font-weight: 600;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .bold {
        /* Montserrat Bold = 700 */
        font-weight: 700;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .extrabold {
        /* Montserrat Extra Bold = 800 */
        font-weight: 800;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .black {
        /* Montserrat Black = 900 */
        font-weight: 900;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }

.thin {

/* Montserrat Thin = 100 */

font-weight: 100;