Schriftarten und Logos - der Internetgiganten

YouTube

download - Schriftart

head - Bereich der Webseite

<style type="text/css">
         @font-face {
         font-family: 'YouTube'; /* Gewünschter Name */
         src: url('../fonts/league-gothic-regular.otf');} /* Pfad zur Schriftendatei */
         </style>

body - dort wo es stehen soll

<font face="YouTube">You<span style="background-color: #E22E28; color: #fff; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;">Tube</span></font>

Expedia

download - Schriftart

head - Bereich der Webseite

<style type="text/css">
         @font-face {
         font-family: 'expedia'; /* Gewünschter Name */
         src: url('../fonts/Geometric_415_Medium.otf');} /* Pfad zur Schriftendatei, oder zur ttf-Datei */
         </style>

body - dort wo es stehen soll

<font face="expedia" color="#00355f">Expedia</font>

Informationen zur Schrift

GOOGLE • Google

download - Schriftart

head - Bereich der Webseite

<style type="text/css">
         @font-face {
         font-family: 'google'; /* Gewünschter Name */
         src: url('../fonts/product-sans.otf');} /* Pfad zur Schriftendatei, oder zur ttf-Datei */
         </style>

body - dort wo es stehen soll

<font face="google" title="Google"><font color="#4285F4">G</font><font color="#EA4335">O</font><font color="#FBBC05">O</font><font color="#4285F4">G</font><font color="#34A853">L</font><font color="#EA4335">E</font></font>

Informationen zur Schrift

Hinweis, das klein geschriebene „e“ Passt nicht ganz

twitter

download - Schriftart

head - Bereich der Webseite

<style type="text/css">
         @font-face {
         font-family: 'twitter'; /* Gewünschter Name */
         src: url('../fonts/arista.otf');} /* Pfad zur Schriftendatei, oder zur ttf-Datei */
         </style>

body - dort wo es stehen soll

<font face="twitter" color="#00ACED" title="twitter">twitter</font>

thicker 𝕏

Ob die Schriftart auch für thicker X genutzt wird, habe ich noch nicht herausgefunden.

Das 𝕏 ist aus der Schriftart „MATHEMATICAL DOUBLE-STRUCK“ Capital X, als Unicode U+1D54F oder HTML 𝕏

Emoji thicker X

𝕏

𝕏

<span style="display:inline-block; background-color:#050505; border-color:#050505; color:#f4f5f6; width:50px; height:50px; padding:8px 0 0 0; border-radius:50%; border:1; border-style:solid; margin:auto; text-align:center; font-size:3em;" title="thicker X">&#120143;</span>

Download der Logos SVG

facebook

download - Schriftart

head - Bereich der Webseite

<style type="text/css">
         @font-face {
         font-family: 'facebook'; /* Gewünschter Name */
         src: url('../fonts/facebook-letter-faces.otf');} /* Pfad zur Schriftendatei, oder zur ttf-Datei */
         </style>

body - dort wo es stehen soll

facebook

<font face="facebook" title="facebook" style="background-color: #3D579D; color: #fff; padding: 10px;">facebook</font>

nur Schrift

facebook

<font face="facebook" title="facebook" color="#3D579D">facebook</font>

YAHOO!

download - Schriftart

head - Bereich der Webseite

<style type="text/css">
         @font-face {
         font-family: 'yahoo'; /* Gewünschter Name */
         src: url('../fonts/yahoo.otf');} /* Pfad zur Schriftendatei, oder zur ttf-Datei */
         </style>

body - dort wo es stehen soll

<font face="yahoo" color="#7B0099" title="YAHOO!">YAHOO!</font>

Ovaler Kreis

  Y  

<span style="font-family:yahoo;background-color:#7B0099;color:#fff;padding:5px;border-radius:50%;border:1;border-style:solid;border-color:#7B0099;font-size:1.5em;margin-left:25px;" title="YAHOO!">&nbsp;&nbsp;Y&nbsp;&nbsp;</span>

bing

download - Schriftart

head - Bereich der Webseite

<style type="text/css">
         @font-face {
         font-family: 'bing'; /* Gewünschter Name */
         src: url('../fonts/topeka.otf');} /* Pfad zur Schriftendatei, oder zur ttf-Datei */
         </style>

body - dort wo es stehen soll

<font face="bing" color="#FFB900" title="bing">bing</font>

Informationen zur Schrift

Die aktuelle neue Schriftart habe ich als Download nicht gefunden, hier die alte Schriftart.

ebay

download - Schriftart

head - Bereich der Webseite

<style type="text/css">
      @font-face {
      font-family: 'ebay'; /* Gewünschter Name */
      src: url('../fonts/HankenGrotesk-VariableFont_wght.ttf');} /* Pfad zur Schriftendatei */
      </style>

body - dort wo es stehen soll

<font face="ebay" title="ebay" style="letter-spacing: -0.13em;font-size: 1.5em;font-weight: bold;"><font color="#de0007">e</font><font color="#0064d2">b</font><font color="#f4ae00">a</font><font color="#7ab000">y</font></font>

Informationen zur Schrift

Das eBay-Logo ist eine speziell modifizierte Schrift, die nicht als Fließtext-Font zur Verfügung steht und deren Rechte ausschließlich bei eBay liegen. Hier wird die halbwegs passende Schriftart verwendet.

Aptos

Ursprünglich Bierstadt, ist eine statische Grotesk-Schriftart. Sie ist die neue Standardschriftart (2024) von Microsoft Office der Nachfolger von Calibri.

Download für Windows und Mac: aptos-font.zip

FLIXTRAIN FLIXBUS

Download Schriftenpaket: Magistral-Bold.zip

head - Bereich der Webseite

<style type="text/css">
        @font-face {
             font-family: 'flixbus';
             src: local('Magistral Bold'), local('Magistral-Bold'),
                  url('../fonts/Magistral-Bold/Magistral-Bold.woff2') format('woff2'),
                  url('../fonts/Magistral-Bold.woff') format('woff'),
                  url('../fonts/Magistral-Bold.ttf') format('truetype');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
                   }
        </style>

body - dort wo es stehen soll

<p style="font-family:flixbus; color:#73d600; font-weight:bolder;">FLIXTRAIN FLIXBUS</p>

moz://a

Download Schriftenpaket: rockwell-nova.zip

head - Bereich der Webseite

<style type="text/css">
         @font-face {
         font-family: 'mozilla'; /* Gewünschter Name */
         src: url('../fonts/RockwellNova-Bold.ttf');} /* Pfad zur Schriftendatei */
         </style>

body - dort wo es stehen soll

<font face="mozilla" title="mozilla" style=" color: #050505; background-color: #ffffff; font-size: 1.3em; padding: 5px;">moz://a</font>