Published
Edited
May 22, 2019
md`# Web Integration
There are several ways to integrate YouTube Sans as a web font and to optimize that integration.
Regardless of the approach, your site will interact with two key elements:
Web font CSS (https://fonts.googleapis.com/css?family=YouTube+Sans)
1. Can be generated by Google Fonts servers or inlined into your page
2. User-Agent specific, takes advantage of browser-specific font capabilities
Font files
1. The CSS links to the best font for the User-Agent
2. Served from Static Content Service (go/scs)
## Stylesheet Link
By far the easiest and most widely used option, add a stylesheet link pointing to Google Fonts, use the font, and you're done! You share cache hits with all other users of the stylesheet. This should be your default choice.
For example:
\`\`\`
<style>
@import url(//fonts.googleapis.com/css?family=YouTube+Sans);
h1 { font-family: 'YouTube Sans', Arial, sans-serif; }
</style>
\`\`\`
OR
\`\`\`
<link href="https://fonts.googleapis.com/css?family=YouTube+Sans" rel="stylesheet">
<style>
h1 { font-family: 'YouTube Sans', Arial, sans-serif; }
</style>
\`\`\`
# Android Integration
## Requirements
Make sure you add the YouTube Sans \`font\` package to your dependencies.
\`\`\`
deps = [
"//java/com/google/android/libraries/youtube/font",
]\`\`\`
You should also try to use \`AppCompatTextView\` instead of \`TextView\`. This allows for Downloadable Fonts to be used before API level 26. The best way to ensure this is to have your activities extend \`AppCompatActivity\`, or update them to use \`AppCompatDelegate\`.
If you are unable to use \`AppCompatTextView\`, \`TextView\` should work on api >= 16. In this case you should also make sure to use \`android:fontFamily\` instead of \`app:fontFamily\` or \`fontFamily\`. You will also need to load the font resource yourself using \`ResourcesCompat.getFont()\`.
## Usage
Use \`@font/yt_sans\` anywhere you would use a font family.
\`\`\`
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fontFamily="@font/yt_sans"
android:text="@string/hello_world"/>
\`\`\`
# iOS Integration
## Requirements
You will have to bundle the font into your app. Use these targets to include it:
\`\`\`
deps = [
"//googlemac/iPhone/Shared/YouTube/fonts/YTSans:Medium",
"//googlemac/iPhone/Shared/YouTube/fonts/YTSans:Regular",
"//googlemac/iPhone/Shared/YouTube/fonts/YTSansDark:Medium", # for dark theme
"//googlemac/iPhone/Shared/YouTube/fonts/YTSansDark:Regular", # for dark theme
]\`\`\`
Other optional targets include:
\`\`\`
"//googlemac/iPhone/Shared/YouTube/fonts/YTSans:Light",
"//googlemac/iPhone/Shared/YouTube/fonts/YTSans:Bold",
"//googlemac/iPhone/Shared/YouTube/fonts/YTSans:Semibold",
"//googlemac/iPhone/Shared/YouTube/fonts/YTSans:Extrabold",
"//googlemac/iPhone/Shared/YouTube/fonts/YTSans:Black",
"//googlemac/iPhone/Shared/YouTube/fonts/YTSansDark:Light",
"//googlemac/iPhone/Shared/YouTube/fonts/YTSansDark:Bold",
"//googlemac/iPhone/Shared/YouTube/fonts/YTSansDark:Semibold",
"//googlemac/iPhone/Shared/YouTube/fonts/YTSansDark:Extrabold",
"//googlemac/iPhone/Shared/YouTube/fonts/YTSansDark:Black"\`\`\`
## Usage
Use the \`fontOfSize\` API in the font class:
### Objective-C
\`\`\`
#import "googlemac/iPhone/Shared/YouTube/fonts/YouTubeSans/src/YouTubeSans+Regular.h"
#import "googlemac/iPhone/Shared/YouTube/fonts/YouTubeSans/src/YouTubeSansDark+Regular.h"
#import "googlemac/iPhone/YouTube/Modules/Common/Public/Presentation/YTPageStyle.h"
// ...
- (void)pageStyleDidChange:(YTPageStyle)pageStyle {
UIFont *font;
switch (pageStyle) {
case kYTPageStyleLight:
font = [YTSansRegular fontOfSize:kFontSize];
case kYTPageStyleDark:
font = [YTSansDarkRegular fontOfSize:kFontSize];
label.font = font;
}\`\`\`
### Swift
\`\`\`
import googlemac_iPhone_Shared_YouTube_fonts_YouTubeSans_Regular
label.font = YouTubeSansRegular.font(ofSize: kFontSize)
\`\`\`
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
