Preconnect fonts

PHOTO

Wed Aug 21 2024 22:37:30 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale #preconnect #fonts #google

//index.html

/// this is for open sans
<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=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet" />


//css stylesheet
 
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

$font-family-base: 'Open Sans', sans-serif;

COPY

Save snippets that work from anywhere online with our extensions

Comments

CSS

@davidmchale

Expanding Div with height Breakout Container Google Font preload Random Image URL Custom Properties width min() counter incrementer custom radio buttons drop button with active SVG <use> with html Preconnect fonts css maps scss map with loop and conditional Viewing a map object only element if we style multiple Grid with Subgrid and responsive first column on mobile stretch child container queries setProperty with CSS variables

#javascript #python #search #historicalcode #google #algorithms

Google’s PageRank Algorithm from 1996 - the origin of internet search

import numpy as np

def pagerank(M, num_iterations=100, d=0.85):
    N = M.shape[1]
    v = np.random.rand(N, 1)
    v = v / np.linalg.norm(v, 1)
    iteration = 0
    while iteration < num_iterations:
        iteration += 1
        v = d * np.matmul(M, v) + (1 - d) / N
    return v

#css #font #fonts

02_Fonts_Class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fonts in CSS</title>

  <style>
    body{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      line-height: 1.6em;
    }
    #welcome p span{
      font-weight: bold;
    }
    #about p span{
      font-style: italic;
    }
    
  </style>
</head>
<body>
  
  <div id="welcome">
    <h2 class="primary-heading">Welcome</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <span> Eius praesentium laboriosam ratione molestiae nobis, nisi quod laudantium aliquid accusamus</span> expedita!</p>
  </div>
  <div id="about">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span> Cumque enim natus ad? Mollitia alias repudiandae </span>iusto molestias voluptatum, dolores eius.</p>
  </div>
  
</body>
</html>

#css #styling #fonts

Fav Google Font Combos

//SIMPLE SANS SERIF FONT
body {
 font-family: 'Lato', sans-serif;
 font-weight: 300;
}
//https://fonts.google.com/specimen/Lato?query=lato
<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=Lato:wght@300&family=Prata&display=swap" rel="stylesheet"> 

// CLASSIC SERIF VERY DIGNIFIED
h1, h2, h3, h4, h5, h6 {
 font-family: 'Prata', serif;
}
//https://fonts.google.com/specimen/Prata
<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=Prata&display=swap" rel="stylesheet">

#text #fonts

Use Two Different Fonts On One Line

/* Text change detail */
h1 strong {
  font-family: aktiv-grotesk-extended !important;
  font-size: 3.1rem;
}

#html #fonts

Google Fonts for business site

<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=Architects+Daughter&family=Bangers&family=Comfortaa&family=Emblema+One&family=Luckiest+Guy&family=Nova+Flat&family=Permanent+Marker&family=Sigmar+One&family=Vujahday+Script&display=swap" rel="stylesheet">

#text #fonts

Vertical Text

// Easy Vertical Text //

@media only screen and (min-width: 640px) { em {
  width: auto !important;
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  font-style: normal !important;
  transform: rotate(180deg);
}
}

em {
  font-style: normal !important;
}

#fonts

Ultimate Guide For Divi Fonts | MarkHendriksen.com

h1 {
	font-size: 48px;
	font-weight: 400;
	line-height: 1.2em;
	color: #000000;
}

h2 {
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2em;
	color: #000000;
}

h3 {
	font-size: 36px;
	font-weight: 400;
	line-height: 1.2em;
	color: #000000;
}

h4 {
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2em;
	color: #000000;
}

h5 {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2em;
	color: #000000;
}

h6 {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2em;
	color: #000000;
}

#preconnect #fonts #google

Preconnect fonts

//index.html

/// this is for open sans
<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=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet" />


//css stylesheet
 
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

$font-family-base: 'Open Sans', sans-serif;

#scss #loop #list #fonts

Looping through a list

$font-sizes: 12px 14px 16px 18px;

@for $i from 1 through length($font-sizes) {
  .text-#{$i} {
    font-size: nth($font-sizes, $i);  // Retrieves the corresponding font size from the list
  }
}


//generates
.text-1 {
  font-size: 12px;
}

.text-2 {
  font-size: 14px;
}

.text-3 {
  font-size: 16px;
}

.text-4 {
  font-size: 18px;
}

#wordpress #google #tag #manager #function

WordPress add Google tag manager by function

add_action( 'wp_body_open', 'wpdoc_add_custom_body_open_code' );
 
function wpdoc_add_custom_body_open_code() {
    echo '<!-- Google Tag Manager (noscript) --> ... <!-- End Google Tag Manager (noscript) -->';
}

#google #sheets

google sheets - How to refer to 'this' cell in a conditional formatting formula? - Web Applications Stack Exchange

https://webapps.stackexchange.com/questions/87025/how-to-refer-to-this-cell-in-a-conditional-formatting-formula

#html #stephanestonge #google

Google Trends Map

  <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2578_RC01/embed_loader.js"></script>
  <script type="text/javascript">
    trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"Penticton","geo":"CA","time":"today 12-m"},{"keyword":"Kelowna","geo":"CA","time":"today 12-m"},{"keyword":"Osoyoos","geo":"CA","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"geo=CA&q=Penticton,Kelowna,Osoyoos&date=today 12-m,today 12-m,today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
  </script>

#spreadsheet #exchange #rate #google

Live exchange rate on spreadsheet

Select a cell from where you want to start displaying the exchange rates. Type the formula: =GOOGLEFINANCE(“CURRENCY:GBPEUR”, “price”, TODAY()-10, TODAY(), “DAILY”)

#javascript #google #translate #api

Google translate

/**
 * Translates text to a certain language.
 * @param {String} text The text to translate (or an options object)
 * @param {String} target The target language to translate to.
 * @param {String} source The source language.
 * @returns {Promise.<object>} Returns a promise resolving into an object with the translated text, raw response JSON, the original text, and the target and source languages.
 * @example
 * var translated = await translate("Hello world", "fr");
 * // ⇒ 
 * // {
 * //   source: "en", 
 * //   original: "Hello world",
 * //   translated: "Bonjour le monde",
 * //   result: "weird google stuff here"
 * // }
 *
 */
async function translate(text, target, source, proxy) {
  if (typeof text == "object") {
    target = text.target;
    source = text.source;
    proxy = text.proxy;
    text = text.text;
  }
  var opts = {
    text: text || "",
    source: source || 'auto',
    target: target || "en",
    proxy: proxy || "",
	}
  var result = await fetch(
    `https://${opts.proxy}translate.googleapis.com/translate_a/single?client=gtx&sl=${opts.source}&tl=${opts.target}&dt=t&q=${encodeURI(opts.text)}`
  ).then(res => res.json());
  return {
    source: opts.source,
    target: opts.target,
    original: text,
    translated: result[0]?.[0]?.[0],
    result,
  };
}

#javascript #api #js #autocomplete #google

Google autocomplete API

async function autocomplete(text){
	return JSON.parse(await fetch("https://www.google.com/complete/search?q=testing&client=Firefox").then(res => res.text()))[1];
}

Preconnect fonts

Save snippets that work from anywhere online with our extensions

Comments

More like this

CSS

Browse more snippets >>

Preconnect fonts

Save snippets that work from anywhere online with our extensions

Comments

More like this

CSS

Browse more snippets >>

Embed code snippet